WEBデザインのレイアウトのヘッダー部分を分かりやすく解説するよ

2020.06.21
転職・キャリア

まずはレイアウトの一番上　ヘッダーを作るぞい。

ヘッダー部分には右側にアイコンの部分と、左側にロゴがあるワン。

うむ、ヘッダー部分をコーディングをする時は左右に分解し、フレックスボックスを使って配置させると楽に作れるぞい。

1. フレックスボックスとは?
2. 実際にコーディングをしてみよう!
3. 疑似クラスについて
4. まとめ
5. 合わせて読みたい記事はこちら

フレックスボックスとは?

スマホ対応などをさせる時に便利なレイアウトの事です。

詳しくしりたい方は以下の記事をどうぞ!

【プログラミング】フレックスボックスを使って自由自在なwebサイトを作ろう【WEBデザイン】

実際にコーディングをしてみよう!

まずはヘッダー部分の型を作っていきます。

※　スタイルシートがSCSS形式になっています。環境構築がわからない方はこちらからどうぞ

【プログラミング】webデザインの基礎。無料でweb制作を学んでみよう。

こちらが完成形になります。

<index.html>
<header>
        <div class="container">
            <div class="header__list">
                <div class="header__list-left"></div>
                <div class="header__list-right">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
</header>

<style.scss>
.container {
            padding: 0 100px;
            width: 100%;
}

header {
            height: 200px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
 }

.header__list {
            　　display: flex;
            　　justify-content: space-between;
 }

.header__list-right {
            i {
                position: absolute;
                top: 35%;
                right: 10%;
                display: inline-block;
                background-color: white;
                padding: 30px;
                z-index: 100;
                cursor: pointer;
                transition: 0.5s;
            }
            i:hover {
                transform: scale(1.5, 1.5);
            }
        }

何かの呪文に見えてきた・・・。

速足になってしまったが、ひとつずつ分解しながら説明しようとするかの。

.containerクラスは全てをまとめるボックスみたいなものだ

.container {
            padding: 0 100px;
            width: 100%;
}

今回は赤く囲まれた部分の余白を調整する為にクラスを追加しました。
全体のレイアウトを調整するので見やすいレイアウトになりましたね。

headerを左右に分解してみよう。

<html>
<header>
        <div class="container">
            <div class="header__list">
                <div class="header__list-left"></div>
                <div class="header__list-right">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
</header>

<scss>
.header__list {
            　　display: flex;
            　　justify-content: space-between;
 }

今回ヘッダーを固定しアイコンだけ動かしたいので、ロゴはmain部分に記載しています。その為空のdiv要素を作っています。
アイコンはfont-awasomeのコードをそのままコピってくればOKです。
display: flex;で横並び、justify-content: space-between;で左右が端に来るように調整しました。

アイコンの位置を調整しよう。

最初は全然だったけど、ひとつずつ分解しながら考えていけばわかりやすいね。

ウホホイホイホイホイ!

そうじゃの。難しい事も基礎の積み重ね、延長線上に過ぎないということじゃ。最後にアイコンのレイアウトについても説明するぞい。

ちなみにマルゴリ君はなんていってるんですか?

センセイステキケッコンシテっていってるぞい。

・・・・(なんで片言?

.header__list-right {
            i {
                position: absolute;
                top: 35%;
                right: 10%;
                display: inline-block;
                background-color: white;
                padding: 30px;
                z-index: 100;
                cursor: pointer;
                transition: 0.5s;
            }
            i:hover {
                transform: scale(1.5, 1.5);
            }
        }

position: absolute;で絶対位置からの調整にしています。ここで気を付ける事は

スマートフォン対応にする為％指定のが好ましいです。pxなど絶対値指定は避けましょう。

z-indexは表示順を変えるプロパティです。アイコンが一番上に来てほしいので、100と指定しました。(基準は1)

cursorはマウスカーソルのアイコンを設定するプロパティです。

transition: 0.5s;は変化の時間ですね。0.5秒かけて変化させるっていう意味です。

疑似クラスについて

サイトを見てもらうと、アイコンにマウスを乗せた時に大きくなっておるな。これは疑似クラスというCSSを用いて実装しちょる。疑似クラスは選択した要素の特定の状態のスタイルを指定するものじゃな。今回はhoverを用いておる。

i:hover {
                transform: scale(1.5, 1.5);
            }

あ、最近コードを見ただけで何をするのかわかってきました。これは・・・X方向に1.5倍、Y方向に1.5倍ですね?

その通り。よくわかったの。transformプロパティは2次元、または3次元の変形に関するプロパティなんじゃ。その中でscaleは要素を拡大縮小させるんじゃの。

まとめ

いかがでしたか?　続いてメインコンテンツも作成していきましょう!

合わせて読みたい記事はこちら

Prev→→→【WEBデザイン】未経験向けに徹底解説!デザインの良いサイトの作り方➀

Next→→→【WEBデザイン】未経験向けに徹底解説!デザインの良いサイトの作り方➂

前の記事

【CSS】displayプロパティの種類をわかりやすくまとめたよ。 2020.06.19
次の記事

WEBサイトのメインコンテンツの決め方を分かりやすく解説 2020.06.22