画像x2 sp_img_2column

PC表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 49%;
  margin-bottom: 0.5rem;
}
li:nth-child(odd) {
  margin-right: 1%;
}
li:nth-child(even) {
  margin-left: 1%;
}
li img {
  width: 100%;
}

レスポンシブ表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}
li:nth-child(odd) {
  margin-right: 0;
}
li:nth-child(even) {
  margin-left: 0;
}
li img {
  width: 100%;
}

画像x3 sp_img_3column

PC表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 32%;
  margin-bottom: 0.5rem;
}
li:nth-child(3n-1) {
  margin: 0 2%;
}
li img {
  width: 100%;
}

レスポンシブ表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}
li:nth-child(3n-1) {
  margin: 0 0 0.5rem;
}
li img {
  width: 100%;
}

画像複数行折り返し(2列) sp_img_flap_2column

PC表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 49%;
  margin: 0 0 0.5rem;
}
li:nth-child(even) {
  margin: 0 0 0.5rem 2%;
}
li img {
  width: 100%;
}

レスポンシブ表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin: 0 0 0.5rem;
}

li:nth-child(even) {
  margin: 0 0 0.5rem;
}
li img {
  width: 100%;
}

画像複数行折り返し(3列) sp_img_flap_3column

PC表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 32%;
  margin: 0 0 0.5rem;
}
li:nth-child(3n-1) {
  margin: 0 2% 0.5rem;
}
li img {
  width: 100%;
}

レスポンシブ表示


ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin: 0 0 0.5rem;
}
li:nth-child(3n-1) {
  margin: 0;
}
li img {
  width: 100%;
}

左画像+右テーブル sp_img+table_2column

PC表示

  • 一行目 の値
    二行目 の値
    三行目 の値
    四行目 の値
    五行目 の値
    六行目 の値
    7行目 の値
    8行目 の値
    9行目 の値
    10行目 の値
    11行目 の値
    12行目 の値

ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 50%;
  vertical-align: top;
  margin: 0 0 0.5rem;
}
li:first-child {
  width: 49%;
  margin-right: 1%;
}
li img {
  width: 100%;
  margin-bottom: 0.5rem;
}
li img:last-child {
  margin-bottom: 0;
}
li table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #CCCCCC;
}
li table th {
  border: 1px solid #CCCCCC;
  background-color: #F1F1F1;
  width: 35%;
  text-align: left;
  padding: 5px;
  font-weight: normal;
}
li table td {
  border: 1px solid #CCCCCC;
  width: 65%;
  text-align: left;
  padding: 5px;
}

レスポンシブ表示

  • 一行目 の値
    二行目 の値
    三行目 の値
    四行目 の値
    五行目 の値
    六行目 の値
    7行目 の値
    8行目 の値
    9行目 の値
    10行目 の値
    11行目 の値
    12行目 の値

ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  font-size: 12px;
  width: 100%;
  vertical-align: top;
  margin: 0 0 0.5rem;
}
li:first-child {
  width: 100%;
  margin: 0 0 0.5rem;
}
li img {
  width: 100%;
  margin-bottom: 0.5rem;
}
li img:last-child {
  margin-bottom: 0;
}
li table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #CCCCCC;
}
li table th {
  border: 1px solid #CCCCCC;
  background-color: #F1F1F1;
  width: 35%;
  text-align: left;
  padding: 5px;
  font-weight: normal;
}
li table td {
  border: 1px solid #CCCCCC;
  width: 65%;
  text-align: left;
  padding: 5px;
}