このブログを始める前にProgateの「シンプルなWebサイトを作ろう PHPコース」を受講してましたが、HTML/CSSでのレイアウトイメージがいまいちつかめてませんでした。Progateは実際にソースを書いて表示のイメージを確認しながら進んで行くんですけど、ソースを記述する箇所にはコメントが書かれてたりするので、なんとなくで進めるんですよね。なんとなくで進んでいけるのがProgateの魅力だとは思いますが、それで理解した、作れるっていう気持ちになるので気をつけないといけないです。

今回はHTML/CSSを使用してのレイアウトのイメージをつかむために実際に自分でHTML/CSSを作成してみました。

作成したCSS(style.css)

作成するレイアウトイメージ

作成したHTML(index.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>テスト</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <header>
            ヘッダー
            <h1 id="h11">見出し1</h1>
        </header>
        <main class="clearfix">
            メイン
            <div id="divEmpty"></div>
            <div id="div0">
                div0 float left
                <h2 id="h21">見出し2</h2>
                <div id="div1">
                    div1
                    <h3 id="h31">見出し3</h3>
                    <p id="p1">p1</p>
                    <p id="p2">p2</p>
                    <p id="p3">p3</p>
                </div>
                <div id="div2">
                    div2
                    <p id="P4">P4</p>
                    <a id="a1" href="">a1</a>
                    <a id="a2" href="">a2</a>
                    <a id="a3" href="">a3</a>
                    <a id="a4" href="">a4 display block</a>
                    <a id="a5" href="">a5 display block</a>
                    <a id="a6" href="">a6</a>
                    <p id="P5">P5</p>
                    <div id="div3">
                        div3
                        <p id="P6">P6</p>
                        <p id="P7">P7</p>
                    </div>
                    <div id="div4">
                        div4 float left
                        <p id="P8">P8</p>
                        <p id="P9">P9</p>
                    </div>
                    <div id="div5">
                        div5 float left
                        <p id="p10">p10</p>
                        <p id="P11">P11</p>
                    </div>
                    <div id="div6">
                        div6 float left
                        <p id="p10">p12</p>
                        <p id="P11">P13</p>
                    </div>
                    <p id="p14">P14 clear left</p>
                </div>
            </div>
            <div id="div7">
                div7 float right
                <div id="div8">
                    <h4 id="h41">見出し4-1</h4>
                    <p id="P15">p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 p15 </p>
                    <p id="P16">p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 p16 </p>        
                </div>
                <div id="div9">
                    <h4 id="h42">見出し4-2</h4>
                    <a id="a7">a7 display block</a>
                    <a id="a8">a8 display block</a>
                    <a id="a9">a9 display block</a>
                </div>
                <div id="div10">
                    <h4 id="h43">見出し4-3</h4>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                    <p>p</p>
                </div>
            </div>
        </main>
        <footer>
            フッター
            <h5>見出し5</h5>
            <div>
                div フッター
                <p>p フッター</p>
            </div>
        </footer>
     </body>
</html>

100

101

102

103

104

105

<!DOCTYPE html>

<html>

<head>

</head>

<body>

ヘッダー

</header>

メイン

div0 float left

div1

</div>

div2

<a id="a4" href="">a4 display block</a>

<a id="a5" href="">a5 display block</a>

div3

</div>

div4 float left

</div>

div5 float left

</div>

div6 float left

</div>

<p id="p14">P14 clear left</p>

</div>

div7 float right

</div>

<a id="a7">a7 display block</a>

<a id="a8">a8 display block</a>

<a id="a9">a9 display block</a>

</div>

</div>

</main>

フッター

<div>

div フッター

</div>

</footer>

</body>

</html>

作成したCSS(style.css)

* {
    border: solid;
    border-width: 1px;
    margin: 10px;
    padding: 5px;
}

html {
    border: none;
    padding: 0px;
}

head {
    border: none;
    padding: 0px;
}

body {
    border: none;
    padding: 0px;
}

#p1 {
    width: 100px;
}

#p2 {
    width: 200px;
}

#p3 {
    width: 300px;
}

#divEmpty {
    border: none;
}

#div0 {
    width: 70%;
    float: left;
}

#div3 {
    width: 50px;
}

#div4 {
    width: 100px;
    float: left;
}

#div5 {
    width: 150px;
    float: left;
}

#div6 {
    width: 200px;
    float: left;
}

#div7 {
    width: 25%;
    float: right;
}

#p14 {
    clear: left;
}

#a4 {
    display: block;
}

#a5 {
    display: block;
}

#a7 {
    display: block;
}

#a8 {
    display: block;ß
}

#a9 {
    display: block;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

* {

border: solid;

border-width: 1px;

margin: 10px;

padding: 5px;

}

html {

border: none;

padding: 0px;

}

head {

border: none;

padding: 0px;

}

body {

border: none;

padding: 0px;

}

#p1 {

width: 100px;

}

#p2 {

width: 200px;

}

#p3 {

width: 300px;

}

#divEmpty {

border: none;

}

#div0 {

width: 70%;

float: left;

}

#div3 {

width: 50px;

}

#div4 {

width: 100px;

float: left;

}

#div5 {

width: 150px;

float: left;

}

#div6 {

width: 200px;

float: left;

}

#div7 {

width: 25%;

float: right;

}

#p14 {

clear: left;

}

#a4 {

display: block;

}

#a5 {

display: block;

}

#a7 {

display: block;

}

#a8 {

display: block;ß

}

#a9 {

display: block;

}

.clearfix:after {

content: "";

display: block;

clear: both;

}

実行(表示)結果

メインをサイドバーも包含してしまってますが、ほぼほぼイメージ通りにできたと思います。

全ての要素のスタイルに枠線をつけたので、ブロック要素とインライン要素の違いやタグをネスト(入れ子)した時の配置もイメージしやすかったです。ここに背景色(background-color)もつけたらもっとイメージしやすいんでしょうけど、面倒だったんでそこまではやりませんでした。

苦戦したところ

やっぱりfloatですね。floatは文字通り要素が浮いた状態になるので、ネストしても親要素の中に入ってくれないんですよ。

こんな感じで。

mainタグ内の「float: left;」しているdiv要素(div0)が浮いた状態になっているので、footerタグの内容がdiv0の下に入りこんでしまってます。

これを解決してくれたのが、「clearfix」です。

clearfixをざっくりいうとclassにclearfixを指定した要素の後に擬似的に要素を追加し、その要素に対してfloatをclearしてあげることによって、それ以降の要素ではfloatが解除された状態となるイメージになります。

個人的にclearfixに関しては以下のサイトがわかりやすかったです。
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

まとめ

TwitterとかYoutubeとかで色んなエンジニアの方がProgateとかでインプットしたら、必ず自分の手でアウトプットすること。これが本当に大事だと思います。その時に構文が分からなくても「こんなことができたはず」「こんなことがしたい」ってところからググって解決できれば全然問題ありません。

そりゃ何から何まで記憶しててパチパチできるほうが良いでしょうけど、それより自分でググって解決できる能力のほうが大事です。ググることは恥ずかしいことでもなんでもないですよ。

どんどんググっていきましょう！！

HTML CSS

HTMLとCSSでイメージしたレイアウトを作成してみる

作成するレイアウトイメージ

作成したHTML(index.html)

作成したCSS(style.css)

実行(表示)結果

苦戦したところ

まとめ

CSSで背景を画面幅いっぱいに表示させる方法

CSSで背景画像の比率を保ったままブラウザのサイズに合わせる方法

CSSで要素をセンタリング(中央揃え)する方法

【VSCode】live serverが表示されない時の対処方法

wrapper？container？HTMLの構成を考える

VSCode拡張機能Live Server設定内容まとめ

【PHP】ログイン処理を作成する方法。サンプルコード有

人生の無駄をなくす最強アイテム10選【マコなり社長の場合】