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

Webサイト制作を業務で行う場合、Webデザイナーが作成したデザインカンプを元にコーディングをしていく機会があります。
WebデザイナーのみなさんはWebサイトのデザインをする際、大きさや色、余白など本当に細部までこだわってデザインをしています。
その一つ一つに明確な意味があり、HTML・CSSを使ってそのデザインを形にする作業ではその意図をできる限り尊重すべきです。

この記事では全3回にわたり【初心者向け】HTML+CSS練習用のサンプルコードという記事で掲載したWebサイトのサンプルを細かく解説しながら進めています。
今回でいよいよ最後となりますのでここまでの内容をおさらいして、Webサイトの完成まで進めていきましょう!

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

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

前回までのまとめ

今回でいよいよラストとなります。
おさらいとして完成物の確認をしましょう!

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

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

前回、前々回と進めていく中で、要素の分け方やクラス名の考え方などを解説し、
大まかなスタイルまでつけていきました。

各要素の細かいスタイル

今回はいよいよ細かいスタイルの調整に入っていきます。

ヘッダーのスタイル

では早速デザインカンプを元にheaderのCSSを適用していきましょう。

デザインカンプ

すでに配置は整えたので余白の調整からいきましょう。
デザイン上、headerの高さは85pxなのでheight: 85px;と記述して….

といきたいところですが、ここはpaddingを設定しましょう。
ここに限らず基本的にはheightやwidthの指定などで固定値を持たすことはせずに高さを設定した方がいいです。
なぜなら実際の業務では完成した後にデザインの変更などで大きさが変わることはとてもよくあることだからです。

例えばこのheaderの中に要素が増えたとしましょう。
もしかしたらその要素が右側のお問い合わせボタンの下に配置するかもしれません。
heightで指定していた場合、その都度直さなければなりませんが、paddingで余白のみを設定していた場合はその要素を追加したとしてもなんら問題ないですよね。
このようにCSSのスタイリングにおいても修正・更新のことを考えながら進めていく意識をしていきましょう。

今回であれば赤いお問い合わせボタンの上下の高さを計ってpaddingを設定しましょう。

style.css

.page-header {
  padding: 17px 0;
}

どんどんいきましょう。
次は文章とボタンの隙間です。
分かりやすいようにボタンの背景色もついでにつけましょう。

style.css

.page-header-info__txt {
  margin-right: 30px;
}

.page-header_info__btn {
  background-color: #ff0600;
  color: #fff;
}

そして文章とお問い合わせボタンのスタイルです。

ボタンの中に文字が入っている場合は2行以上になることも考慮して「line-height」の値も計算に入れると後々の修正が楽になります。
幅はwidthではなく、min-widthで指定しておくと文章が収まらないなどの自体も防ぐことができます。

style.css

.page-header-info__txt {
  margin-right: 30px;
}

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

.page-header-info__btn {
  min-width: 155px;

  /* (height - (fontSize * lineHeight)) / 2 */
  padding: calc((50px - (1.6rem * 1.5)) / 2) 0;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background-color: #ff0600;
}

メインビジュアルは前回の記事の時点でスタイリングが完了しているので割愛します。

セクションの始まり(帯)のスタイル

新たにCSSに記述するのは下記になります。

  • 正しい背景色
  • padding
  • 三角形

こちらを見てください。
よく見ると背景色や大きさがデザインと少し異なっています。

デザイン

現在

というのも僕はここまで背景色を仮として

background-color: gray;

と指定していました。

デザイン上の色というのはデザイナーさんが視認性やUXを考えた上でデザインカンプに表現しています。
#aaaと#808080(gray)は全く違う色なのです。
実務未経験の方はこのような場面での詰めが甘いことが多いように見受けられます。
実際に僕もCSSで難しい図形を表現するなどの技術にばかり目がいってしまい、このような気をつけていれば防げるミスを何度もしていました…

業務としてサイト制作を行う際は、このような細部にまでしっかりと気が付けるように意識して進めていきましょう!

style.css

.section-header {
  position: relative;
  padding: calc((87px - (30px * 1.6)) / 2) 0;
  text-align: center;
  background: #aaa;
}

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

そして帯の下部についている三角形です。
今回は擬似要素を使用して作成しますが、難しい図形などは無理にCSSで作ろうとせずに画像で切り出したりするのも一つの手段です。
1時間かかってCSSで作るより5分で画像を切り出す方がよっぽど利口です。

また今回のような三角形の場合、CSS三角形作成ツールというサービスもあったりしますので様々な角度から積極的に楽をしていきましょう。

style.css

.section-header:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-color: #aaa transparent transparent transparent;
  border-style: solid;
  border-width: 28px 28px 0;
  transform: translate(-50%, 100%);
  content: "";
}

ナビゲーションのスタイル

ナビゲーションは下向きの矢印のような記号に目が行きがちですが、よく見ると全体の幅がデザインと若干異なっています。
矢印は四角形を回転させて配置するなど色々試してみましょう。

style.css

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

.intro-section__nav ol {
  display: flex;
  justify-content: space-between;
  width: 810px;
  margin: 0 auto;
}

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

/* ナビゲーション内の矢印 */
.intro-section__nav ol li:after {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: translateX(-50%) rotate(45deg);
  content: "";
}

.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;
  line-height: 1.2;
  border: 2px solid #000;
  border-radius: 50%;
}

メインコンテンツのスタイル

ここも

  • 文字のサイズ
  • 背景色
  • padding

に気をつけてCSSを記述していきましょう。

style.css

/* 文章エリア */
.intro-section__txt-area {
  box-sizing: border-box;
  padding: 30px 20px;
  color: #fff;
  background-color: #aaa;
}

/* タイトル */
.intro-section__txt-area h4 {
  margin-bottom: 24px;
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.5;
}

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

お問い合わせのスタイル

style.css

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

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

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

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

.contact-block__btn {
  width: 370px;
  padding: calc((83px - (2.2rem * 1.6)) / 2) 0;
  color: #fff;
  font-size: 2.2rem;
  text-align: center;
  background: red;
}

フッターのスタイル

style.css

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

.page-footer small {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
}

 

サイトの完成

あとはそれぞれにコメントを入れるなどして整えたら完成。
完成版のHTMLとCSSはこちらです。

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/reset.css">
    <link rel="stylesheet" href="assets/css/step18.css">
    <title>KROWL MAGAZINE sample</title>
  </head>
  <body>
    <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>
    <main class="main-content">
      <div class="main-visual">
        <h2 class="main-visual__ttl">キャッチコピー</h2>
      </div>
      <section class="intro-section">
        <div class="intro-section__header section-header">
          <h3 class="section-header__ttl">section01の見出し</h3>
        </div>
        <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>
        <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>
        <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>
      </section>
    </main>
    <footer class="page-footer">
      <div class="inr">
        <p><small>© samplesamplesamplesamplesample</small></p>
      </div>
    </footer>
  </body>
</html>

style.css

@charset "UTF-8";

html,
body {
  min-width: 960px;
}

.page {
  position: relative;
}

.inr {
  width: 960px;
  margin: 0 auto;
}

/*----------------------------------------
| page-header
----------------------------------------*/
.page-header {
  padding: 17px 0;
}

.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 {
  margin-right: 30px;
}

.page-header-info__txt span {
  display: block;
  font-size: 1.4rem;
}

.page-header-info__btn {
  min-width: 155px;
  padding: calc((52px - (1.6rem * 1.6)) / 2) 0;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background-color: red;
}

/*----------------------------------------
| page-footer
----------------------------------------*/
.page-footer {
  padding: 40px 0;
  background-color: #aaa;
}

.page-footer small {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
}

/*----------------------------------------
| main-visual
----------------------------------------*/
.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: 7rem;
  font-family: "YuGothic", "游ゴシック";
  transform: translate(-50%, -50%);
}

/*----------------------------------------
| ナビゲーション
----------------------------------------*/
.intro-section__nav {
  padding: 88px 0 80px;
}

.intro-section__nav ol {
  display: flex;
  justify-content: space-between;
  width: 810px;
  margin: 0 auto;
}

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

/* ナビゲーション内の矢印 */
.intro-section__nav ol li:after {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: translateX(-50%) rotate(45deg);
  content: "";
}

.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;
  line-height: 1.2;
  border: 2px solid #000;
  border-radius: 50%;
}

/*----------------------------------------
| コンテンツブロック(画像と文章のペアで1ブロック)
----------------------------------------*/
.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;
  padding: 30px 20px;
  color: #fff;
  background-color: #aaa;
}

/* タイトル */
.intro-section__txt-area h4 {
  margin-bottom: 24px;
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.5;
}

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

/*----------------------------------------
| band(セクション始めの帯)
----------------------------------------*/
.section-header {
  position: relative;
  padding: calc((87px - (30px * 1.6)) / 2) 0;
  text-align: center;
  background: #aaa;
}

/* 帯下部の三角形 */
.section-header:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-color: #aaa transparent transparent transparent;
  border-style: solid;
  border-width: 28px 28px 0;
  transform: translate(-50%, 100%);
  content: "";
}

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

/*----------------------------------------
| contact-block(お問い合わせブロック)
----------------------------------------*/
.intro-section__contact {
  padding: 100px 0;
}

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

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

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

.contact-block__btn {
  width: 370px;
  padding: calc((83px - (2.2rem * 1.6)) / 2) 0;
  color: #fff;
  font-size: 2.2rem;
  text-align: center;
  background: #ff0600;
}

まとめ

以上で3記事にかけて簡易LPの解説を行いました!

全ての箇所を細かく説明することはできませんでしたが、今回紹介したサンプルサイトの制作技術は様々なサイトに応用することができるので
これに限らず色々なサイトを作ってみてください!

HTML・CSSを学んでいる人のお役に立てることを願ってます!

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

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

関連記事