基礎からのHTML・CSS入門【実践編】

前回書いた知識を組み合わせて今回は実際にページを作っていきます。

サイトを4つのブロックに分割する

Webページの多くは、

  • ヘッダー
  • コンテンツ
  • サイドバー
  • フッター

の4つのブロックから作られています。このサイトもそうです。それぞれの役割を説明します。

ヘッダー

サイトの一番上にあるあれです。このサイトでは青い部分です。ここには主にサイトタイトル、ロゴ、グローバルメニューが配置されます。

スクロールに合わせて画面に張り付くものや半透明のものなど、いろいろなバリエーションがあります。デザイン的には色を変えて目立たせたり、影をつけるとそれらしくなります。

タグはheaderを使うことが多いです。また、トップページではサイトタイトルにh1を使いその他のページではそれ以外のタグを使うことが望ましいです。サイトタイトルはトップページへのリンクになっている場合が多いので、aタグを使うのがいいでしょう。

コンテンツ

サイトのデザインがどうのこうのよりも大事なのはサイトのコンテンツです。読みやすいデザインになるように心がけましょう。

左右の余白がないと読みにくくなりますし、逆に余白をとりすぎてもだめです。デザインと見た目のバランスを考えて作りましょう。

サイドバー

WordPressではウィジェットを設置できます。サイトの情報などを軽く表示するといいでしょう。記事を読むときに自然と目に入りますがそれほど読まれません。広告等を置く場合もあります。

スマホではこれがあると邪魔なので、コンテンツの下に置く場合が多いです。メディアクエリというものを使って画面サイズによって表示を変えます。

フッター

あまり意識して読むことはないかもしれません。著作権の表示とか無断転載禁止とか書いてあったりします。メニューが置いてあることもあります。

上の見本のサンプルコード

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="header">
        <header>
            <h1>ヘッダーです。</h1>
        </header>
    </div>
    <div class="container">
        <main class="main">
            <h2>ここに本文等メインのコンテンツが来ます。</h2>
            <p>ある日の暮方の事である。一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。</p>
            <p>広い門の下には、この男のほかに誰もいない。ただ、所々丹塗にぬりの剥はげた、大きな円柱まるばしらに、蟋蟀きりぎりすが一匹とまっている。</p>
            <p>羅生門が、朱雀大路すざくおおじにある以上は、この男のほかにも、雨やみをする市女笠いちめがさや揉烏帽子もみえぼしが、もう二三人はありそうなものである。それが、この男のほかには誰もいない。</p>
        </main>
        <div class="sidebar">
            <h3>サイドバーです。</h3>
            <p>検索欄だったり記事一覧だったりが置かれることが多いです。</p>
        </div>
    </div>
    <div class="footer">
        <footer>
            <h3>フッターです。</h3>
            <small>著作権表記とかよくされてます。© 2020 naoki1510 みたいなね</small>
        </footer>
    </div>
</body>

</html>
body {
    margin: 0; /* 上下左右の余白をなくす */
    background-color: whitesmoke; /* 背景色を灰色に */
}

* {
    /* このセレクタは、すべての要素に対して適用されます。 */
    box-sizing: border-box; /* border,paddingもwidthに含める */
}

.header {
    width: 100%; /* 幅を全体に広げる */
    background-color: cornflowerblue; /*ヘッダーの背景色 */
    margin: 0; /* 外側の余白を消す */
    padding: 1rem; /* 内側に1rem分余白をつくる */
    overflow: hidden; /* はみ出した要素を非表示に */
}

.header h1 {
    /* .header の中の h1 要素を指定。空白を開けることで階層構造を表す。*/
    color: white; /* 文字色を白に */
}

/* 複数指定するときはカンマで区切る */
.header header,
.container,
.footer footer {
    width: 100%; /* 基本的には幅は全体 */
    max-width: 1280px; /* 最大の幅を1280pxに */
    margin: 0 auto; /* 縦方向のmarginは0、横方向のmarginはautoに設定。横方向をAutoにすると、自動的に真ん中に配置される。 */
}

.container {
    display: flex;
    /* displayではブロック要素をインライン要素として表示したりできます。 */
    /* flexに指定すると、「フレックスボックス」というものを作ることができます。 */
    /* フレックスボックスは、縦や横に要素を並べる場合に便利です。 */
}

.container .main,
.container .sidebar {
    /* .container の中の.mainと.sidebarを指定 */
    background-color: white; /* 背景を白く */
    margin: 2rem 1rem; /* 外側の余白を上下2rem、左右1remに */
    padding: 1rem; /* 内側の余白を1remに */
}

.container .main {
    /* .container の中の .main を指定 */
    width: 70%; /* 幅を.container の70%に */
}

.container .sidebar {
    /* .container の中の .sidebar を指定 */
    width: 30%; /* 幅を.container の30%に */
}

.footer{
    background-color: gray; /* 背景を灰色に */
    color: white; /* 文字色を白に */
    padding: 2rem; /* 内側の余白を2remに */
}

これでもかってくらいコメント書いたので、それを読んでほしいです。わからないプロパティに関しては「css (わからないプロパティ名)」で検索するだけで出てきますので調べてみてください。

これだけでちょっとサイトっぽくなります。コンテンツが全く足りませんが、デザインの基礎はこんな感じです。

見出しをデザインしてみる

見出しはいろんなサイトをみてみて、うわ!これかっこいい!って思ったらChromeのデベロッパーツールで見てみましょう。知らないプロパティが使われていたらその都度検索してみてください。どんどんデザインの幅が広がります。

基本は色・余白・枠線

この三つだけでも恐ろしいほどのバラエティがあります。下線引くだけでも立派なデザインです。以下にいくつか例を置いておきます。グラデーションもできます。

See the Pen Index by naoki1510 (@naoki_1510) on CodePen.

左上のHTMLとかCSSのボタンからソースコードが見れます。

さらに上を目指したいなら疑似要素を使おう

普通の要素は基本四角いです。が、疑似要素を使うことでその他の図形を作り出すことができます。

See the Pen Index2 by naoki1510 (@naoki_1510) on CodePen.

この例では、.index::afterとなっているのが疑似要素です。contentの中には本来、表示される文字が入りますが、今回の場合三角形だけを使いたいので、文字は入れません。position:absoluteにすることで、場所を自由に移動させることができます。

疑似要素に関してはこれ専用の記事を出そうと思うので、なんとなく「こんなのがあるんだ~」程度に思っていただけるといいかなと思います。

カードを作ってみる

記事一覧とかにあるようなカードを作ってみましょう。

大事なのは「余白」

うまく余白を使いこなしてください。1pxずれるだけで印象が違うものもあります。デベロッパーツールを使っていろいろ試してみることをお勧めします。

ちなみになんですけどデベロッパーツールでは、数字を編集できる状態にした後その上にマウスを置いて、マウスホイールをころころすると数値を大きくしたり小さくしたりすることができます。

この数字の上にマウスを置いてころころしてみてください。CTRLを押しながらやると100ずつ、Shiftを押しながらやると10ずつ、Altを押しながらやると0.1ずつ動かせます。

試しに作ってみる

アイキャッチ画像を使うことが多いので今回は好きな画像を一枚用意してください。例ではこの画像をつかって進めていきます。

商品レビュー用に撮ったやつなんですけどね。

See the Pen Card by naoki1510 (@naoki_1510) on CodePen.

こんな感じでカードが完成しました。これもCSSのコメントにいろいろ書いてあります。何度も言いますがわからないプロパティはググれ。

こんなシンプルでも影つけて余白入れたらそこそこかっこよく見えますよね。パーツだけかっこよく作るのは簡単なんですけどね。全体を統一させてかっこよくさせるのって想像以上に難しいです。

リンクをカスタマイズする

知識編でaタグでリンクを作れるという話をしました。aタグはもともとブラウザで色は青で下線がつくといったようにデザインが指定されています。今回はこれを上書きします。

See the Pen link by naoki1510 (@naoki_1510) on CodePen.

こんな感じで色を変更できます。bodyで色を変更しても適用されないので注意してください。

これで終わりです。

これだけで簡単なサイトデザインを作ることができます。お疲れさまでした。

ここで紹介したものの他にも、ものすごいたくさんのCSSのプロパティがあるので実際にサイトを見て、このデザインどうやってるんだろう?ってデベロッパーツールを見ることでさらにスキルアップすることができます。HTMLのいいところは誰でもソースコードが見られることです。どんどんほかのサイトからデザインをパクってみてください。一行ずつコピーしていって、それがどんな役割なのかしらべてみるのも面白いと思います。

デザインをするだけであればWebサーバーなどを用意する必要なく、すぐに始められます。また、ブラウザはどのパソコンにも入っていると思うので、用意しなければならないのはテキストエディタだけです。始めやすいのもHTMLの利点です。ただHTMLはあまりプログラミング的要素がなく、またHTML自体はプログラミング言語ではなくマークアップ言語だともいわれているので、ほかのプログラミングとは種類が違うものであるのも事実です。

HTMLになれてきたら、PHPやJavaScriptを勉強してみると、本当のプログラミングの楽しさを味わうことができると思います。この二つの言語はHTMLと縁が深いので、同時に学ぶのにお勧めです。