1-4 html/cssだけ!簡単なサイトを作ってみた
2021年04月20日
こんにちは、あすみです。
1-1の作成手順に沿ってサイト作成していきましょう。
そちらの記事を見ていない人は、最初にこちらを見てくださいね。
1-1 html/cssだけ!簡単なサイトを作ってみた
完成版はこちらです。
https://yn-ui.github.io/demo1/
①デザインカンプの全体像を把握しよう。
②header/section/footerごとにブロック分けをし、形を作っていこう。
③header/section/footerの中身を1つ1つ作成してみよう。
今日は前回の色付けしたカンプをもとに、③セクションの中身を作っていきましょう。
今回はheaderです。

headerは大きく3点気をつけていただければ、すぐに出来上がります。
(1)赤色の要素が横並びになっているので、display:flex使用
(2)青色の要素も横並びになっているので、これもdisplay:flex使用
(3)要素をheaderの高さ、上下の真ん中に持ってくる
ここでは(3)に迷う方が多いのではないかと思います。
理解したら簡単なのですが、意外と参考サイトが無かったりして困った記憶があります。
わたしが最もやっていたのは、paddingでのごまかしでした、、、。実はやっている方多いんではないでしょうか。
そうすると下に少し隙間が開いたりして、若干ずれていたりするんですよね。こんな感じ
わかりやすいようにbackgroundをgreenにしています。

なので、Header/footerの高さを指定している場合は、
line-height使えば大丈夫です。もうこれだけです。
line-heightは1行の高さの指定です。

赤色で示しているのがline-heightです。
今回の場合、heightが60pxなので、line-heightも60pxに設定してあります。
そうすると、高さのど真ん中に文字が来てくれます。ありがたいですね。
ちなみに今回の場合は、左側のimgのlogoもline-heightでど真ん中にきます。(imgはブロック要素に指定してくださいね。)
では次回は難関のnewsです。