いざという時に使えるコーディングTips集

本メンバーシップでは、フリーランス向けの記事の他に、ウェブコーディングで私がよく使うものを1記事3〜4個ずつご紹介していきます。

『ウェブコーディングに挫折したけどやり直したい人』や『実装はしないけどある程度知識は入れておきたい人』などに向けた内容です。
初心者を脱出したいコーダーや、コーディングで実装可能なデザインを把握しておきたいディレクターやデザイナーに役立つように書いていきます。

あなたの現場でぜひご活用ください。

※「divって何？」といった基礎知識がない人や、逆にコーディング実装ができる人には向かない内容です。

コンテンツの順番を入れ替える

PCとスマホのレイアウトを見比べてみると、PCは画像とテキストが横並びになっていて、スマホは見出しと文章の間に画像があります。

ここでは見出しや文章がメインで、画像が見出しや文章を補足する意図で構成されたコンテンツとします。

このレイアウトを私がHTMLマークアップをする場合、以下で実装します。

<div class="wrapper">
  <div class="contents">
    <h2>見出し</h2>
    <p>文章が入ります。この中では3番目に配置されるコンテンツです。文章が入ります。この中では3番目に配置されるコンテンツです。</p>
  </div>

  <div class="image"><img src="image.png" alt="コンテンツを補足する画像"></div>
</div>

『見出し』→『文章』→『画像』の順です。
見出しで概要を伝え、文章で詳細を伝え、コンテンツを補足する画像で完結させるときは、この順番にしていることが多いです。

これをPCレイアウトに合わせてCSSでコーディングしていきます。

.wrapper {
  display: flex; /* 横並び */
  justify-content: space-between; /* アイテムを両端に配置 */
  align-items: center; /* センターリング */
  flex-direction: row-reverse; /* テキスト方向とは逆向き */
  flex-wrap: wrap;
}

.contents {
  width: 60%;
}

.image {
  width: 35%;
}

h2 {
  margin-bottom: 30px;
  font-size: 40px;
}

p {
  font-size: 21px;
  font-weight: 500;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 30px;
}

.wrapper にdisplay: flex; を指定して横並びにします。
そのままだと、テキストが左側、画像が右側に配置されるので、flex-direction: row-reverse; でテキストの方向とは逆向き（この場合、左右の配置を逆向き）にして『画像』→『テキスト』の配置に変えることでPC用レイアウトが実装できます。

次に、スマホレイアウトに合わせてCSSでコーディングしていきます。

@media not all and (min-width: 768px){
  .wrapper {
    align-items: flex-start;
    flex-direction: column; /* 縦並び */
  }

  .contents {
    display: contents;
  }

  .image {
    order: 2; /* 2番目 */
    margin-bottom: 30px;
    width: 100%;
  }

  h2 {
    order: 1; /* 1番目 */
  }

  p {
    order: 3; /* 3番目 */
  }

  .image img {
    aspect-ratio: 3/2;
  }
}

スマホレイアウトのコンテンツの順番は『見出し』→『画像』→『文章』ですが、HTMLは『見出し』→『文章』→『画像』の順でマークアップしています。

<div class="wrapper">
  <div class="contents"><!-- α -->
    <h2>見出し</h2>
    <p>文章が入ります。この中では3番目に配置されるコンテンツです。文章が入ります。この中では3番目に配置されるコンテンツです。</p>
  </div><!-- α -->

  <div class="image"><img src="image.png" alt="コンテンツを補足する画像"></div>
</div>

コンテンツの順番を変えるには、上HTML内の『α』の部分が不要なので、.contents に対してdisplay: contents; を指定します。

display: contents; を指定すると、指定した要素のみ存在しないかのように扱われます。

ここでは、<div class="contents"></div>のみに適用され、<h2> や<p> には適用されません。

<div class="wrapper">
  <h2>見出し</h2>
  <p>文章が入ります。この中では3番目に配置されるコンテンツです。文章が入ります。この中では3番目に配置されるコンテンツです。</p>

  <div class="image"><img src="image.png" alt="コンテンツを補足する画像"></div>
</div>

上のHTMLの状態になりました。
しかし、スマホレイアウトでは『見出し』→『画像』→『文章』の順番です。『画像』と『文章』の配置を変えるためにorder プロパティを使って配置を変えます。

h2 {
  order: 1;
}

.image {
  order: 2;
}

p {
  order: 3;
}

.wrapper にdisplay: flex; を指定しているため、その子要素（<h2> や<p> 、<div class="image">）はflexアイテムになっています。order を指定し、表示順を変更しました。

あと、この手のレイアウトで気をつけたいのが画像の向きです。写真は、PCでは縦向き、スマホでは横向きの方が見やすいことが多いです。

.image img {
  aspect-ratio: 2/3;
  object-fit: cover;
}

@media not all and (min-width: 768px){
  .image img {
    aspect-ratio: 3/2;
  }
}

画像に対してaspect-ratio を指定することでアスペクト比を固定しています。
object-fit: cover も合わせて指定して、画像が歪むことがなくきれいに表示させておきます。

ちなみに、写真は正方形で用意することが多いです。被写体を中央に配置しておき、被写体の周りは切れてもいいものを選びます。
どうしても周りを切れさせたくない場合は、aspect-ratio とobject-fit: cover は指定していません。状況に合わせて対応します。

英語をアクセントにした見出し

英語をアクセントに使ったよくある見出しデザインです。

何も意識せずにマークアップすると以下になります。

<p>Case Study</p>
<h2>導入事例</h2>

もしくは、

<h2><span>Case Study</span>導入事例</h2>

これがだめとは言いませんが、私が今マークアップするなら以下にします。