HTML+CSSコーディングが「まだちょっと…」みたいな初心者がコッソリ読んで救われるお話。 #初心者

Ateam Lifestyle x cyma Advent Calendar 2018 の23日目は、株式会社エイチームでcymaの開発をしている@minami-nuが担当します。
よろしくお願いします。

この記事について

Webサイトの基本的な組み方・注意点を理解する。
運用していくなかで、あとから色々と入れやすい・調整しやすいことを前提にした組み方とする。
「使用タグはこうあるべきだ。」「div多くない？」「class名が気に入らない。」的なことは一旦置いておく。（※本記事はあくまで「組み方」「注意点」などに意識をおいてます）
htmlタグとcssプロパティの意味はある程度知ってる前提。

この記事を書いた理由

私は普段はフロントや更新の業務を行っています。
エイチームグループで働く前まではいわゆる「制作会社」で働いてきました。
その中でHTML+CSSコーディング（※以下コーディング）に対して苦手意識を持っている人によく出会った記憶があります。
実際業務をこなしていく中で、聞かれたこと、教えたことからいくつかの「考え方・ポイント・注意点」を知っておけばイメージが変わると思って書いた記事です。

オススメの読者

そもそもコーディング無理だって人。
できるけど、ゴリゴリなデザインカンプくるとお腹が・・・
それでもやりたいから、力技や独学で生きてきた人。
つまり自信はないので、ちゃんとできるようになりたい！

では、レッツトライ。

其の1. 背景デザイン100%で切れるところを見つける

デザインカンプをもらったら、まずは背景デザインが100%（要は画面いっぱい）のところを見つけましょう。
背景でなくてもコンテンツがデザイン内でいっぱいなのであれば、それはディレクターやデザイナーに聞いておきましょう。
そしてそれがある分、header、navi、main_visual、contents、footerみたいに大きいブロックで切り、ついでにidを振ってしまいます。

html

<body>
  <header>ここはheaderだよ</header>
  <nav id="g_navi">ここはグローバルナビゲーションとか</nav>
  <div id="main_visual">トップのスライドとか、下層ページで共通になる大きな見出しとか</div>
  <div id="contents">サイトのコンテンツ。サイドバーとかもこの中に</div>
  <footer>ここはfooterだよ「ページの先頭へ戻る」みたいのもここか、contensの最後に </footer>
</body>

こうすることで、見た目（デザイン）に対してのhtmlタグの関連付けが認識しやすくなります。

其の2. サイトの領域をあえて、class化する

100%で切ってしまったら、その中にサイトの領域を用意します。

html

<header id="header">
  <div class="site_area">
    サイトの領域
  </div>
</header>
<nav id="g_navi">
  <div class="site_area">
    サイトの領域
  </div>
</nav>
※他のcontentsとかfooterも同じように。

css

/* サイトの設計幅が1000pxだった想定です */
.site_area {
  width: 1000px;
  margin: 0 auto;
}

其の1と合わせて、この組み方をベースにしておくことで、後の運用で「ナビの下にキャンペーンのバナーいれたいんだよね」「メインの画像大きくしてナビと上下入れ替えたいんだよね」みたいなことが起きても楽勝です。

其の3. 大枠をしっかり組む

1,2の流れで、footerまで組んでしまいましょう。
ついでにheaderやナビゲーションの背景なんかの装飾も行っていきます。
最近見かけることは減りましたが、コンテンツが左右にメインとサブみたいにわかれているようなマルチカラムなサイトの場合は、更にmain_col（メインカラム）、sub_col（サブカラム）と作ってしまいましょう。

html

<div id="contents">
  <div class="site_area clearfix">
    <div id="main_col">
      メインカラムだよ
    </div>
    <div id="sub_col">
      サブカラムだよ
    </div>
  </div>
</div>

css

/* headerのデザインとか（この設定はあくまで例） */
#header {
  padding: 10px 0;
  background: **********;
}

/* カラム組 */
#main_col {
  float: left;
  width: 680px;
}
#sub_col {
  float: right;
  width: 300px;
}

ここまできたら、きちんとクロスブラウジングしておきましょう。（これ大事）
※クラスブラウジング：複数のブラウザできちんと確認すること。

其の4. clearfixに素直に頼る

さて、あとはデザインカンプに合わせて、中身をコーディングしていきます。
ここで組む前にclearfixについて押さえておきます。
ではそもそもclearfixってなにか。
通常、float後はclearプロパティを使用して解除をおこないますが、何かとうまくいかないことも多いでしょう。
そこでclearプロパティを使用せずに、回り込みを解除する方法になります。

この回り込みの解除がうまくできていないと、

次のコンテンツが勝手に横にきちゃう
marginみたいな余白がうまくきかない
背景画像を設定をしてもうまく表示されない
高さが認識されてない！？

など、デザインがうまく表現できず足止めをされてしまいます。
どうしてこういったことが発生するかまでは本記事では割愛しますが、「clearfix」で検索いただければたくさん記事がでてきます。

細かく記載してくださってる記事がありましたので、張っておきます。こちら⇒

さて、使い方のルールも簡単ですので、今覚えてしまいましょう。

使い方の説明（例）
ナビゲーションや、似たデザインを複数並べる場合があったとします。

html

<ul class="list_contents clearfix">
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
</ul>

css

ul.list_contents li {
  float: left;
  width: 250px;
}

/* clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

clearfixはfloatが指定されている要素の直近（すぐ上）の親要素に指定しましょう。
上記でいうとli要素にfloatが指定されているため、親となるのはulですよね。
これで回り込み解除できます。簡単ですね。
※clearfixの中身は色々な案が世の中にあるので、検索して色々試してみると良いとおもいます。
※最近のブラウザは賢いものばかりですので、どれを使用しても基本的に問題を感じることは少なくなってきていると感じます。

其の5. 余白計算を理解して

clearfixを語ったところで、もうひとつ理解しておいたほうがよいことをお話します。

それはpadding、border使用時の余白計算。
box-sizing:border-box;使えばいいのでは・・・って人は流してください。
ただ、余白計算を理解しておいて損はありませんし、崩れたときの原因の突き止めも早くなると思います。

要素には横幅（width）が存在します。
それは自然と決まる場合もあれば（要は指定しない）指定して設定することもあります。
そこに余白をとるためにpaddingを設定することも少なくありません。

（例）ある要素の幅を250pxとし、それに2pxのborderと20pxの余白をとりたい。
其の4で説明したソースで説明します。

html

<ul class="list_contents clearfix">
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
  <li>コーディングの中身</li>
</ul>

正解css

css

ul.list_contents li {
  float: left;
  width: 206px;
  border: #666 2px solid;
  padding: 20px;
}

/* clearfixはここでは割愛 */

不正解css

css

ul.list_contents li {
  float: left;
  width: 250px;
  border: #666 2px solid;
  padding: 20px;
}

/* clearfixはここでは割愛 */

記述だけ見ると、正解のが不正解のように見えます。
ではなにがいけないのか。
それはwidthの数値はpaddingの数値を含まないことにあります。
不正解側の記述でいくと「ある要素」は294pxで認識します。

計算が面倒だ。その通りです。

なのでcss3からbox-sizing:border-box;さんが生まれました。

css

ul.list_contents li {
  float: left;
  width: 250px;
  border: #666 2px solid;
  padding: 20px;
  box-sizing: border-box;
}

/* clearfixはここでは割愛 */

先ほどの不正解に追加するだけで思い通りの結果に。
天才ですね。

其の6. テクニックはテクニックでしかない

ここまで一生懸命読んでくださった方はなんとなく「なんかわかったかも」って人もいるでしょう（いてほしい）
そんなに多くのことを伝えていないと思います。

割とcssやコーディングのことをネットで調べるとテクニックみたいなことが多いと思います。
近年はcssでやれることが増えてきたせいで「cssでやるオシャレな〇〇」みたいなのも多いですね。
それはそれで覚えていただいて良いのですが、テクニックをたくさん覚えてもいきなり「組む」となると行き詰ってしまいますよね。
そもそもWebサイトをきちんと組み上げることを書いてるものって出会うこと少ないと思います。
なので、「組む」ことに不安を持ってる人が多かったのかなと思います。

【まとめ】

まずはデザインカンプをよくみて、header、navi、contents、footerなどの領域を理解する。
早い段階でクロスブラウジングも忘れずに！
floatするなら、cleafixを絶対忘れないようにしよう！
box-sizing:border-box;を使用すれば、余白計算の落とし穴は塞がるゾ。
テクニックは調べれば出てくる。そこにとらわれすぎないで。

いかがでしたでしょうか？
とっても初心者向けの記事となってしまいましたが、まだ組み上げることに自信のない方へのお力になれれば幸いです。
ありがとうございました！

Ateam Lifestyle x cyma Advent Calendar 2018 明日の24日目は@mziyutさんに書いてもらう予定です。お楽しみに！

エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/