【HTML】左右交互のレイアウト【CSS】

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

よく見かける画像とテキストの左右交互のレイアウトコーディング。

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】
ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…
weblife.ppmp556.com

左右交互のレイアウト

コードは以下のような感じ。（レスポンシブはやらない）

    <section class="p-about">
      <div class="l-inner">
        <div class="p-about__contents">
          <div class="p-about__contentsItem p-contentsBlock p-contentsBlock--evenReverse" >
            <div class="p-contentsBlock__inner">
              <div class="p-contentsBlock__img c-commonImg">
                <img src="images/sample.png" alt="">
              </div>
              <div class="p-contentsBlock__textBox">
                <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
                <p class="p-contentsBlock___text">テキストテキスト</p>
              </div>
            </div>
          </div>
          <div class="p-about__contentsItem p-contentsBlock p-contentsBlock--evenReverse" >
            <div class="p-contentsBlock__inner">
              <div class="p-contentsBlock__img c-commonImg">
                <img src="images/sample.png" alt="">
              </div>
              <div class="p-contentsBlock__textBox">
                <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
                <p class="p-contentsBlock___text">テキストテキスト</p>
              </div>
            </div>
          </div>
          <div class="p-about__contentsItem p-contentsBlock p-contentsBlock--evenReverse" >
            <div class="p-contentsBlock__inner">
              <div class="p-contentsBlock__img c-commonImg">
                <img src="images/sample.png" alt="">
              </div>
              <div class="p-contentsBlock__textBox">
                <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
                <p class="p-contentsBlock___text">テキストテキスト</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

.l-inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}
@media screen and (min-width: 768px) {
  .l-inner {
    max-width: 1201px;
    padding-right: 28px;
    padding-left: 28px;
  }
}

.p-contentsBlock__inner {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-contentsBlock__inner {
    display: flex;
    justify-content: center;
  }
}



.p-contentsBlock__textBox {
  width: 100%;
  height: auto;
  background-color: lightgray;
}
@media screen and (min-width: 768px) {
  .p-contentsBlock__textBox {
    max-width: 500px;
  }
}

.p-contentsBlock__title {
  font-size: 20px;
  font-weight: bold;
}

.p-contentsBlock___text {
  margin-top: 8px;
  font-size: 16px;
}


@media screen and (min-width: 768px) {
  .p-contentsBlock__img {
    max-width: 400px;
    margin-right: 16px;
  }
}


.p-contentsBlock.p-contentsBlock--evenReverse:nth-child(even) .p-contentsBlock__inner {
  flex-direction: row-reverse;
}

.p-contentsBlock.p-contentsBlock--evenReverse:nth-child(even) .p-contentsBlock__img {
  margin-right: 0;
}

.p-contentsBlock.p-contentsBlock--evenReverse:nth-child(even) .p-contentsBlock__textBox {
  margin-right: 16px;
}





.p-about__contentsItem + .p-about__contentsItem{
  margin-top: 24px;
}

よく見かけるレイアウトです。

ベースはこのHTMLで作成してます。

<div class="p-contentsBlock" >
   <div class="p-contentsBlock__inner">
      <div class="p-contentsBlock__img c-commonImg">
         <img src="images/sample.png" alt="">
      </div>
      <div class="p-contentsBlock__textBox">
         <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
         <p class="p-contentsBlock___text">テキストテキスト</p>
      </div>
    </div>
</div>

ベースのp-contentBlockに、専用のクラス（p-contentsBlock–evenReverse）を付与して、そのクラスに対してCSSで左右交互のレイアウトになるようにしてます。

<div class="p-contentsBlock p-contentsBlock--evenReverse" >
 ~~~
</div>

逆の左右交互にしたい場合は、以下のようにします。

<section class="p-works">
  <div class="l-inner">
    <div class="p-works__contents">
      <div class="p-works__contentsItem p-contentsBlock p-contentsBlock--oddReverse" >
        <div class="p-contentsBlock__inner">
          <div class="p-contentsBlock__item c-commonImg">
            <img src="images/sample.png" alt="">
          </div>
          <div class="p-contentsBlock__textBox">
            <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
            <p class="p-contentsBlock___text">テキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="p-works__contentsItem p-contentsBlock p-contentsBlock--oddReverse" >
        <div class="p-contentsBlock__inner">
          <div class="p-contentsBlock__item c-commonImg">
            <img src="images/sample.png" alt="">
          </div>
          <div class="p-contentsBlock__textBox">
            <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
            <p class="p-contentsBlock___text">テキストテキスト</p>
          </div>
        </div>
      </div>
      <div class="p-works__contentsItem p-contentsBlock p-contentsBlock--oddReverse" >
        <div class="p-contentsBlock__inner">
          <div class="p-contentsBlock__item c-commonImg">
            <img src="images/sample.png" alt="">
          </div>
          <div class="p-contentsBlock__textBox">
            <h3 class="p-contentsBlock__title">タイトルタイトル</h3>
            <p class="p-contentsBlock___text">テキストテキスト</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
.p-contentsBlock.p-contentsBlock--oddReverse:nth-child(odd) .p-contentsBlock__inner {
  flex-direction: row-reverse;
}

.p-contentsBlock.p-contentsBlock--oddReverse:nth-child(odd) .p-contentsBlock__img {
  margin-right: 0;
}

.p-contentsBlock.p-contentsBlock--oddReverse:nth-child(odd) .p-contentsBlock__textBox {
  margin-right: 16px;
}


.p-works__contentsItem + .p-works__contentsItem{
  margin-top: 24px;
}

こちらの場合は、別のクラス（p-contentsBlock–oddReverse）を付与してます。

クラス名が長くなって気持ち悪い人もいるかもしれませんが、そこは人それぞれ。

自分の場合はクラス名は長くなっても許容します。そしてなるべく、p-○○__btnとか、p-○○__ttl、p-○○__txtみたいな単語の省略形みたいなクラス名はつけません（c-commonImgのImgはimgタグがあるので許容）。

まあ、なるべくだから絶対ではないけど、意識はしている程度。

ここまで読んでくださりありがとうございました。

CSS HTML

この記事を書いた人

くまだ

記事一覧