【HTML & CSS の解説】ヘッダー部分を細かく編集。リストの横並び・余白の調整など

CSS HTML プログラミング

daiki

こんにちは、daiki です。

今回は、HTML & CSS でヘッダー部分の細かい編集を解説します。

Progate で HTML & CSS を学んだので、その復習ついでにアウトプットします。
さらに誰かの役に立てればと思います。

早速ですが、上の画像を見てください。
矢印の部分があると思いますが、それがヘッダーです。

色んな web サイトとかで見たことがあると思います。
タイトルとかメニューとか書いているところですね。

こちらの編集を解説。
では、進めていきましょう😌

HTML & CSS でヘッダーを作成しよう


HTML & CSS を使って、ヘッダーを作りましょう。

ヘッダーの作成

まずはヘッダー部分を作成します。
HTML を書いていきましょう。

こちらが HTML 。
このままの状態で表示させます。

タイトルとリスト化された文字が表示されていますね。
ただ、このままだと味気ないので細かく編集していきます。

と、その前にリストマークが邪魔なので削除しましょう。

リストマークの削除

邪魔なリストマークを削除しましょう。
文字の前にある・ですね。

リストマークを削除するには CSS に list-style: none; を指示します。
none は「なし」という意味です。

こんな感じで CSS に書き込みます。
すると、

リストマークの点が消えていますね。
これでOK。

次はリストを横並びにしてみましょう。
縦に並んでいても見栄えがよくないので。

リストを横並びに

リストを横並びにするには、float を使用します。
float は右と左に指定することができます。

今回は右に移動させるので、left を使います。
なぜ、右なのに left かというと、文字の位置を指定するからです。

float は文字に対してどうか?
というイメージなら分かりやすいかと思います。

では、CSS を書いていきます。

どうなっているか見てみましょう。↓

横に並んでいますね。
でも、このままだとよくないので、次はロゴの横に移動させましょう。

ロゴの横にリスト

ロゴの横にリストを移動させます。
こちらもリストと同じように float: left; を使用します。

ロゴの横に移動させるので、指示を与えるのは header-logo 。
そちらに froat: left; を追加しましょう。

ロゴの横にリストがきました。
順調に進んでいますね。

では、次は余白です。

余白の調整

このままだと、圧迫感があるので文字の余白を調整しましょう。
余白は padding を使用します。

padding は四種類あります。

top,bottom,left,right

上下左右どこでも指定できます。

padding-top: 10px; のように一部の指定もできますが、全体の指定も可能。

padding: 10px 20px 30px 40px;
padding: 上 右 下 左;

という感じで、一個ずつ書かなくても利用できます。
さらに2か所づつの指定もあります。

padding: 10px 20px;
padding: 上下 左右;

今回はこちらを使用。

こちらが CSS 。
では、表示。

余白ができましたね。

少し休憩、そして仕上げ


少し休憩しましょう。
詰め込みすぎるとよくないので😌

5分休憩したら、仕上げを見てみましょう。

文字の大きさを調整

ロゴとリストの文字のサイズが一緒なので、区別がつかないですね。
なので、文字サイズを調整します。

文字サイズのコードは font-size を使用します。
実際に書いてみます。

font-size を 36px に指定。
こちらを表示。

ロゴの文字が大きくなりましたね。
これで分かりやすくなりました。

背景に色を加える

最後の仕上げです。
背景に色を加えて、ヘッダーだと分かるようにしましょう。

背景色のコードは background-color を使用します。
そのついでに文字の色とヘッダーの高さを書きこむ。

こちらを表示。↓

見たことのある web ページみたいになりましたね。
これにさらに装飾を加えていくと、ぼくのブログみたいになります。

では、以上です😌