こんにちは、あすみです。

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です。