初心者でもわかるHTML&CSS講座 イタリアンレストランホームページを作る
こんにちは、koheiです。
前回、イラストレーターでイタリアンレストランのデザインカンプを作成しましたので、今回は、実際にHTML&CSSを使って、ホームページを完成させたいと思います。
また、HTMLタグやCSSのプロパティなどの基本的な使い方を知らない方は、まずは、以下を参考にして、概要を理解してから取り組まれることをおすすめします。
初心者でもわかるHTML&CSS講座 第1回HTML,CSSの概要
初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう
初心者でもわかるHTML&CSS講座 第3回CSSの基本
初心者でもわかるHTML&CSS講座 第4回ボックスで作るWebレイアウト
ダウンロードファイル
以下のサイトのひな形をベースに作成を進めますので、以下からダウンロードをしてください。
動画解説
動画による解説です。記事内容と合わせて参考にしてみてください！
イタリアンレストランホームページを作る【前編】
ボックスレイアウト設計〜HTML実装まで
イタリアンレストランホームページを作る【後編】
CSSでレイアウト調整〜スマホ用レイアウト
作成の流れ
ホームページ作成までの流れは以下となります。
①作成したデザインカンプ（サイト完成図）を元に、
②
③
1.ボックスレイアウト設計
まずは実装に入る前に、作成したデザインカンプをもとに、ボックスレイアウトを検討していきます。
※いきなり実装に入るよりも、どのようにボックスを配置させるのかを先に検討しておいたほうが、効率良く実装できます。
1-1.ヘッダー、メイン、フッター
ホームページは、基本的にヘッダー部、メイン部、フッター部の３つの領域に分割されます。したがって、まずは、header、main、footerの３つエリアに分割します。
1-2.ヘッダー内ボックスレイアウト
ヘッダー内は、サイトロゴ用のボックス(#site_logo)と予約連絡先のボックス(#site_reserve)、ナビゲーションメニューのボックス(nav)を配置します。
また、サイト内の左右マージン（余白）を調整するためのcontainerというボックスを配置します。
※名前の先頭に#が付いているのは、divタグのidです。.(ドット）が先頭に付いているのは、divタグのclassを表しています。
1-3.メイン内ボックスレイアウト
メイン内には、イメージ画像用のセクション（#main_image)、コンセプトセクション（#concept)、メニューセクション（#menu)、アクセスセクション（#access)の４つのセクションを設けます。
また、メニューセクション内には、各メニューを横並びに配置するためのボックス(.menu_box)を配置します。
アクセスセクション内には、マップとアクセス情報、連絡先を配置するためのボックス（#access_map,#access_txt,#access_reserve)を配置します。
1-4.フッター内ボックスレイアウト
フッター内は、ロゴとCopyright要素のみです。したがって今回は、特に新たなボックス要素は設けないこととします。
2.HTMLで実装
デザインカンプを元にレイアウト構成を決めたので、早速HTMLで各要素を配置していきましょう。
ダウンロードファイルに「00_サイトひな形」というフォルダがあります。その中のindex.htmlにコードを追加していきましょう。
2-1.ヘッダーの実装
まずは、ヘッダー部分から実装していきます。
ヘッダー内には、ロゴ、アクセス先、ナビゲーションメニューを配置します。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。
ヘッダー部レイアウト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <header> <div class="container"> <div id="site_logo"> <h1><img src="images/logo.png"></h1> </div> <div id="site_reserve"> <p>ご予約はこちらから</p> <p class="site_tel">TEL:000-000-0000</p> </div> </div> <nav> <div class="container"> <ul> <li><a href="#">トップ</a></li> <li><a href="#concept">コンセプト</a></li> <li><a href="#menu">メニュー</a></li> <li><a href="#access">アクセス</a></li> </ul> </div> </nav> </header>
2-2.メインの実装
次にメインを実装していきます。
まずは、mainタグと各セクションタグを作成しましょう。
</nav> </header> <main> <!-- メインイメージエリア --> <section id="main_image"> </section> <!-- コンセプトエリア --> <section id="concept"> </section> <!-- メニューエリア --> <section id="menu"> </section> <!-- アクセスエリア --> <section id="access"> </section> </main> </body>
2-2-1.メインセクションの実装
メインイメージエリアには、imgタグで画像を配置しましょう。
メインセクションレイアウト
<!-- メインイメージエリア --> <section id="main_image"> <img src="images/top_image.png"> </section>
2-2-2.コンセプトセクションの実装
コンセプトエリアには、コンセプトのロゴ、見出し、アイコン画像、テキストを配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。
コンセプトセクションレイアウト
<!-- コンセプトエリア --> <section id="concept"> <div class="container"> <img id="concept_logo" src="images/concept_image.png"> <h2>コンセプト</h2> <img id="concept_icon" src="images/concept_image2.png"> <p>本場イタリアで大人気の本格イタリア料理店がついに日本上陸</br> 当店自慢のテラスで極上のイタリア料理とお酒をお楽しみください。</p> </div> </section>
2-2-3.メニューセクションの実装
メニューエリアには、メニューのロゴ、見出し、各メニューのリストを配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。
メニューセクションレイアウト
<!-- メニューエリア --> <section id="menu"> <div class="container"> <img id="menu_logo" src="images/menu_image.png"> <h2>メニュー</h2> <div class="menu_box"> <img src="images/menu_pasta.jpg"> <h3>パスタ</h3> <ul> <li>ペペロンチーノ</li> <li>海鮮トマトソースパスタ</li> <li>本格イタリアンミートソース</li> <li>ベーコンとほうれん草のクリームパスタ</li> </ul> </div> <div class="menu_box"> <img src="images/menu_piza.jpg"> <h3>ピザ</h3> <ul> <li>マルゲリータ</li> <li>シーフード</li> <li>コーンポテト</li> <li>エビベーコン</li> </ul> </div> <div class="menu_box"> <img src="images/menu_drink.jpg"> <h3>ドリンク</h3> <ul> <li>生ビール</li> <li>ジンジャーエール</li> <li>赤ワイン/白ワイン</li> <li>カシスオレンジ</li> <li>角ハイボール</li> </ul> </div> </div> </section>
2-2-4.アクセスセクションの実装
アクセスエリアには、アクセスのロゴ、見出し、Googleマップのリンク、アクセス情報等を配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。
アクセスセクションレイアウト
<!-- アクセスエリア --> <section id="access"> <div class="container"> <img id="access_logo" src="images/access_image.png"> <h2>アクセス</h2> <div id="access_map"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13295.027986794428!2d130.46191626920165!3d33.585658090167506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1561282916140!5m2!1sja!2sjp" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> <div id="access_txt"> <p> 〒000-0000 福岡県福岡市XXXXXXXXXXXXXXXXXXXXXX </p> <p> TEL:000-0000-0000 </p> <p> 営業時間：11:00〜15:00/17:30〜23:00 </p> <p> 定休日：火曜日 </p> </div> <div id="access_reserve"> <p>ご予約はこちらから</p> <p class="site_tel">TEL:000-000-0000</p> </div> </div> </section>
2-3.フッターの実装
最後にフッター部を実装します。
フッター用の画像とコピーライトを配置します。
</main> <footer> <img src="images/logo2.png"> <p> Copyright(c) inomacreate.com </p> </footer> </body> </html>
さて、ここまでできたら、ブラウザでindex.htmlを開いてみましょう。
CSSを定義していないので、とりあえず、配置した要素が単純に縦に並んでいるようなページが表示されるはずです。
3.CSSでレイアウト調整
いよいよ、CSSでレイアウト調整していきます。
ダウンロードファイルの「css」フォルダ内にあるstyle.cssファイルにコードを追加します。
まずは、body全体のフォント指定、サイトの左右余白用のボックスなどのサイト共通のスタイルを定義します。
@charset "utf-8";
/* ユニバーサルセレクタで余白リセット */
* {
margin: 0;
padding: 0;
}
body {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* サイト共通コンテナ */
.container {
max-width: 1000px;
margin: 0 auto;
}
3-1.ヘッダー内のレイアウト調整
続いて、ヘッダー内のレイアウトを調整していきます。
まずは、サイトロゴと予約連絡先の要素を横並びにしてみましょう。
以下のように、#site_logo と#site_reserveのfloatプロパティにleft、rightを設定して横並びにします。
また、float設定した後は、floatの解除が必要です。
今回は、float解除用のダミーのボックス要素を１つ追加して解除させたいと思います。以下のようにfloat解除を行うスタイル「.clearlist」を追加します。
そして、index.html側に、clearlistクラスのdiv要素を追加しましょう。
body {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* サイト共通コンテナ */
.container {
max-width: 1000px;
margin: 0 auto;
}
/* float解除用 */
.clearlist {
content: "";
display: block;
clear: both;
}
/* ヘッダー部スタイル設定 */
#site_logo {
float: left;
width: 65%;
}
#site_reserve {
float: right;
width: 35%;
text-align: right;
margin-top: 10px;
}
.site_tel {
font-size: 1.5em;
color: #C20D23;
}
<header> <div class="container"> <div id="site_logo"> <h1><img src="images/logo.png"></h1> </div> <div id="site_reserve"> <p>ご予約はこちらから</p> <p>TEL:000-000-0000</p> </div> <div class="clearlist"></div> </div> <nav> <div class="container"> <ul> <li><a href="#">トップ</a></li> <li><a href="#concept">コンセプト</a></li> <li><a href="#menu">メニュー</a></li> <li><a href="#access">アクセス</a></li> </ul> </div> </nav> </header>
次にナビゲーションメニューのレイアウトを設定します。
ナビゲーションメニューは、横並びレイアウトなので、liタグにfloatのleftを設定します。
今回、floatの解除は、ulタグのafter疑似要素を使って解除しています。
nav {
background-color: #C20D23;
}
nav ul {
list-style: none;
}
nav ul::after {
content: "";
display: block;
clear: both;
}
nav li {
float: left;
width: 25%;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: #fff;
}
nav a:hover {
opacity: 0.7;
}
ここまでできたら、一旦、index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。
3-2.メイン内のレイアウト調整
3-2-1.メインイメージセクションのスタイル
まずは、メインイメージのレイアウトを調整します。
メインイメージは、ブラウザの横幅全体に広げるように配置したいので、width:100%を指定しています。
/* メイン部スタイル設定 */
#main_image img {
width: 100%;
}
3-2-2.コンセプトセクションのスタイル
コンセプトセクションのスタイルを定義していきます。
文字は、中央揃えにするので、text-align:centerを指定します。また、各要素のmargin等を微調整します。
更新：2019.07.28
#concept pのスタイルは設定不要でした。削除しています。
#concept {
text-align: center;
margin-bottom: 40px;
}
#concept_logo {
margin-bottom: -40px;
}
#concept h2 {
margin-right: 25px;
}
/*
#concept p {
width: 500px;
margin: 0 auto;
}
*/
見出しのコンセプトの文字サイズを調整します。他のメニュー、アクセス等も共通で設定するので、h2タグのフォントサイズを標準サイズの2.0倍に設定しておきます。
/* サイト共通コンテナ */
.container {
max-width: 1000px;
margin: 0 auto;
}
h2 {
font-size: 2.0em;
}
3-2-3.メニューセクションのスタイル
メニューセクションのスタイルを定義していきます。
menu全体の背景色を設定し、文字を中央揃えにします。
また、.menu_boxを横並びに設定するため、float: leftを設定します。float解除は、clearlistで解除させますので、index.htmlにclearlistを追加します。
更新：2019.07.28
.menu_box ulのmargin-leftは、25px→3%に修正しました。
#menu {
background-color: #F5FFFA;
text-align: center;
}
#menu_logo {
margin-bottom: -40px;
}
.menu_box {
width: 29%;
float: left;
margin-left: 3%;
margin-bottom: 30px;
}
.menu_box img {
width: 100%;
max-width: 300px;
}
.menu_box ul {
text-align: left;
font-size: 0.8em;
/*
margin-left: 25px;
*/
margin-left: 3%;
}
<div class="menu_box"> <img src="images/menu_drink.jpg"> <h3>ドリンク</h3> <ul> <li>生ビール</li> <li>ジンジャーエール</li> <li>赤ワイン/白ワイン</li> <li>カシスオレンジ</li> <li>角ハイボール</li> </ul> </div> <div class="clearlist"></div> </div> </section>
3-2-4.アクセスセクションのスタイル
続いて、アクセスセクションのスタイルを定義します。
access全体の文字を中央揃えにします。
また、access_mapとaccess_txtを横並びに設定し、float解除は、clearlistで解除させますので、index.htmlにclearlistを追加します。
#access {
text-align: center;
}
#access iframe {
width: 70%;
}
#access_logo {
margin-bottom: -40px;
}
#access_map {
float: left;
width: 50%;
}
#access_txt {
float: right;
width: 50%;
text-align: left;
margin-top: 60px;
}
#access_reserve {
margin-top: 30px;
margin-bottom: 30px;
}
<div id="access_txt"> <p> 〒000-0000 福岡県福岡市XXXXXXXXXXXXXXXXXXXXXX </p> <p> TEL:000-0000-0000 </p> <p> 営業時間：11:00〜15:00/17:30〜23:00 </p> <p> 定休日：火曜日 </p> </div> <div class="clearlist"></div> <div id="access_reserve"> <p>ご予約はこちらから</p> <p class="site_tel">TEL:000-000-0000</p> </div> </div> </section>
ここまでできたら、一旦、index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。
3-3.フッター内のレイアウト調整
最後にフッターのレイアウトを定義していきます。
背景色と文字色、中央揃えに設定します。
footer {
background-color: #C20D23;
color: #fff;
text-align: center;
}
index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。
4.スマホ用レイアウト(レスポンシブデザイン)
4-1.スマホ、タブレットの見え方を指定する
スマホ用のレイアウトを指定する前に、スマートフォンやタブレットで表示する際のサイトの見え方を指定しておきます。index.htmlのmeta要素として、
・initial-scale=1.0:初期のズーム倍率は、1.0倍
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head>
4-2.メディアクエリーを使って、CSSを切り替える
style.cssの今まで定義していたスタイルの下に以下を追記しましょう。
ウィンドウサイズが、0〜680pxのときだけ、以下の｛｝内に定義したCSSが採用されます。
したがって、この中にスマホ用のレイアウト定義を記載していくことでレイアウトを切り替えることができます。
footer {
background-color: #C20D23;
color: #fff;
text-align: center;
}
@media only screen and (max-width: 680px) {
}
4-3.スマホ用レイアウトの確認方法
Chromeを使っている場合、Macであれば、
デベロッパーツールのToggle device toolbarをクリックすると、スマホやタブレットの画面サイズで表示を確認することができます。
また、上部のメニューから、いろんなスマホやタブレットのサイズを指定できます。
この機能を使って、スマホ用のレイアウトを確認してきましょう。
4-4.スマホ用のレイアウト
早速スマホ用のレイアウトを調整していきます。
まずは、PC用のレイアウトで、float設定して横並びにしていた箇所を縦並びに変更します。
@media only screen and (max-width: 680px) {
#site_logo {
float: none;
width: 100%;
}
#site_reserve {
float: none;
width: 100%;
}
.menu_box {
float: none;
width: 100%;
}
#access_map {
float: none;
width: 100%;
}
#access_txt {
float: none;
width: 90%;
}
}
あとは、スマホ用のレイアウトに合うように、各要素の幅やマージン、フォントサイズを微調整していきます。随時、ブラウザで画面を見ながら、値を調整していきましょう。
以下は私が調整した値です。皆さんもブラウザで表示を確認しながら、幅やマージン、フォントサイズなどを微調整してみてください。
更新：2019.07.28
・#concept h2のスタイルをh2全体を指定するように修正しました。(42行目〜44行目）
・.menu_boxのmarginを修正しました。(65行目）
@media only screen and (max-width: 680px) {
/* サイト共通コンテナ */
.container {
margin: 0 10px;
}
#site_logo {
float: none;
width: 100%;
}
#site_logo img {
width: 90%;
max-width: 420px;
}
#site_reserve {
float: none;
width: 100%;
font-size: 0.8em;
margin-top: 0;
margin-bottom: 10px;
}
.site_tel {
font-size: 1.2em;
}
nav a {
font-size: 0.8em;
}
#concept_logo {
width: 70%;
}
/*
#concept h2 {
font-size: 1.5em;
}
*/
h2 {
font-size: 1.5em;
}
#concept_icon {
width: 70%;
}
#concept p {
font-size: 0.8em;
width: 100%;
}
#menu_logo {
width: 70%;
}
.menu_box {
float: none;
width: 100%;
/*
margin: 0;
*/
margin: 0 0 30px 0;
}
.menu_box img {
max-width: 480px;
}
.menu_box ul {
margin: 0 30px;
}
#access_logo {
width: 70%;
}
#access_map {
float: none;
width: 100%;
}
#access_txt {
float: none;
width: 90%;
margin-left: 30px;
}
#access iframe {
width: 100%;
}
footer img {
width: 90%;
}
}
index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。
以上で、イタリアンレストランのホームページの完成です！
5.最後に
以上、実際にHTML＆CSSでイタリアンレストランのホームページを作成する方法を説明しました。
ここまでできれば、自分でどんどんホームページを構築できるようになります。
本記事で実装の流れを理解できたら、ぜひオリジナルデザインのホームページの作成にチャレンジしてみてください！
少しでも皆さんの参考になれば幸いです。
それでは！！
