clover.blueclover.blueHomeAboutサイト模写「flower」についてData2019/12/21TagHTML学校で生徒たちに模写をしてもらいました。自分でも組んでみましたので、解説していきます。模写したサイトは下記のサイトです。headerという状態にしました。article」は「footer以外の部分」だろうと考えました。article(記事)のなかのheaderが下記の部分としました。footer以外の場所をmainとしてその中にarticleを書き、その記事のheaderという扱いにしました。footerとしてしまうというのも手かなと思います。mainの中にh1を配置して辻褄を合わせました。するとFlowerが2つになってしまうのでcssで片方を消してあげましょう。headerのなかにh1がないというのも少し違和感があるため今回は前者のほうで行こうと思います。文書構造を理解して見出しがどこかを考えるまずはこのサイトで見出しとなる部分はどこなのか見ていきましょう。どのような階層構造になるかを考えてみましょう。Flower届くのはあなた好みのお花だけお花はポストに投函忙しくても大丈夫FLOWERならいつもかわいく飾れる2つのプラン1輪プランブーケプラン隔週でのお届けだからゆるく続けられるどんなお花が届くのかわいいお花だけ元気な状態でそのまま飾れるかんたん、かわいいFLOWERのための花の器FLOWERだから続けられる、お花のある暮らしお世話がかんたんアプリがお知らせ安心の保証つきぱっと一通りサイトをみて、このサイトがどういう構造なのかを考えると上記のようになるかと思います。これがこのサイトで伝えたい部分で目次になり得るところだと考えます。この目次になり得るところが「見出し」に当たると考えましょう。この単位でsectionが構築されるはずです。この単位を「コンポーネント」として考えてマークアップしていきます。コンポーネントとしての考え方コンポーネントとはこのサイトを構築している1つの要素です。コンポーネントがたくさん集まってサイトが構築されています。上から順番に考えていきましょうまずは↓の部分のコンポーネントを考えていきます。class="point-description">FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる2種類のお花から毎回好きなものが選べます。class="point-description">お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。class="point-description">専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p></section>ここでいうコンポーネントとは構造は3つとも一緒なので、一つのコンポーネントが3つ並んでいると考えることができます。class="point-description">FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる2種類のお花から毎回好きなものが選べます。</p></section>「pointコンポーネント」があり、その中に「point-titleコンポーネント」と「point-descriptionコンポーネント」という考え方です。pointコンポーネントpoint-titleコンポーネントpoint-descriptionコンポーネントさらに今回それぞれ背景などが違うので、「select」「postal」「decorate」というクラスをつけています。pointという部分は同じですがそれぞれ下記のような考え方でクラスをつけました。class="plan-comment">価格は税抜きです。<br>送料は360円(税抜)です。<br>プランは注文するたびに変更できます。</p></section>ここでは「プラン」のことを考えるコンポーネントに、下記のコンポーネントが紐付いていると考えましょう。planコンポーネントplan-titleコンポーネントplan-descriptionコンポーネントplan-itemコンポーネントが2つplan-commentコンポーネントplan-itemコンポーネントについてこのコンポーネントは「プランの名前」と「値段」を表しているコンポーネントです。「2つのプラン」の構造は一緒なのでこのコンポーネントが2つ並んでいると考えます。</figure></section>下記のような構造のコンポーネントとして考えて作りました。deliver-2weekコンポーネントdeliver-2week-textコンポーネントdeliver-2week-imageコンポーネント少し迷ったところは、このコンポーネントを「プランの中に入れる」か「外に出すか」です。プランを選ぶことで「お届けする」と考えるとプランの中で良いのかなとも考えました。どちらのプランとも隔たりなく、「かわいいが届く、ずっと無料*のお花便」を伝えたいサイトなので。プランに紐づくというよりはFlower全体に言える話かなと思い、外側に出すことにしました。class="postal-item-description">色やサイズなど、かわいくおしゃれに飾れるお花にこだわってセレクト。季節やトレンドに合わせてブーケを作っています。class="postal-item-description">お花は注文を受けてから市場で直接仕入れているから新鮮。お花の元気を保つ専用BOXでお届けします。class="postal-item-description">お花の茎を、あらかじめ飾るのに最適な長さにカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</section></section>ここも、今まで組んできた考え方と同じで、下記のような構造を考えてコンポーネントを作ります。postalコンポーネントpostal-titleコンポーネントpostal-itemコンポーネントが3つpostal-itemコンポーネントそれぞれ構造が全く同じなので、このコンポーネントが3つ並んでいると考えます。class="postal-item-description">お花の茎を、あらかじめ飾るのに最適な長さにカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。</p></section>これまでと同じ考えで、「postal-itemコンポーネント」に「postal-item-title」「postal-item-description」のコンポーネントが紐付いています。class="decorate-description">お花を飾るのに欠かせないのが花器。お花と花器の相性もさまざま。手持ちにぴったりのものがなくて、いまいちかわいく飾れない...なんてことも。そこで、誰でもかんたんに、かわいくお花を飾れる専用の花器をつくりました。お花のある暮らしが、もっと楽しみになりますように。class="decorate-comment">アプリ内でご購入いただけます。</p></section>ここでの構造は下記のようになります。decorateコンポーネントdecorate-titleコンポーネントdecorate-priceコンポーネントdecorate-descriptionコンポーネントdecorate-imageコンポーネントdecorate-priceコンポーネントdecorate-commentコンポーネントdecorate-imageコンポーネント「decorate-image-itemコンポーネント」が3つ並んでいると考えます。class="decorate-image-item">candel</li></ul>decorate-imageコンポーネントdecorate-image-itemコンポーネントが3つdecorate-priceコンポーネントここはいくつかのパターン考えることができるので、どうやって組むか少し悩みました。</ul></section>今回は2つのパターンを考えてみます。どちらも「クラスの付け方」は同じなのですが、「タグの構造」が少し違います。どちらも「decorate-price-label」と「decorate-price-value」の関係性がマークアップできているので、間違えではありません。このようにクラスを付けて、cssでは「クラスのみで指定してタグの構造」を気にしないようにしておくと、あとから「タグの構造」を変えた場合もcssを変更しなくてすむため、クラスは1つ1つ付けて、「クラス単位のコンポーネントを作る」という考え方でマークアップしていきます。今回は、タグの構造がシンプルなので↑のdl,dt,ddを使ったほうで進めていきます。class="living-item-description">お花の栄養剤をセットでお届け。こまめな水換えは不要です。class="living-item-description">お花のお届けはアプリがお知らせ。受け取り忘れの心配はありません。新しいものを無料で再送します。</section></section>livingコンポーネントliving-titleコンポーネントliving-itemコンポーネントが3つここも考え方は一緒で、同じ構造の「living-itemコンポーネント」が3つ入っていると考えます。class="living-item-description">お花の栄養剤をセットでお届け。こまめな水換えは不要です。ここのコンポーネントの構造を見てみると、ヘッダーと同じ構造だと言うことに気づくと思います。</ul></header>「ヘッダー」のコンポーネントの「site-comment」がないものと同じ構造です。クラス名は一緒にしてあげて、クラス名に「mini」とつけることでcssを組むときに別のレイアウトにできるようにします。Reserved.</small></p></footer>footerコンポーネントgnavコンポーネントinstagramコンポーネントcopyrightコンポーネントgnavコンポーネント「gnav-itemコンポーネント」メニュー数分入っていると考えます。href="">運営会社</a></li></ul>gnavコンポーネントgnav-itemコンポーネントまとめ文書構造を理解して、見出しがどこなのかを考えるそれぞれどういうコンポーネントからサイトがなりたっているのか1つづつ考えるこのように順番に考えていき、どういう構造でこのサイトが成り立っているかを考えていきます。小さい単位で考えていくことで、他のコンポーネントには依存しない作りになり修正や変更に強いサイトを作ることができます。どのようなサイトでもこのような考え方でマークアップを楽しみましょうー!。