【脱ビギナーCSS】基本のメディアを拡張してみる

こんにちは。Web制作フリーランスのホリエです。

今回は、前回作成した基本のメディアを拡張してみます。CSSの上書き部分だけ書けばいいので、少ないコード量で拡張することが出来ますよ。

前回の記事はこちらです。

【脱ビギナーCSS】基本のメディアを実装してみる

今回は、ウェブサイトで頻出するパーツであるメディアをとりあげ、正しいCSSの書き方を考えてみます。

www.blog.hy-webc.com

今回実装するメディアは、下記のように、画像とテキストが左右入れ替わったものです。メディアクエリ時は前回と同じです。

それでは始めましょう！

完成コードと実装結果

コード

<div class="media media--reverse">  <!--①-->
  <figure class="media__img-wrapper">
   <img class="media__img" src="https://www.blog.hy-webc.com/wp-content/uploads/2021/09/homepage600x400.jpg" alt="コンピューター"> 
  </figure>
  <div class="media__body">
    <h3 class="media__title">
      まるっとホームページ制作パック
    </h3>
    <p>ホームページを持ちたい。ゼロの状態からホームページの立ち上げまで全てお願いしたい・・・しかし時間もコストもかけられない、というお客様向けの事業です。<br>
お客様への入念なヒアリング後、最適なデザインテンプレートをベースに作り込むことで、大幅に工数を減らし、短納期、低価格を実現しています。
    </p>
  </div>
</div>

/* 前回のコードに以下を追加 */
.media--reverse {
  flex-direction: row-reverse;  /* ② */
}

.media--reverse .media__img-wrapper {
  margin-right: 0;  /* ③ */
}

.media--reverse .media__body {
  margin-right: 3%;  /* ③ */
}

/* メディアクエリ適用時 */
@media screen and (max-width: 768px) {
  .media--reverse .media__body {
    margin-right: 0;  /* ④ */
  }
}

実装結果

See the Pen メディア-逆位置(original) by hori-suke (@hori-suke) on CodePen.

各プロパティの説明

①media media–reverse

HTMLの変更点は、media–reverseを新たに追加するのみです。かんたんですね。

②flex-direction: row-reverse;

左右入れ替えるには、flex-direction: row-reverse;を指定します。

なお、ここで左右入れ替えると、メディアクエリ時にdisplay: block;でFlexboxが解除されたとき、テキストが上、画像が下になってしまうのでは？という疑問が出るかもしれません。しかし、flex-directionはFlexbox適用時の並びを変えているだけで、Flexbox解除時の状態には何も影響しません。

ですので、Flexbox時にどのような並びを変更しても、メディアクエリ時の「画像が上、テキストが下」という並びは変わりません。

③margin-right: 0; / margin-right: 3%;

左右入れ替わったことに対応して、マージンを付け替えています。margin-left / margin-rightどちらかで、プロジェクト内で統一しておくと、保守しやすいコードになります。

もう１点、ここでの重要なポイントは、クラスの指定方法です。

ここで上書きしたい(マージンを付け替えたい)クラスは、.media__img-wrapperと.media__bodyの２つですが、それらの前に.media–reverseを追加指定しています。

つまり、.media–reverseが親要素に指定されているときだけ、これら２つのクラスを上書きする、という指定方法です。

このように指定する利点としては、元の.mediaのコードは一切改変する必要がなく再利用できる、ということです。

今回は、左右入れ替わるパターンを作りましたが、他にも画像を大きくしたり、背景色を変えたりするパターンも同様に作ることができます。

このように、CSS設計の基本的な考え方として、基本のパーツ（コード）は改変せず、クラスを追加することで拡張させる、というのがポイントとなります。（拡張するために追加するクラスのことをモディファイアと呼びます）

④margin-right: 0;

メディアクエリで縦並びになったとき、不要なmargin-rightを削除しています。

【おまけ】交互に左右入れ替わりで並ぶメディアの実装

これもよく見るパターンですが、交互に左右入れ替わりで並ぶメディアも簡単に作ることが出来ます。下記のようなものです。

コード

CSSのみ載せますが、以下のようになります。（HTMLは<div class=”media”>~</div>を繰り返し並べるだけなので割愛します。)

/* 前回記事のコードに以下を追加 */
.media:nth-child(even) {
  flex-direction: row-reverse;
}

.media:nth-child(even) .media__img-wrapper {
  margin-right: 0;
}

.media:nth-child(even) .media__body {
  margin-right: 3%;
}

/* メディアクエリ適用時 */
@media screen and (max-width: 768px) {
  .media:nth-child(even) .media__body {
    margin-right: 0;
  }
}

勘の良い方ならすぐに判ったと思いますが、.media–reverseを.media:nth-child(even)に置き換えるだけですね。

:nth-child(even)は偶数番目の要素を指定しているので、偶数番目のmediaが左右入れ替わっているというわけです。

おわり

前回と今回の２回に分けて、メディアの実装方法を紹介しました。一見簡単そうに見えるパーツですが、Flexboxの伸縮の指定方法や、クラスを拡張していく書き方など、意外と難しい要素もあります。

メディアはウェブサイトでよく使われるパーツですので、この機会に慣れておきましょう！

なお、この記事は以下の書籍を参考にさせていただいてます。CSS設計を体系的に学ぶには最高の一冊です。