学校で生徒たちに模写をしてもらいました。 自分でも組んでみましたので、解説していきます。

模写したサイトは下記のサイトです。

https://flowr.is/

下記マークアップしたサイト http://github.develo.org/school/sample/flower/

header, mian, footerを考える

悩みそうなポイント

• headerをどこにすべきなのか
• main, articleの範囲はどこなのか
• h1をどこにするのか

headerをどこにすべきなのか

下記のようにheaderにし、main の中の article の中の headerという状態にしました。

通常header main footerとなりそうですが、「main の中の article」は「footer以外の部分」だろうと考えました。 そしてarticle(記事)のなかのheaderが下記の部分としました。

<main id="contents">
  <article>
    <header class="site-catchcopy">
      <h1 class="site-title">Flower</h1>
      <p class="site-description">かわいいが届く、ずっと無料*のお花便</p>
      <p class="site-app-link"><img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/button_appstore-051aa15bf928be268379e38d0144392c72467a38671b8c9338d015936431fd3d.png" alt="Download on the App Store"></p>

      <ul class="site-comment">
        <li class="site-comment-item">配送料360円（税抜）が別途かかります</li>
        <li class="site-comment-item">北海道、沖縄、離島エリアは現在対象外です</li>
      </ul>
    </header>

それにあたっての考え方

footerに書いてある、サイトのリンクは FAQや運営会社などもあり、その部分の「mainの情報の一部」というよりは この「キャンペーンサイト」の追加の情報にあたると考え footer以外の場所をmainとしてその中にarticleを書き、その記事のheaderという扱いにしました。

ほかの考え方

少し強引にheader main footerとしてしまうというのも手かなと思います。 http://github.develo.org/school/sample/flower/index_pattern2.html

<header class="site-catchcopy">
  <p class="site-title">Flower</p>
  <p class="site-description">かわいいが届く、ずっと無料*のお花便</p>
  <p class="site-app-link"><img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/button_appstore-051aa15bf928be268379e38d0144392c72467a38671b8c9338d015936431fd3d.png" alt="Download on the App Store"></p>
  <ul class="site-comment">
    <li class="site-comment-item">配送料360円（税抜）が別途かかります</li>
    <li class="site-comment-item">北海道、沖縄、離島エリアは現在対象外です</li>
  </ul>
</header>

<main id="contents">
  <article>
    <h1 class="site-title">Flower</h1>

mainの外にheaderをおき、そちらをpとして mainの中にh1を配置して辻褄を合わせました。 するとFlowerが２つになってしまうのでcssで片方を消してあげましょう。

ただし、headerのなかにh1がないというのも少し違和感があるため今回は前者のほうで行こうと思います。

文書構造を理解して見出しがどこかを考える

まずはこのサイトで見出しとなる部分はどこなのか見ていきましょう。 そしてどのような階層構造になるかを考えてみましょう。

• Flower
  • 届くのはあなた好みのお花だけ
  • お花はポストに投函忙しくても大丈夫
  • FLOWERならいつもかわいく飾れる
  • 2つのプラン
    • 1輪プラン
    • ブーケプラン
  • 隔週でのお届けだからゆるく続けられる
  • どんなお花が届くの
    • かわいいお花だけ
    • 元気な状態で
    • そのまま飾れる
  • かんたん、かわいいFLOWERのための花の器
  • FLOWERだから続けられる、お花のある暮らし
    • お世話がかんたん
    • アプリがお知らせ
    • 安心の保証つき

ぱっと一通りサイトをみて、このサイトがどういう構造なのかを考えると上記のようになるかと思います。 そしてこれがこのサイトで伝えたい部分で目次になり得るところだと考えます。 この目次になり得るところが「見出し」に当たると考えましょう。

そしてこの単位でsectionが構築されるはずです。 この単位を「コンポーネント」として考えてマークアップしていきます。

コンポーネントとしての考え方

コンポーネントとはこのサイトを構築している１つの要素です。 コンポーネントがたくさん集まってサイトが構築されています。

上から順番に考えていきましょう

まずは↓の部分のコンポーネントを考えていきます。

「3つのポイント」pointコンポーネント

• 届くのはあなた好みのお花だけ
• お花はポストに投函忙しくても大丈夫
• FLOWERならいつもかわいく飾れる

<section class="point select">
  <h2 class="point-title">届くのは<br>あなた好みのお花だけ</h2>
  <p  class="point-description">FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる2種類のお花から毎回好きなものが選べます。</p>
</section>

<section class="point postal">
  <h2 class="point-title">お花はポストに投函<br>忙しくても大丈夫</h2>
  <p class="point-description">お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。</p>
</section>

<section class="point decorate">
  <h2 class="point-title">FLOWERなら<br>いつもかわいく飾れる</h2>
  <p class="point-description">専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
</section>

ここでいうコンポーネントとは

構造は3つとも一緒なので、一つのコンポーネントが3つ並んでいると考えることができます。

<section class="point select">
  <h2 class="point-title">届くのは<br>あなた好みのお花だけ</h2>
  <p  class="point-description">FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる2種類のお花から毎回好きなものが選べます。</p>
</section>

「pointコンポーネント」があり、その中に「point-titleコンポーネント」と「point-descriptionコンポーネント」という考え方です。

• pointコンポーネント
  • point-titleコンポーネント
  • point-descriptionコンポーネント

さらに今回それぞれ背景などが違うので、「select」「postal」「decorate」というクラスをつけています。

pointという部分は同じですがそれぞれ下記のような考え方でクラスをつけました。

• 好みの花を届けるというポイント
• 届けるためのポイント
• 飾るためのポイント

「2つのプラン」planコンポーネント

• 2つのプラン
  • 1輪プラン
  • ブーケプラン

<section class="plan">
  <h2 class="plan-title">2つのプラン</h2>
  <p class="plan-description">飾りたいお花のボリュームで選べます</p>

  <section class="plan-item one">
    <h3 class="plan-item-label">1輪プラン</h3>
    <p class="plan-item-value">¥0 / 1配送</p>
  </section>
  <section class="plan-item bouquet">
    <h3 class="plan-item-label">ブーケプラン</h3>
    <p class="plan-item-value">¥500 / 1配送</p> 
  </section>

  <p class="plan-comment">価格は税抜きです。<br>
送料は360円（税抜）です。<br>
プランは注文するたびに変更できます。</p>
</section>

ここでは「プラン」のことを考えるコンポーネントに、下記のコンポーネントが紐付いていると考えましょう。

• planコンポーネント
  • plan-titleコンポーネント
  • plan-descriptionコンポーネント
  • plan-itemコンポーネントが2つ
  • plan-commentコンポーネント

plan-itemコンポーネントについて

このコンポーネントは「プランの名前」と「値段」を表しているコンポーネントです。 「2つのプラン」の構造は一緒なのでこのコンポーネントが２つ並んでいると考えます。

<section class="plan-item one">
  <h3 class="plan-item-label">1輪プラン</h3>
  <p class="plan-item-value">¥0 / 1配送</p>
</section>

「隔週でのお届け」deliver-2weekコンポーネント

<section class="deliver-2week">
  <h2 class="deliver-2week-text">隔週でのお届けだから<br>ゆるく続けられる</h2>
  <figure class="deliver-2week-image">
    <img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/img_frequency-cf9e0db748e48b3607a4aa131d8378486a008cc817cbc28d67adb83b724da425.png" alt="">
  </figure>
</section>

下記のような構造のコンポーネントとして考えて作りました。

• deliver-2weekコンポーネント
  • deliver-2week-textコンポーネント
  • deliver-2week-imageコンポーネント

少し迷ったところは、このコンポーネントを「プランの中に入れる」か「外に出すか」です。 プランを選ぶことで「お届けする」と考えるとプランの中で良いのかなとも考えました。

ただどちらのプランとも隔たりなく、「かわいいが届く、ずっと無料*のお花便」を伝えたいサイトなので。 プランに紐づくというよりはFlower全体に言える話かなと思い、外側に出すことにしました。

「どんなお花が届くの」postalコンポーネント

<section class="postal">
  <h2 class="postal-title">どんなお花が届くの？</h2>

  <section class="postal-item">
    <h3 class="postal-item-title">かわいいお花だけ</h3>
    <p class="postal-item-description">色やサイズなど、かわいくおしゃれに飾れるお花にこだわってセレクト。季節やトレンドに合わせてブーケを作っています。</p>
  </section>

  <section class="postal-item">
    <h3 class="postal-item-title">元気な状態で</h3>
    <p class="postal-item-description">お花は注文を受けてから市場で直接仕入れているから新鮮。お花の元気を保つ専用BOXでお届けします。</p>
  </section>

  <section class="postal-item">
    <h3 class="postal-item-title">そのまま飾れる</h3>
    <p class="postal-item-description">お花の茎を、あらかじめ飾るのに最適な長さにカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</p>
  </section>
</section>

ここも、今まで組んできた考え方と同じで、下記のような構造を考えてコンポーネントを作ります。

• postalコンポーネント
  • postal-titleコンポーネント
  • postal-itemコンポーネントが3つ

postal-itemコンポーネント

それぞれ構造が全く同じなので、このコンポーネントが3つ並んでいると考えます。

<section class="postal-item">
  <h3 class="postal-item-title">そのまま飾れる</h3>
  <p class="postal-item-description">お花の茎を、あらかじめ飾るのに最適な長さにカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</p>
</section>

これまでと同じ考えで、「postal-itemコンポーネント」に「postal-item-title」「postal-item-description」のコンポーネントが紐付いています。

• postal-itemコンポーネント
  • postal-item-titleコンポーネント
  • ppostal-item-descriptionコンポーネント

「お花を飾る」decorateコンポーネント

<section class="decorate">
  <h2 class="decorate-title">かんたん、かわいい<br>FLOWERのための花の器</h2>
  <p class="decorate-price">初回限定25%OFF + 送料無料</p>
  <p class="decorate-description">お花を飾るのに欠かせないのが花器。でも、お花と花器の相性もさまざま。手持ちにぴったりのものがなくて、いまいちかわいく飾れない…なんてことも。そこで、誰でもかんたんに、かわいくお花を飾れる専用の花器をつくりました。お花のある暮らしが、もっと楽しみになりますように。</p>

  <ul class="decorate-image">
    <li class="decorate-image-item">bell</li>
    <li class="decorate-image-item">moon</li>
    <li class="decorate-image-item">candel</li>
  </ul>

  <dl class="decorate-price">
    <dt class="decorate-price-label">初回注文後<br>2週間以内</dt>
    <dd class="decorate-price-value">1,200円（送料無料）</dd>
    <dd class="decorate-price-value">通常価格 1,600円（送料別）</dd>
  </dl>

  <p class="decorate-comment">アプリ内でご購入いただけます。</p>
</section>

ここでの構造は下記のようになります。

• decorateコンポーネント
  • decorate-titleコンポーネント
  • decorate-priceコンポーネント
  • decorate-descriptionコンポーネント
  • decorate-imageコンポーネント
  • decorate-priceコンポーネント
  • decorate-commentコンポーネント

decorate-imageコンポーネント

「decorate-image-itemコンポーネント」が3つ並んでいると考えます。

<ul class="decorate-image">
  <li class="decorate-image-item">bell</li>
  <li class="decorate-image-item">moon</li>
  <li class="decorate-image-item">candel</li>
</ul>

• decorate-imageコンポーネント
  • decorate-image-itemコンポーネントが3つ

decorate-priceコンポーネント

ここはいくつかのパターン考えることができるので、どうやって組むか少し悩みました。

<dl class="decorate-price">
  <dt class="decorate-price-label">初回注文後<br>2週間以内</dt>
  <dd class="decorate-price-value">1,200円（送料無料）</dd>
  <dd class="decorate-price-value">通常価格 1,600円（送料別）</dd>
</dl>

-

<section class="decorate-price">
  <h3 class="decorate-price-label">初回注文後<br>2週間以内</h3>
  <ul class="decorate-price-info">
    <li class="decorate-price-value">1,200円（送料無料）</li>
    <li class="decorate-price-value">通常価格 1,600円（送料別）</li>
  </ul>
</section>

今回は２つのパターンを考えてみます。 どちらも「クラスの付け方」は同じなのですが、「タグの構造」が少し違います。

どちらも「decorate-price-label」と「decorate-price-value」の関係性がマークアップできているので、間違えではありません。

またこのようにクラスを付けて、cssでは「クラスのみで指定してタグの構造」を気にしないようにしておくと、あとから「タグの構造」を変えた場合もcssを変更しなくてすむため、クラスは１つ１つ付けて、「クラス単位のコンポーネントを作る」という考え方でマークアップしていきます。

今回は、タグの構造がシンプルなので↑のdl,dt,ddを使ったほうで進めていきます。

「お花のある暮らし」livingコンポーネント

<section class="living">
  <h2 class="living-title">FLOWERだから続けられる、<br>お花のある暮らし</h2>

  <section class="living-item">
      <h3 class="living-item-title">お世話がかんたん</h3>
      <p class="living-item-description">お花の栄養剤をセットでお届け。こまめな水換えは不要です。</p>
  </section>
  <section class="living-item">
      <h3 class="living-item-title">アプリがお知らせ</h3>
      <p class="living-item-description">お花のお届けはアプリがお知らせ。受け取り忘れの心配はありません。</p>
  </section>
  <section class="living-item">
      <h3 class="living-item-title">安心の保証つき</h3>
      <p class="living-item-description">万が一枯れたお花が届いても、 新しいものを無料で再送します。</p>
  </section>
</section>

• livingコンポーネント
  • living-titleコンポーネント
  • living-itemコンポーネントが3つ

ここも考え方は一緒で、同じ構造の「living-itemコンポーネント」が3つ入っていると考えます。

<section class="living-item">
    <h3 class="living-item-title">お世話がかんたん</h3>
    <p class="living-item-description">お花の栄養剤をセットでお届け。こまめな水換えは不要です。</p>
</section>

• living-itemコンポーネント
  • living-item-titleコンポーネント
  • living-item-descriptionコンポーネント

「ヘッダー」と同じコンポーネント　

ここのコンポーネントの構造を見てみると、ヘッダーと同じ構造だと言うことに気づくと思います。

<section class="site-catchcopy mini">
  <h2 class="site-title">FLOWER</h2>
  <p class="site-description">かわいいが届く、ずっと無料のお花便</p>
  <p class="site-app-link"><img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/button_appstore-051aa15bf928be268379e38d0144392c72467a38671b8c9338d015936431fd3d.png" alt="Download on the App Store"></p>
</section>

-

<header class="site-catchcopy">
  <h1 class="site-title">Flower</h1>
  <p class="site-description">かわいいが届く、ずっと無料*のお花便</p>
  <p class="site-app-link"><img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/button_appstore-051aa15bf928be268379e38d0144392c72467a38671b8c9338d015936431fd3d.png" alt="Download on the App Store"></p>

  <ul class="site-comment">
    <li class="site-comment-item">配送料360円（税抜）が別途かかります</li>
    <li class="site-comment-item">北海道、沖縄、離島エリアは現在対象外です</li>
  </ul>
</header>

「ヘッダー」のコンポーネントの「site-comment」がないものと同じ構造です。 なのでクラス名は一緒にしてあげて、クラス名に「mini」とつけることでcssを組むときに別のレイアウトにできるようにします。

「フッター」コンポーネント

<footer id="footer">
  <ul class="gnav">
    <li class="gnav-item"><a href="">FAQ</a></li>
    <li class="gnav-item"><a href="">プライバシーポリシー</a></li>
    <li class="gnav-item"><a href="">利用規約</a></li>
    <li class="gnav-item"><a href="">特定商取引法に関する表記</a></li>
    <li class="gnav-item"><a href="">運営会社</a></li>
  </ul>
  <p class="instagram"><a href="">instagram</a></p>
  <p class="copyright"><small>Copyright ROLLCAKE Inc. All Rights Reserved.</small></p>
</footer>

• footerコンポーネント
  • gnavコンポーネント
  • instagramコンポーネント
  • copyrightコンポーネント

gnavコンポーネント

「gnav-itemコンポーネント」メニュー数分入っていると考えます。

<ul class="gnav">
  <li class="gnav-item"><a href="">FAQ</a></li>
  <li class="gnav-item"><a href="">プライバシーポリシー</a></li>
  <li class="gnav-item"><a href="">利用規約</a></li>
  <li class="gnav-item"><a href="">特定商取引法に関する表記</a></li>
  <li class="gnav-item"><a href="">運営会社</a></li>
</ul>

• gnavコンポーネント
  • gnav-itemコンポーネント

まとめ

• 文書構造を理解して、見出しがどこなのかを考える
• それぞれどういうコンポーネントからサイトがなりたっているのか１つづつ考える

このように順番に考えていき、どういう構造でこのサイトが成り立っているかを考えていきます。

小さい単位で考えていくことで、他のコンポーネントには依存しない作りになり修正や変更に強いサイトを作ることができます。

どのようなサイトでもこのような考え方でマークアップを楽しみましょうー!