【基礎を固める】HTML + CSS でWebページのレイアウトコーディングの学習

CSS
2021.05.15
目次
  1. はじめに
  2. Webページのデザインレイアウトを学ぶ

はじめに

プログラミングを学ぶ上で最初に取り掛かることのほとんどは、

HTMLだとお思うので、

自分自身も基礎を改めて学ぶために

チャレンジしてみようと思います。

こんな方におすすめ

これからプログラミングを始める方

デザインコーディング初心者

HTML/CSSに苦手意識がある方

プログラミングスクールで教えている方

Webページのデザインレイアウトを学ぶ

結果

最終的にこちらのソースコードになります。

見た目はこちらになります。

Visual Studio Code（テキストエディター）をインストールする

こちらからインストールをしてください。

僕が使っているからVisual Studio Codeをおすすめしておりますが、

「おすすめ テキストエディター」などでググれば色々出てくると思うので、

自分に合ったものを使ってみてください。

※ 以降の内容にはVisual Studio Codeのみの内容も含まれますので気をつけてください。

HTMLを書いていこう

1. 空のワークスペースの作成

workspaceというフォルダを作成する（既にある場合はしなくてOK）

$ mkdir ~/workspace

workspaceフォルダ配下にmy-html-cssフォルダを作成する

$ mkdir ~/workspace/my-html-css

my-html-cssフォルダに移動する

$ cd ~/workspace/my-html-css

2. index.htmlを作成

my-html-cssフォルダ配下にindex.htmlという名前でファイルを作成します

$ touch ~/workspace/my-html-css/index.html

まずHTMLファイルで「!」を入力してEnterすると、

HTMLファイルで必要な記述を自動的に記述してくれるので試してください。

コードとしては以下のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3. 骨組みを作成する

次は、レイアウトの骨組みを作成します。

Webページの構成ってどういうものかイメージして作っていただければと思います。

主にページ全体の枠、ヘッダー、フッター、メインコンテンツ、サイドメニューなどになります。

以下のように記述してみます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper, header, nav, main, aside, footer {
            border: 1px solid #000;
            padding: 16px;
            margin: 8px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo">Header</div>
        </header>

        <nav>Header Nav</nav>

        <div class="flex">
            <main> Main</main>

            <aside>Aside</aside>
        </div>

        <footer>Footer</footer>
    </div>
</body>
</html>

見た目としては以下のようになります。

見やすいように全ての骨組みに黒線とmargin/paddingを設定しています。

4. 各枠組みの配置を整える

枠組みを正しく配置していきます。

そこまで大きくは変わらないですが、もう少しイメージしやすいように設定します。

以下のように記述していきます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper, header, nav, main, aside, footer {
            border: 1px solid #000;
            padding: 16px;
            margin: 8px;
        }
        #wrapper {
            color: #000;
            background-color: #fff;
        }
        header, nav, main, aside, footer {
            font-weight: bold;
            color: #000;
            background-color: #aaa;
        }
        .flex {
            display: flex;
        }
        main {
            width: 70%;
            height: 100%;
        }
        aside {
            width: 30%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo">Header</div>
        </header>

        <nav>Header Nav</nav>

        <div class="flex">
            <main> Main</main>

            <aside>Aside</aside>
        </div>

        <footer>Footer</footer>
    </div>
</body>
</html>

見た目は以下のようになります。

何かそれっぽくなったような気がしますね。

5. 各枠組みに要素を追加する

もっとWebページの構成のようにHTMLのタグを記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper, header, nav, main, aside, footer {
            border: 1px solid #000;
            padding: 16px;
            margin: 8px;
        }
        #wrapper {
            color: #000;
            background-color: #fff;
        }
        header, nav, main, aside, footer {
            font-weight: bold;
            color: #000;
            background-color: #aaa;
        }
        .flex {
            display: flex;
        }
        main {
            width: 70%;
            height: 100%;
        }
        aside {
            width: 30%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo">Header</div>
            <div class="button-container">
                <div class="button">Button1</div>
                <div class="button">Button2</div>
            </div>
        </header>

        <nav>
            Header Nav
            <ul>
                <li>Nav1</li>
                <li>Nav2</li>
                <li>Nav3</li>
                <li>Nav4</li>
                <li>Nav5</li>
            </ul>
        </nav>

        <div class="flex">
            <main>
                Main
                <div class="flex">
                    <img src="https://dummyimage.com/400x332/001eff/ffffff.jpg&text=%E3%83%86%E3%82%B9%E3%83%88%E7%94%BB%E5%83%8F" alt="">
                    <div class="description">
                        <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
                        <p>テストテストテスト</p>
                        <p>テストテストテスト</p>
                    </div>
                </div>
            </main>

            <aside>
                Aside
                <ul>
                    <li>Side1</li>
                    <li>Side2</li>
                    <li>Side3</li>
                    <li>Side4</li>
                    <li>Side5</li>
                </ul>
            </aside>
        </div>

        <footer>Footer</footer>
    </div>
</body>
</html>

見た目は以下のようになりました。

構成としてはそれっぽくなりました。

あと一歩です。

6. それぞれの要素にスタイルを設定する

最後に各要素に対して適切にスタイル設定をします。

以下のようにコードを記述していただければ完成です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper, header, nav, main, aside, footer {
            border: 1px solid #000;
            padding: 16px;
            margin: 8px;
        }
        #wrapper {
            color: #000;
            background-color: #fff;
        }
        header, nav, main, aside, footer {
            font-weight: bold;
            color: #000;
            background-color: #aaa;
        }
        header {
            display: flex;
            justify-content: space-between;
        }
        header .logo {
            font-size: 18px;
            margin-top: 8px;
        }
        header .button-container {
            display: flex;
        }
        header .button-container .button {
            border: 1px solid #000;
            padding: 8px;
        }
        nav ul {
            width: 100%;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            border: 1px solid #000;
            padding: 8px;
            width: 20%;
            margin-left: 4px;
        }
        nav ul li:first-child {
            margin-left: 0;
        }
        .flex {
            display: flex;
        }
        .description {
            width: 40%;
            margin-left: 16px;
        }
        img {
            width: 60%;
            height: 100%;
        }
        main {
            width: 70%;
            height: 100%;
        }
        aside {
            width: 30%;
        }
        aside ul {
            width: 100%;
            display: block;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        aside ul li {
            border: 1px solid #000;
            padding: 8px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="logo">Header</div>
            <div class="button-container">
                <div class="button">Button1</div>
                <div class="button">Button2</div>
            </div>
        </header>

        <nav>
            Header Nav
            <ul>
                <li>Nav1</li>
                <li>Nav2</li>
                <li>Nav3</li>
                <li>Nav4</li>
                <li>Nav5</li>
            </ul>
        </nav>

        <div class="flex">
            <main>
                Main
                <div class="flex">
                    <img src="https://dummyimage.com/400x332/001eff/ffffff.jpg&text=%E3%83%86%E3%82%B9%E3%83%88%E7%94%BB%E5%83%8F" alt="">
                    <div class="description">
                        <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
                        <p>テストテストテスト</p>
                        <p>テストテストテスト</p>
                    </div>
                </div>
            </main>

            <aside>
                Aside
                <ul>
                    <li>Side1</li>
                    <li>Side2</li>
                    <li>Side3</li>
                    <li>Side4</li>
                    <li>Side5</li>
                </ul>
            </aside>
        </div>

        <footer>Footer</footer>
    </div>
</body>
</html>

完成した見た目が以下のようになります。

参考

HTML/CSSで参考になる本を置いておきます。

最後に

HTML/CSSの基礎的なデザインコーディングでしたが、

最近のCSSはかなり便利なオプションがたくさんあるので、

いかに楽にレイアウトのコーディングを記述するかが重要になってくるかなと思います。

もっと良い記述や見やすい記述があれば、コメントで教えていただければと思います。

よろしくお願いいたします。

では、またお会いしましょう。

コメント

タイトルとURLをコピーしました