初心者向け!HTMLとCSSでwebページをデザインする方法

初心者向け!HTMLとCSSでwebページをデザインする方法
初心者向け!HTMLとCSSでwebページをデザインする方法

今どきのWebページを作成をしたいと思っているけれど、作成方法が分からないといった方に向けてwebページの作成方法をお伝えします。本ページを読むことでflexboxを使ったwebページのデザインの作成方法を知ることができます。

デザインの作成について

最近よく目にすることが多い、本文とメニューなどのサイドバーが横に並んだ2カラムと呼ばれるデザインの作成方法についてお伝えします。

2カラムデザイン

このようなデザインを作成するには、下記のコードのように

  1. 本文とサイドバーをそれぞれ「Divタグ」で括ります。本文には「class=”body”」,サイドバーには「class=”sidebar”」のクラスを追加します。*1
  2. 括ったタグの上にもう一つDivタグ 「class=”contener”」を追加し全体(本文とサイドバー)を括ります。
  3. サイドバーのclass(sidebar)を指定し、「width:20%;」と記入*2
  4. 本文のクラス(body)を指定し、「width:80%;」と記入することで作成できます。

*1 本文、サイドバー、全体のクラス名を今回はこのように指定していますが、自分がわかりやすい名前を使用できます。
*2 widthの割合は自由に変更できます。他にpxを指定して幅を固定することもできます。
また、背景色はわかりやすくするために使用しています。

<!DOCTYPE html>
<html lang="ja">

<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>タイトル</title>
<style>
    .contaner {
        display: flex;
        width: 100%;
        height: 500px;
    }

    .sidebar {
        width: 20%;
        background-color: green;
    }

    .body {
        width: 80%;
        background-color: aqua;
    }
</style>
</head>

<body>
<div class="contaner">
<div class="sidebar">
 <p>サイドバー</p>
 <ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
 </ul>
</div>
<div class="body">
<h2>本文を表示</h2>
 <p>ここに本文を記入します。
 <br>本文とは・・・
 </p>
</div>
</div>
</body>

</html>

サイドバーの左右を入れ替える方法

サイドバーが今回左側に存在していますが、これを右側に持って行きたい場合はcontenerクラスのCSSに「flex-direction: row-reverse;」を指定することで下記のように右側に持ってくることができます。

<!DOCTYPE html>
<html lang="ja">

<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>タイトル</title>
<style>
    .contaner {
        display: flex;
        width: 100%;
        height: 500px;
        flex-direction: row-reverse;
    }

    .sidebar {
        width: 20%;
        background-color: green;
    }

    .body {
        width: 80%;
        background-color: aqua;
    }
</style>
</head>

<body>
<div class="contaner">
<div class="sidebar">
 <p>サイドバー</p>
 <ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
 </ul>
</div>
<div class="body">
<h2>本文を表示</h2>
 <p>ここに本文を記入します。
 <br>本文とは・・・
 </p>
</div>
</div>
</body>

</html>

2カラムデザイン 他の指定方法

上記「2カラムデザイン」では、サイドバーを「width:20%」,本文を「width:80%」で指定していましたが
他の指定の方法を紹介します。
CSSのsidebarクラスの「width:20%;」を消して「flex:1;」と入力、同様に本文の「width:80%」を消して、「flex:2;」と入力すると比率に応じた幅が自動で割り当てられます。
今回の場合でいうとsidebarが1:本文が2の比率になるように割り当てられます。

<!DOCTYPE html>
<html lang="ja">

<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>タイトル</title>
<style>
    .contaner {
        display: flex;
        width: 100%;
        height: 500px;
        flex-direction: row-reverse;
    }

    .sidebar {
        flex:1;
        background-color: green;
    }

    .body {
        flex:2;
        background-color: aqua;
    }
</style>
</head>

<body>
<div class="contaner">
<div class="sidebar">
 <p>サイドバー</p>
 <ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
 </ul>
</div>
<div class="body">
<h2>本文を表示</h2>
 <p>ここに本文を記入します。
 <br>本文とは・・・
 </p>
</div>
</div>
</body>

</html>

モバイル端末に対応させる方法

PC向けには2カラムデザインは使いやすいと思いますが、スマートフォンで見る場合にサイドバーがない方が
見やすいです。
そこで、スマートフォンからアクセスした場合にサイドバーを表示させないように設定したいと思います。
設定するには、CSSに新たに@media screen and (max-width:768px)を記入、その括弧の中に2つクラスを指定します。

  1. 全体を括っているcontenerクラスを指定し「flex-wrap:wrap;」と記入
  2. sidebarのクラスを指定し「display:none;」と記入し全体の括弧を閉じます。
  3. スマートフォンから見た場合に1カラムのデザインになります。
<!DOCTYPE html>
<html lang="ja">

<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>タイトル</title>
<style>
    .contaner {
        display: flex;
        width: 100%;
        height: 500px;
        flex-direction: row-reverse;
    }

    .sidebar {
        flex:1;
        background-color: green;
    }

    .body {
        flex:2;
        background-color: aqua;
    }
    @media screen and (max-width:768px) {
        .contaner {
            flex-wrap:wrap;
        }
        .sidebar {
            display:none;
        }
    }
</style>
</head>

<body>
<div class="contaner">
<div class="sidebar">
 <p>サイドバー</p>
 <ul>
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
 </ul>
</div>
<div class="body">
<h2>本文を表示</h2>
 <p>ここに本文を記入します。
 <br>本文とは・・・
 </p>
</div>
</div>
</body>

</html>

2カラムデザインがうまくいかないとき

divで全体を囲った中に本文やサイドバーのdivタグのクラスが入っていることを確認してみてください。
また、CSSで指定しているクラスが合っているか、全体を囲ったdivのクラスに「display:flex」が指定してあるかを
もう一度確認してみてください。おそらくどれかの原因でうまくいっていないのだと思われます。

まとめ

HTMLとCSSを使った2カラムのデザインの方法についてお伝えしました。
この方法はどこに何を書いたらデザインできるのかがイメージしにくいのが難点ですが
HTMLとCSSだけで作成できるので良かったら試してみてください。

SHARE