【Webデザイン】#2 コーディングの思考の流れ。スマホサンプルサイト作成【参考】

Webデザインの参考になるコーディング中の思考フロー解説。スマホサイトデザインを元にやってみた。Part.2

前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。

▼#1からご覧になられる方はこちらからどうぞ。

webabc.hatenablog.jp

模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました。

そのサイトデザインの画像データを元に、実際にどういった思考の流れでコーディングしていくかを解説していきまず。

入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になってますので、高度な事を期待される方はご容赦ください。

では、やっていきましょう。

クラスとCSSを使って記事を装飾

▼今回作成している元のデザインデータを公開している記事はこちら。

webabc.hatenablog.jp

前回までのコーディングで以下のようにサイト上部が形になってきています。

人気記事バナーのデザインを言語化しながらコーディング

次はメインビジュアルの画像の下の部分からです。

スマホサンプルサイトコーディング練習用、デザインデータキャプチャ

人気記事が３つ横並びになっている部分です。

上にチラっと見えてるグレー部分がメイン画像の部分で、下のメイン記事部分とともに上下省略して見切れさせています。

さっそく言語化してみましょう。

「人気記事バナー」と、大きめの文字サイズで見出しが中央に配置されている。
その下に細い黒の枠線で囲まれた四角の要素が３つ縦に、少し隙間を置いて並んでいる。
四角の要素の中にはまず、画像が上と左右の枠内いっぱいに配置されている。
四角の要素の中、画像の下には記事タイトルが中央揃えに、上下左右少し余白をもちつつ配置されている。
文字は全て明朝体系のフォント。
背景は薄いグレー。

上記のような感じになるかと思います。

前回はひとつひとつ細かく挙げましたが、今回はもう少し要素ごとにまとめてみました。

では次に言語化して解釈した内容を元にHTMLとCSSでコードにしてみましょう。

まずはHTMLから。前回部分は省略しています。

/*人気記事バナー*/
<section class="top-recomend-contents">
  <h2>人気記事バナー</h2>
  <article>
    <a href="">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/webabc/20210114/20210114210829.jpg" alt="人気記事サムネイル">
      <h2>記事タイトル</h2>
    </a>
  </article>
  <article>
    <a href="">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/webabc/20210114/20210114210829.jpg" alt="人気記事サムネイル">
      <h2>記事タイトル</h2>
    </a>
  </article>
  <article>
    <a href="">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/webabc/20210114/20210114210829.jpg" alt="人気記事サムネイル">
      <h2>記事タイトル</h2>
    </a>
  </article>
</section>

まず、HTMLではこのブロック全体をsectionタグで囲んでいます。

そして<section class="top-recomend-contents">と、クラスを付与しています。

トップページの人気コンテンツ群という意味合いでclass="top-recomend-contents"と名付け付けています。

また、各セクションごとに見出しにはh2から用いるようにしています。

▼このあたりのクラス名のつけ方やsection、articleの使い方については過去記事ご参考ください。

webabc.hatenablog.jp

次にCSSを見てみましょう。こちらも前回部分は省略。

/*人気記事バナーセクション*/
.top-recomend-contents{
  background-color: #fafafa;/* 背景色が薄いグレー */
  padding: 36px 16px;/* 上下左右に余白 */
}
.top-recomend-contents h2{
  /*人気記事バナーセクションの中の見出し*/
  color: #333;/* 文字は黒 */
  font-size: 26px;/* 文字のサイズは大きめ */
  margin: 0;/* 余白リセット */
}
.top-recomend-contents article{
  /*人気記事バナーセクションの中の記事部分*/
  border: 1px solid #333;/*黒色の細い枠線*/
  margin-top: 24px;/*記事ごとに隙間*/
}
.top-recomend-contents article h2{
  /*人気記事バナーセクションの記事内の見出し*/
  color: #333;
  font-size: 22px;
  margin: 16px;/* 上下左右に余白 */
}