はじめに
社外研修が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を解除しない場合、浮いているブロックの下に潜り込んでしまう。
<!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プロパティが入り乱れると混乱すると思います。
どこかの機会でまとめたいと思います。
難しいといえば、記事を書くのも難しいです。
自分のアウトプット用途以外にも、誰かに役立つものになればいいなあと思っているのですが、
なかなかままならないです。
継続は力なりということで、
まず、投稿するのを継続させていきます。
最後に誤記等あればご指摘いただけると幸いです。