【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1

Webの仕事に興味を持った方の多くはまず最初にHTML・CSSの基本を覚えると思います。
では基本を覚えた後に最初にやるべきことは何だと思いますか?
それは実際にサイトを作ることです。

こんにちは。フロントエンドエンジニアのくめっち(@kume_KROWL)です。
今回は以前に下記の記事で掲載した内容をより細かく解説したものになります。

というのも実はこのソースコードは僕が入社前に練習で取り組んだWebサイト制作の一部になっていまして、
記事内にもある通りうまくいっている箇所も、そうでないところ・苦戦した痕跡が多く残っています。

今回はこのソースコードを現在の僕が書き換えていき、
HTML・CSSの勉強を始めたばかりの人がより実践に近い技術でコーディングできるようにしていきたいと思います。

完成形

上記のような簡単なランディングページ(LP)を作っていきます。
今回作成するサンプルサイトは、様々なWebサイトで使われている要素が詰め込まれているので、これをマスターすることで基本的なWebサイトの構造を理解できるようになると思います。

コーディングに使用する技術

技術と言っても基本的なものは下記の通り変わりません。

  • HTML
  • CSS

そこに他の記事でご紹介したCSSの命名規則の一つであるBEMという概念(考え方)を取り入れながらコーディングしていきたいと思います。

BEMは最も有名な命名規則のひとつで、多くのエンジニアに支持されています。
以前、別の記事でもご紹介していますが、HTMLによって構成されるパーツやその状態をBlock / Element / Modifierという3つの要素に当てはめて考えることで、非常にわかりやすく柔軟な設計が可能になります。
また、多数の支持を得ているということは、もしプロジェクトのメンバーが増えたり変わったりしたときにも、共通の認識で開発を進められるので、そういった点でもBEMは有利と言えるでしょう。

コーディングの手順

今回のWebサイト作成の手順としては下記のように進めていきます。

  1. デザイン全体をみて要素毎に分ける
  2. 実際にHTMLでマークアップしていく
  3. CSSで細かくスタイルを適用していく

上記の2、3はWebサイトを作る上では当たり前のことですが、「上手にWebサイトを作る」という意味においては下記が最も重要な要素になります。

デザイン全体をみて要素毎に分ける

これを意識することで同じ記述を何度も書く必要がなくなり、より効率的にサイト制作を進めることができたり、修正や更新が必要になった際にも対応しやすくなるのでぜひこの機会に取り組んでみましょう!

Webデザイン全体をみて要素毎に分ける

まず最初に今回作成するサンプルサイトの基本的な構成を見ていきましょう。

  • ヘッダー
  • メインコンテンツ
  • フッター

一番大きな要素で分けると上記のような三要素に分類されます。
これを軸にして早速下記のようにHTMLでマークアップしていきましょう。

index.html

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

    <header class="page-header">
    </header>

    <main class="main-content">
    </main>

    <footer class="page-footer">
    </footer>

  </body>
</html>

上記のようにそれぞれ

  • page-header
  • main-content
  • page-footer

というクラス名をつけてください。

今回はCSSの命名規則としてBEMを使用するので以前、解説したように
「Block__Element–Modifier」
という形でクラスを振っていきます。

上記の3つはBEMでいう「Block」にあたるものです。
複数の単語を繋げるときは「-」で繋げるケバブケースを用いるのが一般的です。
つまり上記の「page-header」の子要素に「nav」が出てきたら
「page-header__nav」
というように記述するということです。

次に「main-content」をもっと細かく見ていきましょう。

今度は

  • メインビジュアル
  • セクション

の2つの要素に分けました。

なぜ下の要素を「セクション」と一括りにしたのかというと
もっと要素が増える可能性があるからです。

このサイトは今回のサンプル用に短く作ってありますが、多くのLPはいくつかのセクションによって構成されることがほとんどです。

上記の例でいうと下図のような構成になることを想定しているということになります。

このようにある程度サイトの要素が増減しても柔軟に対応できるようにマークアップをしていくことが大切です。

では上記を踏まえて「main-content」内に要素を追加していきましょう。

index.html

<main class="main-content">
  <div class="main-visual">
  </div>
  <section class="intro-section">
  </section>
</main>

今回はセクションが複数個になることを想定して「intro-section」というクラス名をつけました。

あとは同じ要領でセクション内の要素を塊ごとにを分けてマークアップしていきます。

index.html

<section class="intro-section">

  <div class="intro-section__header">
  </div>

  <nav class="intro-section__nav">
  </nav>

  <div class="intro-section__content">
  </div>

  <div class="intro-section__contact">
  </div>

</section>

ここでBEMでいうところの「Element」が登場します。
今回追加したもの全ての要素に「intro-sectionの」という枕詞がつきますので
「intro-sectionのnav」
「intro-sectionのcontent」
というように記述していきましょう。

また、「intro-section」内でなくても使う可能性のある要素には別のクラスをつけましょう。
今回、僕は
・セクションの始まり(section-header)
・お問い合わせ(contact-block)
の要素が他のセクション内でも使われることを想定して、Element付きのクラスとは別にそれ単体でもクラスを設定しました。

index.html

<section class="intro-section">

  <div class="intro-section__header section-header">
  </div>

  <nav class="intro-section__nav">
  </nav>

  <div class="intro-section__content">
  </div>

  <div class="intro-section__contact">
    <!-- 上記のintro-section__contactは周りの白い余白を含めた要素 -->
    <div class="contact-block">
    </div>
  </div>

</section>

要素ごとに分けた結果を確認する

ここまでの段階で少しわかり易いように要素を足して実際にどのようになったか見てみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="assets/css/step05.css">
    <title>KROWL MAGAZINE sample</title>
  </head>
  <body>
    <header class="page-header">
      ヘッダー
    </header>
    <main class="main-content">
      メインコンテンツ
      <div class="main-visual">
        メインビジュアル
      </div>
      <section class="intro-section">
        イントロセクション
        <div class="intro-section__header section-header">
          セクションの始まり
        </div>
        <nav class="intro-section__nav">
          ナビゲーション
        </nav>
        <div class="intro-section__content">
          コンテンツ
        </div>
        <div class="intro-section__contact">
          <!-- 上記のintro-section__contactは周りの白い余白を含めた要素 -->
          <div class="contact-block">
            お問い合わせ
          </div>
        </div>
      </section>
    </main>
    <footer class="page-footer">
      フッター
    </footer>
  </body>
</html>

style.css
(それぞれのボックスの位置関係を確認するために仮のスタイルを適用しています)

/* 全体のスタイル */
html,
body {
  font-size: 1.8rem;
  text-align: center;
}

/* 1番大きな要素 */
.page-header,
.page-footer,
.main-content {
  margin: 30px 0;
  border: 5px solid red;
}

/* main-content内の要素 */
.main-visual,
.intro-section {
  margin: 30px;
  border: 5px solid green;
}

/*  intro-section内の要素 */
.intro-section__header,
.intro-section__nav,
.intro-section__content,
.intro-section__contact {
  margin: 30px;
  border: 5px solid blue;
}

このようにそれぞれの要素を階層ごとに分けることができました。

次回は要素内をさらに細かくマークアップしていきたいと思います!

「コーディングだけではなくデザインの勉強もしたい!」という方はこちらの記事もおすすめ!

HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中!
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう!

関連記事