はじめに

社外研修がHTML/CSSの内容に入りました。
WEBページのレイアウトは、悩んだところなので
自分の備忘録もかねて、まとめてみます。

レイアウトの基本

ページのレイアウトとは、ページにあるブロック要素をいくつかのグループに分割して、
レイアウト調整をする。

つまるところ、1枚の紙があるとして、
タイトルとかタイトルロゴとか先頭に置きたいものをグループ①にまとめる
本文のテキストや画像などをグループ②にまとめる
連絡先とかのグループ③・・・

みたいな形で、コンテンツの中身で場所を分割して決めていくことがレイアウト。

当たり前っちゃ当たり前なんですけど・・・。
僕は、混乱しました。

そこで、HTMLで利用するのがdivタグ。

divはdivision(分割)の略らしいです。

そのまんまですね!!

ボックスモデル

ブロックボックスとインラインボックス

ブロックボックス

・上から下へタテ方向に配置される。
・幅、高さを指定できる。(width,height)
・上下左右のmargin、paddingを指定できる

インラインボックス

・上下のmarginを指定できない
・幅や高さを指定できない
※img,input.textareaなど一部、指定できるものもある。
　このような要素は置換要素と呼ぶ。

・上下のpaddingは指定できる。
→改行された際に前後の行と被るのであまり利用しない。

▲注意　widthとheightの適用範囲はどこまで？
　　　　　
答え) content-boxまで。(初期値)

box-sizingプロパティの利用で適用範囲は変更できる。

box-sizing:

値	説明
content-box:	width、heightの適用範囲をcontent領域までに変更(初期値)
padding-box:	width、heightの適用範囲をpadding領域までに変更
border-box:	width、heightの適用範囲をpadding+border領域までに変更

marginとpaddingの使い分け

marginを使う場合
　borderの外側に余白が必要
　余白に背景色、背景画像を適用したくない
　値にauto(中央寄せ)を使いたい
　marginの相殺を利用したい
　ネガティブマージンを利用したい
　
paddingを使う場合
　borderの内側に余白を使いたい
　余白に背景色や背景画像を適用させたい
　

ブロック要素とインライン要素

・ブロック要素
→文書の構造に関するもの。(タグ)
h1とかpとか・・・。
※コンテンツを指定しないとヨコ軸めいいっぱい横幅をとる。
※縦方向に並んでいく。

上記がもの凄く注意です。
ブロック要素を横に並べたいときにデフォルトでは縦積みだ！！
って意識を持ってないと混乱します。(しつこいですが)

・インライン要素
→ブロック要素内に納まるコンテンツ。
サイズを調整することはできない。
文字数や中に入っているコンテンツによってサイズが決まる。
(widthやheightは使えない)
※横方向に並んでいく。
ヨコ軸めいいっぱいまで、並んだ場合は改行されます。

float 浮動化

ブロック要素を横に並べたい!
例として、ブログのような記事を投稿するグループと投稿した年月のアーカイブを表示するグループを横並びにするみたいな。

ブロック要素は、基本タテ方向に並んでいくので、横には回らない。
なので、CSSで並べたいブロック要素に対して、floatをあてて浮かせる。
横並びのコンテンツの下に表示したいブロック要素はfloatを解除する。(footerとか)

⇒floatを解除しない場合、浮いているブロックの下に潜り込んでしまう。

sample.html


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <style type="text/css">
    body,
    p {
      margin: 0px;
    }

    header {
      width: 700px;
      height: 300px;
      background-color: orange;
      text-align: left;
      font-size: 42px;
    }

    .archive {
      width: 200px;
      height: 305px;
      background-color: purple;
      float: left;
      text-align: center;
    }

    .main {
      width: 500px;
      height: 305px;
      background-color: pink;
      float: left;
    }

    footer {
      width: 700px;
      height: 50px;
      background-color: blue;
      clear: both;
    }
  </style>
</head>

<body>
  <header>
    サンプル
  </header>
  <div class="archive">
    <p>アーカイブ</p>
    <p><a href="#">2019</a></p>
    <p><a href="#">2018</a></p>
    <p><a href="#">2017</a></p>
    <p><a href="#">2016</a></p>
    <p><a href="#">2015</a></p>
  </div>
  <div class="main">
    タイトル
    <p>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
    </p>
  </div>
  </div>
  <footer></footer>
</body>

</html>

上記は、archiveとmainをfloatで浮かせて横並びにしていて、
その直下にfooterを表示したいため、footerはfloat解除をclear: bothで行っている。

参考

■ 株式会社ヌーラボ, 今更聞けない！エンジニアのための CSS の基礎講座〜ボックスモデル編〜, 2015/12/10, 閲覧日 2019-10-03, https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
■ サルワカ | サルでも分かる図解説明マガジン, 【CSS】displayの使い方を総まとめ！inlineやblockの違いは？, 2019/08/21, 閲覧日 2019-10-03, https://saruwakakun.com/html-css/basic/display#section3

終わりに

基礎的な部分を自分のアウトプットにまとめてみました。
CSSのレイアウト難しいです。

今回は、positionプロパティに触れてないので簡単にまとめられましたが、
positionプロパティやdispalyプロパティが入り乱れると混乱すると思います。

どこかの機会でまとめたいと思います。

難しいといえば、記事を書くのも難しいです。
自分のアウトプット用途以外にも、誰かに役立つものになればいいなあと思っているのですが、
なかなかままならないです。

継続は力なりということで、
まず、投稿するのを継続させていきます。

最後に誤記等あればご指摘いただけると幸いです。