こんにちは、かなきち(@kanakichi0801)です。
前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック！
前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！
0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net
1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net
2. 3カラムの実装と隣接セレクタ(li + li)でコーディングした記事↓
blog.mimipen.net
コーディング練習 第三回目！
今まで使ったプロパティを使ってメニュー表をコーディングしてみよう！特殊文字円マークを文字コードを使用して表示させよう
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
- 完成コード
- コーディングルール
- デザインデータを元に計画をたてる
- メニューエリアの大枠
- メニューをパーツ化しよう
- メニュー表を流し込む
- 隣接セレクタを使いメニュー間に余白を指定する
- MENUの完成コード
- まとめ
完成コード
サンプルページ
[html]
<div class="menu"> <div class="menu__inner"> <div class="base__title"> <h2><div>MENU</div>メニュー</h2> <div class="deco"></div> </div> <div class="menu__cts cf"> <div class="menu__cts__left"> <div class="menu__box"> <h3>DRINK／飲み物</h3> <div class="menu__box__item"> <p class"cf">コーヒー<span class="price">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥340</span></p> </div> </div> </div> <div class="menu__cts__right"> <div class="menu__box"> <h3>FOOD ／ 料理</h3> <div class="menu__box__item"> <p class"cf">マルゲリータ<span class="price">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT ／ デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥400</span></p> </div> </div> </div> </div> </div> </div>
[css]
/*-------------------------------------------------------------- MENU --------------------------------------------------------------*/ .menu{ background-color: #e8edf3; padding: 100px 0 120px; } .menu__inner{ width: 1040px; margin: 0 auto; } .menu__cts{ margin-top: 40px; } .menu__cts__left{ width: 490px; float: left; } .menu__cts__right{ width: 490px; float: right; } .menu__box h3{ background-color: #74859f; padding: 21px 18px; font-size: 16px; color: #fff; } .menu__box__item{ padding: 18px; font-size: 14px; border-bottom: solid 1px #74859f; } .menu__box__item .price{ float: right; } .menu__cts .menu__box + .menu__box{ margin-top: 44px; }
もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！
以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。
コーディングルール
初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。
1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう！デザインデータはこちらをクリック。
メニューエリアのデザインデータを元に以下のように考える。
かなきちメモ(クラス名や使用するプロパティを考える)
左メニューをmenu__cts__left、右メニューをmenu__cts__rightとし、floatを使って左右に配置しよう。menu__box(タイトルとメニューのセット)を作成し使いまわそう。メニューの料金はpriceとして、floatを使って右寄せにしよう。
などなどを事前に考えます。
メニューエリアの大枠
メニューエリアの大枠の構造をHTMLで実装
[HTML]
<div class="menu"> <div class="menu__inner"> <div class="base__title"> <h2><div>MENU</div>メニュー</h2> <div class="deco"></div> </div> <div class="menu__cts cf"> <div class="menu__cts__left"> </div> <div class="menu__cts__right"> </div> </div> </div> </div>
クラス名のルール付けとh2(base__title)のパーツ化を以下の記事でしました。
blog.mimipen.net
DRINKは左側、FOOD・DESSERTは右側に配置したいので、それぞれmenu__cts__left、menu__cts__rightとクラス名を指定し、それらを囲うdivタグにmenu__ctsクラスを指定しました。
ここでは、floatプロパティを使用したいので、menu__ctsに以下の記事でパーツ化したcfというクラス名を記述しています。
<div class="menu__cts cf">
メニューエリアの大枠にCSSを指定する
[CSS]
.menu{ background-color: #e8edf3; padding: 100px 0 120px; } .menu__inner{ width: 1040px; margin: 0 auto; } .menu__cts{ margin-top: 40px; } .menu__cts__left{ width: 490px; float: left; } .menu__cts__right{ width: 490px; float: right; }
menuに背景色(#e8edf3)を指定しました。
.menu{
background-color: #e8edf3;
}
menu__cts__left、menu__cts__rightに幅490pxを指定します。menu__cts__leftにfloat: leftで左寄せに、menu__cts__rightにfloat: rightで右寄せにしました。
.menu__cts__left{
width: 490px;
float: left;
}
.menu__cts__right{
width: 490px;
float: right;
}
floatの使い方については、以下の記事を参考にしてください。
blog.mimipen.net
メニューをパーツ化しよう
メニューのHTML
[HTML]
<div class="menu__box"> <h3>DRINK／飲み物</h3> <div class="menu__box__item"> <p class"cf">コーヒー<span class="price">¥270</span></p> </div> </div>
メニューのカテゴリータイトル(DRINK／飲み物)をh3タグで実装し、メニューと料金をmenu__box__itemというdivタグでひとまとめにしました。
料金の円マーク(特殊文字)に文字コード(¥)を使用しました。
特殊文字や記号がうまく表示されないのはなぜ？
文字には、HTMLで直接記述できない特殊文字や記号があります。うまく読み込めずブラウザごとに表示が変わってしまったり文字化けして見た目が違うものになってしまう場合があります。それを避けるために、特殊文字や記号を表示させたい場合は、それらを文字コードで記述しましょう。
よく使われるHTML特殊文字の文字コード
・半角空白 =
・< = <
・> = >
・& = &
・© = ©
・¥ = ¥
メニューのCSS
[CSS]
.menu__box h3{ background-color: #74859f; padding: 21px 18px; font-size: 16px; color: #fff; } .menu__box__item{ padding: 18px; font-size: 14px; border-bottom: solid 1px #74859f; } .menu__box__item .price{ float: right; }
メニューのカテゴリータイトル(DRINK／飲み物)に背景色(#74859f)を指定し、余白などを調整しました。
.menu__box h3{
background-color: #74859f;
padding: 21px 18px;
font-size: 16px;
color: #fff;
}
menu__box__itemの余白を調整し、下にボーダーを指定しました。
.menu__box__item{
padding: 18px;
font-size: 14px;
border-bottom: solid 1px #74859f;
}
料金を右寄せにします。floatを使う場合は親要素にクリアフィックスを指定します。
※今回は事前にクリアフィックスを用意してあるので親要素にcfというクラスを追加します。
[html]
<p class"cf">コーヒー<span class="price">¥270</span></p>
[css]
.menu__box__item .price{ float: right; }
メニュー表を流し込む
ここまで見た目ができたら、メニューの内容を書き足していきます。
[html]
<div class="menu__cts cf"> <div class="menu__cts__left"> <div class="menu__box"> <h3>DRINK／飲み物</h3> <div class="menu__box__item"> <p class"cf">コーヒー<span class="price">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥340</span></p> </div> </div> </div> <div class="menu__cts__right"> <div class="menu__box"> <h3>FOOD ／ 料理</h3> <div class="menu__box__item"> <p class"cf">マルゲリータ<span class="price">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT ／ デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥400</span></p> </div> </div> </div> </div>
隣接セレクタを使いメニュー間に余白を指定する
メニューが増えた時も想定し、隣接セレクタを使い上に余白を指定します。
.menu__cts .menu__box + .menu__box{
margin-top: 44px;
}
隣接セレクタについては以下の記事で紹介しているのでそちらを参照してください。
blog.mimipen.net
MENUの完成コード
サンプルページ
[html]
<div class="menu"> <div class="menu__inner"> <div class="base__title"> <h2><div>MENU</div>メニュー</h2> <div class="deco"></div> </div> <div class="menu__cts cf"> <div class="menu__cts__left"> <div class="menu__box"> <h3>DRINK／飲み物</h3> <div class="menu__box__item"> <p class"cf">コーヒー<span class="price">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥340</span></p> </div> </div> </div> <div class="menu__cts__right"> <div class="menu__box"> <h3>FOOD ／ 料理</h3> <div class="menu__box__item"> <p class"cf">マルゲリータ<span class="price">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT ／ デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥400</span></p> </div> </div> </div> </div> </div> </div>
[css]
/*-------------------------------------------------------------- MENU --------------------------------------------------------------*/ .menu{ background-color: #e8edf3; padding: 100px 0 120px; } .menu__inner{ width: 1040px; margin: 0 auto; } .menu__cts{ margin-top: 40px; } .menu__cts__left{ width: 490px; float: left; } .menu__cts__right{ width: 490px; float: right; } .menu__box h3{ background-color: #74859f; padding: 21px 18px; font-size: 16px; color: #fff; } .menu__box__item{ padding: 18px; font-size: 14px; border-bottom: solid 1px #74859f; } .menu__box__item .price{ float: right; } .menu__cts .menu__box + .menu__box{ margin-top: 44px; }
まとめ
今回は、これまで勉強してきたCSSプロパティを使い、メニュー表を実装しました！また、HTMLで特殊文字を文字コードを使用して表示させてみましたがいかがだったでしょうか？
最初はデザインデータを見ても、どんなふうに実装すれば良いかわからないものです。たくさんのデザインを実装していく中で複雑なデザインも実装できるようになっていきますので、焦らず着実にコーディングしていきましょう！
慣れてくれば、以下のように吹き出しやタイトル、ボタンなどもコーディングできるようになります。
以下にHTMLタグもしっかり使ったコードも載せておくので参考に見てみてください。
HTMLをしっかり使ったコード
[html]
<section class="menu"> <div class="menu__inner w__base"> <h2 class="base__title"><span>MENU</span>メニュー</h2> <div class="menu__cts cf"> <div class="menu__cts__left"> <div class="menu__box"> <h3>DRINK／飲み物</h3> <ul> <li> <p class"cf">コーヒー<span class="price">¥270</span></p> </li> <li> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </li> <li> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </li> <li> <p class"cf">カフェラテ<span class="price">¥340</span></p> </li> <li> <p class"cf">ホットティー<span class="price">¥300</span></p> </li> <li> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </li> <li> <p class"cf">ココア<span class="price">¥330</span></p> </li> <li> <p class"cf">オレンジジュース<span class="price">¥340</span></p> </li> </ul> </div> </div> <div class="menu__cts__right"> <div class="menu__box"> <h3>FOOD ／ 料理</h3> <ul> <li> <p class"cf">マルゲリータ<span class="price">¥780</span></p> </li> <li> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </li> <li> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </li> </ul> </div> <div class="menu__box"> <h3>DESSERT ／ デザート</h3> <ul> <li> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </li> <li> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </li> <li> <p class"cf">ティラミス<span class="price">¥400</span></p> </li> </ul> </div> </div> </div> </div> </section>
[css]
/*-------------------------------------------------------------- MENU --------------------------------------------------------------*/ .menu{ background-color: #e8edf3; padding: 100px 0 120px; } .menu__cts{ margin-top: 40px; } .menu__cts__left{ width: 490px; float: left; } .menu__cts__right{ width: 490px; float: right; } .menu__box h3{ background-color: #74859f; padding: 21px 18px; font-size: 16px; color: #fff; } .menu__box li{ padding: 18px; font-size: 14px; border-bottom: solid 1px #74859f; } .menu__box .price{ float: right; } .menu__cts .menu__box + .menu__box{ margin-top: 44px; }
今回、初心者用のコードと大きく違う点は特にありませんが、メニュー表なのでリストタグ(li)を積極的に使用しています。
次の記事はこちら↓ blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)