【Webデザイン】#1 コーディングの思考の流れ。練習サンプルで実際にやってみた。【参考】

スマホサイトコーディング中で何を考えてるか、Webデザイン未経験の方でも参考になるよう練習サンプルで流れを解説。

以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。

webabc.hatenablog.jp

今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。

入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。

高度な事を期待される方はご容赦ください。

模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。

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

元のデザインデータから要素を分析してみる

スマホ版のデザインの方が単純なので、モバイルファーストで実践してみます。

サイトロゴと説明文の部分を分析

▼まずはサイトの上部だけを見て、分析してみましょう。

模写等コーディング練習用スマホWebデザイン。ヘッダー部分

▼まずサイトロゴと説明文のテキストのある範囲を見て、言語化してみます。

コーディングの思考の流れ。ヘッダー部分を分解して考える。

画像の中に何がどういった配置になっているか、見て分析してください。

サイトロゴが大きい文字で中央に配置されている
ロゴ下にサイト説明文テキストが小さい文字で中央に配置されている
ロゴと説明文は上下左右に余白がある。
この部分の背景色は薄いグレーになっている。
文字は明朝体系のフォントになっている。

言葉にすると、上記のように言い表すことができるのではないでしょうか。

HTMLにするならどんなタグがふさわしいか

サイトのロゴや説明文にふさわしいHTMLタグは何かも考えてみましょう。

「サイトを一番に表すロゴなので、見出し…h1かな？」とか

「説明文は文章だからp？でもこれも見出しともいえるし、h1の次ならh2かな？」

といった感じに、自分なりで大丈夫です。

次に、周りに余白や背景色をつけるためにこの部分を囲むタグは何がふさわしいでしょうか。

「とりあえずこの部分を囲むのでdivか、、サイト上部だからheaderかな」

100%の正解じゃなくていいです。

まずは自分なりに形に出来るという事を目指せばOKです。

ヘッダー部分の実際のコーディングサンプル

▼HTMLのサンプル一例。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>コーディング練習</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>サイトロゴ</h1>
      <h2>サイト説明文テキスト</h2>
    </header>
  </body>
</html>

本来はクラス等用いますが、まずは初級ということで使ってません。

特別なことと言えばhead内でリセットCSSを読み込んで、余計なスタイルが付かないように初期化しているくらいでしょうか。

次に先ほど言語化したデザインをCSSで書いていきます。

▼各要素のサイズや色を調べるにはChrome 拡張機能を使いましょう。

webabc.hatenablog.jp

画像をブラウザで開いて、Color Picker EyedroperとPage Ruler Reduxを使えば調べられます。

Chrome拡張機能を使ってデザインデータから各要素のサイズや色などを抽出

▼CSSの一例。言語化したものに近い注釈を入れています。

header{
  background-color: #fafafa;/* 背景色が薄いグレー */
  padding: 32px;/* 上下左右に余白 */
}

h1{
  font-size: 32px;/* ロゴの文字が大きい */
  font-family: serif;/* フォントは明朝系 */
  text-align: center;/* 中央揃え */
}

h2{
  font-size: 12px;/* 説明文の文字は小さい */
  font-family: serif;/* フォントは明朝系 */
  margin-top: 12px;/* ロゴから少し下に離れている */
  text-align: center;/* 中央揃え */
}

▼ここまでで以下のような感じに表示されます。

フォントや余白が微妙に違って見えますが、ここでは一旦ご愛敬ということで良しとします。

微調整は後からで問題なし。まずは一旦形にすることが先決です。

次の部分を見ていきましょう。

メインナビゲーション部分の分析

html/cssコーディング練習用シンプルスマホサイトデザイン。メニュー部分。

同じく言語化していきます。

そして、HTMLのタグで何がふさわしいかも考えてください。

サイトの主要なナビゲーションのためのnavというタグがありますね。
そして、メニューの項目たちは一覧になっているリストとも言えると思います。
メニューなので、クリックして別のページに飛べるリンクである必要があります。

メインナビゲーションのコーディングサンプル

▼メニュー部分のHTMLの一例です。ここでもクラスは一旦省略しています。

<nav>
  <ul>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
    <li><a href="">メニュー</a></li>
  </ul>
</nav>

▼HTMLだけだと、ただの縦の一覧ですね。

スマホデザインメニュー部分、HTMLのマークアップのみの状態。

リセットCSSによってリストのマークや余白などは排除されています。

▼CSSの一例。注釈文のように思考して記述しています。

*{
  box-sizing: border-box;/* サイズ指定に余白も含める */
}

/* ～省略～ */

ul{
  background-color: #333;/* 背景が濃いグレー */
  display: flex;/* 横に並んで配置 */
  flex-wrap: wrap;/* 配置を折り返す */
}
li{
  font-family: serif;/* フォントは明朝系 */
  font-size: 20px;/* 文字は大きめ */
  padding: 18px;/* 上下左右に余白 */
  text-align: center;/* それぞれ列の中では文字は中央揃え */
  width: 50%;/* ２列なので１列あたりは幅が全体の半分 */
}
a{
  color: #fff;/* メニューの文字は白色 */
  text-decoration: none;/* リンクの下線は不要 */
}