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

WebサイトをコーディングするためにHTML・CSSの書き方を覚えただけではプロとは言えません。
何も考えずに行き当たりばったりでコーディングをしていくと一見、上手く作成できているように見えても修正が発生した際などのイレギュラーな事態が起きた時に対応がしづらいコードになっていたりすることが多いです。

前回の【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1という記事ではコーディング作業に入る前にデザイン全体をみて要素毎に分けることが重要だと解説しました。
今回も引き続き、【初心者向け】HTML+CSS練習用のサンプルコードという記事で掲載したサンプルページについて解説していきたいと思います。

前回までのまとめ

まずはおさらいとして完成物の確認をしましょう。

上記のような簡易LPを作成するために下記の手順を踏んで進めていきます。

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

前回はその中の
デザイン全体をみて要素毎に分ける
を解説しました。

それぞれのボックスの位置関係を確認するために仮のスタイルをあてたものがこちらです。

各要素の大枠をまとめたところで終わりましたので、
今回は各要素内を細かくマークアップしていきたいと思います!

大きな要素の作成

では早速一つずつ始めていきましょう。

と、その前に!
今回はCSSを用いてのスタイルの適用も同時に進めていきますのでリセットCSSも忘れずに適用しておきましょう。
リセットCSSってなに?という人は【初心者必見!】リセットCSSとは?コピペで使えるオススメ5選!という記事を読んでみてください。
今回は「HTML5 Doctor Reset CSS」を自分用にアレンジしたものを使用していきます。
上記の記事内にも掲載しているので是非使ってみてください!

リセットCSSを適用したらまず一番上のヘッダーから作成していきましょう。

ヘッダーは

  • ロゴ
  • お問い合わせ情報

の2つの大きな塊にわけることができます。
さらに、「お問い合わせ情報」は

  • 文章
  • ボタン

の2つの要素の組み合わせでできています。

まとめると、こんな感じの構造になっています。

/*
ヘッダー
∟ロゴ
∟お問い合わせ情報
    ∟お問い合わせ情報の文章
    ∟お問い合わせ情報のボタン
*/

今回、内容や配置から上記の図のような親子関係で進めていきます。

index.html

<header class="page-header">
  <h1 class="page-header__logo">
    <img src="assets/img/main-logo.png" alt="sample">
  </h1>
  <div class="page-header__info page-header-info">
    <div class="page-header-info__txt">
      <span>TEL 00-0000-0000</span>
      <span>受付時間 平日 9:00〜17:00</span>
    </div>
    <a class="page-header-info__btn" href="#contact">お問い合わせ</a>
  </div>
</header>

マークアップができたら、ブラウザで見てみましょう!
といきたいところですが、今のままだとスタイルが何もないのでよくわかりません。
先ほど設定したクラスにスタイルを設定しましょう。

style.css

/* 横並び */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 横並び */
.page-header__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 縦並び */
.page-header-info__txt span {
  display: block;
}

並びを揃えただけでも随分とそれっぽくなりました。
しかし、全体をもう一度見てみましょう。

よく見るとヘッダーは特定の幅でデザインされています。
このままではこの幅を無視することになってしまうので幅を指定する必要があります。
しかも他の要素でも同じ大きさのものが複数存在しています。

このような場合は「page-header」に直接幅を指定するより、
新しくその幅を持ったクラスを作成した方がスタイルを使いまわせるので楽です。

というわけでさっきマークアップした「page-header」にもう一つ大きな要素を足しましょう。
今回は

  • ヘッダーのインナー
  • ページのインナー(他の要素でも使い回す用)

ということで
「page-header__inr」、「inr」の2つのクラスを足します。

index.html

<header class="page-header">
  <div class="page-header__inr inr">
    <h1 class="page-header__logo">
      <img src="assets/img/main-logo.png" alt="sample">
    </h1>
    <div class="page-header__info page-header-info">
      <div class="page-header-info__txt">
        <span>TEL 00-0000-0000</span>
        <span>受付時間 平日 9:00〜17:00</span>
      </div>
      <a class="page-header-info__btn" href="#contact">お問い合わせ</a>
    </div>
  </div>
</header>

「page-header__inr」には横並びを、
「inr」には他でも使いまわせるように幅と真ん中寄せのみをスタイリングしましょう。

style.css

/*----------------------------------------
| page
----------------------------------------*/
.inr {
  width: 960px;
  margin: 0 auto;
}

/*----------------------------------------
| page-header
----------------------------------------*/

/* 横並びのスタイルをinrクラスに付け替える */
.page-header__inr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 横並び */
.page-header__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 縦並び */
.page-header-info__txt span {
  display: block;
}

これでヘッダーのマークアップと最低限のスタイリングは完了しました。
以上がコーディングの基本的な流れです。

  1. デザインをみて要素毎に分ける
  2. 要素の親子関係を見極める
  3. HTMLでマークアップする
  4. CSSでスタイルを適用する

この流れを意識しながら、フッターとメインビジュアルもコーディングしてしまいましょう。

index.html

<footer class="page-footer">
  <div class="inr">
    <p><small>© samplesamplesamplesamplesample</small></p>
  </div>
</footer>

style.css

.page-footer {
  padding: 40px 0;
  background-color: gray;
}

.page-footer small {
  font-size: 1.2rem;
}

メインビジュアル
index.html

<div class="main-visual">
  <h2 class="main-visual__ttl">キャッチコピー</h2>
</div>

style.css

.main-visual {
  position: relative;
  height: 480px;
  background: center center no-repeat;
  background-image: url("../img/img_mv_bg.jpg");
  background-size: cover;
}

.main-visual__ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  font-weight: normal;
  font-size: 70px;
  font-family: "YuGothic", "游ゴシック";
  transform: translate(-50%, -50%);
}

簡単なスタイルしか適用していませんがひとまず大きな要素はこれまでとします。

次はメインセクションです。

メインセクションの作成

今度は要素がより細かくなってきます。
最初に前回の記事で分けたこちらの図をもう一度見ていきましょう。

最初に「セクションの始まり」を見てみましょう。
これは前回

  • intro-section__header
  • section-header

の二つのクラスを適用しました。

マークアップとしては難しいことはありません。フキダシの中に文字の要素を置くだけです。
この要素にはセクションの題名が入ると仮定して「h3」のタグでマークアップしましょう。

index.html

<section class="intro-section">
  <div class="intro-section__header section-header">
    <h3 class="section-header__ttl">section01の見出し</h3>
  </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>

スタイリングが難しそうなフキダシの三角形はひとまず見ないフリをして簡単なスタイルのみ適用していきましょう。
ここで注意したいのが、CSSを適用するクラスです。

  • intro-section__header
  • section-header

どちらも同じ要素を指しているようですが、
上は「イントロセクションの中での始まり」
下は「フキダシ状の帯そのもの」
を指しています。

フキダシ状の帯自体のスタイリングは「section-header」に、
セクション内での固有のスタイルは「intro-section__header」に適用していくべきです。

style.css

/* 帯そのもののスタイル */
.section-header {
  position: relative;
  padding: 30px 0;
  text-align: center;
  background: gray;
}

.section-header__ttl {
  color: #fff;
  font-weight: normal;
  font-size: 30px;
}

/* intro-section内でのスタイル */
.intro-section__header {
  margin-bottom: 100px;
}

上記のように帯にmargin-bottomなどをつける場合はその要素のスタイルというより、そのセクションでの固有のスタイルというように適用するのがベストです。
(※今回のデザインではmargin-bottomは必要ありませんが例として記述しました。
クラスの関係が理解できたら削除していただいて構いません。)

残りの要素も同じようにCSSに記述してスタイルを適用していきます。
まだCSSのスタイリングについてよく理解できていないという方は下記のソースコードを模写しながら少しずつ覚えていきましょう。

ナビゲーション
index.html

<nav class="intro-section__nav">
  <div class="inr">
    <ol>
      <li>
        <a href="#content1">1.テキストテキストテキスト</a>
      </li>
      <li>
        <a href="#content2">2.テキストテキストテキスト</a>
      </li>
      <li>
        <a href="#content3">3.テキストテキストテキスト</a>
      </li>
    </ol>
  </div>
</nav>

style.css

.intro-section__nav {
  padding: 88px 0 80px;
}

.intro-section__nav ol {
  display: flex;
  justify-content: space-between;
}

.intro-section__nav ol li {
  position: relative;
}

.intro-section__nav ol li a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 230px;
  height: 230px;
  padding: 0 25px;
  color: #000;
  font-size: 25px;
  border: 2px solid #000;
  border-radius: 50%;
}

メインコンテンツ
index.html

<div class="intro-section__content">
  <div class="intro-section__block" id="content1">
    <div class="intro-section__img-area"></div>
    <div class="intro-section__txt-area">
      <h4>1.テキストテキストテキストテキストテキスト</h4>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="intro-section__block" id="content2">
    <div class="intro-section__img-area"></div>
    <div class="intro-section__txt-area">
      <h4>2.テキストテキストテキストテキストテキスト</h4>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="intro-section__block" id="content3">
    <div class="intro-section__img-area"></div>
    <div class="intro-section__txt-area">
      <h4>3.テキストテキストテキストテキストテキスト</h4>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

style.css

.intro-section__block {
  display: flex;
  height: 400px;
}

.intro-section__block > * {
  width: 50%;
}

/* 偶数番目の場合、横並びを反転 */
.intro-section__block:nth-child(even) {
  flex-direction: row-reverse;
}

/* 各画像を設定 */
.intro-section__block:nth-child(1) .intro-section__img-area {
  background-image: url("../img/img_content-1.jpg");
}

.intro-section__block:nth-child(2) .intro-section__img-area {
  background-image: url("../img/img_content-2.jpg");
}

.intro-section__block:nth-child(3) .intro-section__img-area {
  background-image: url("../img/img_content-3.jpg");
}

/* 画像エリア */
.intro-section__img-area {
  background: center center no-repeat;
  background-size: cover;
}

/* 文章エリア */
.intro-section__txt-area {
  box-sizing: border-box;
  color: #fff;
  background-color: gray;
}

/* タイトル */
.intro-section__txt-area h4 {
  font-size: 1.8rem;
}

/* 文章 */
.intro-section__txt-area p {
  font-size: 1.6rem;
}

お問い合わせ
index.html

<div class="intro-section__contact">
  <div class="inr">
    <div class="contact-block">
      <p class="contact-block__txt">TEL 00-0000-0000<span>(受付時間 平日9:00〜17:00)</span></p>
      <a class="contact-block__btn" href="">問い合わせボタン</a>
    </div>
  </div>
</div>

style.css

.intro-section__contact {
  padding: 100px 0;
}

.contact-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 55px;
  background: gray;
}

.contact-block__txt {
  font-size: 2rem;
}

.contact-block__txt span {
  display: block;
  font-size: 1.6rem;
}

.contact-block__btn {
  width: 370px;
  padding: 20px 0;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  background: red;
}

最後は駆け足になってしまいましたが、ひとまず全ての要素を大まかに作成することができました。

次回の記事では残りのCSSのスタイリングを含めサイトの完成まで進めていきたいと思います。

【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1
https://magazine.krowl.jp/4026/

【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その3
https://magazine.krowl.jp/4054/

関連記事