デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

初心者でもわかるHTML&CSS講座 イタリアンレストランホームページを作る

こんにちは、koheiです。
前回、イラストレーターでイタリアンレストランのデザインカンプを作成しましたので、今回は、実際にHTML&CSSを使って、ホームページを完成させたいと思います。

また、HTMLタグやCSSのプロパティなどの基本的な使い方を知らない方は、まずは、以下を参考にして、概要を理解してから取り組まれることをおすすめします。

スポンサーリンク

ダウンロードファイル

以下のサイトのひな形をベースに作成を進めますので、以下からダウンロードをしてください。

動画解説

動画による解説です。記事内容と合わせて参考にしてみてください!

イタリアンレストランホームページを作る【前編】

ボックスレイアウト設計〜HTML実装まで

イタリアンレストランホームページを作る【後編】

CSSでレイアウト調整〜スマホ用レイアウト

作成の流れ

ホームページ作成までの流れは以下となります。
①作成したデザインカンプ(サイト完成図)を元に、ボックスレイアウトを設計します。
HTMLで実装します。
CSSでレイアウト調整を行います。

1.ボックスレイアウト設計

まずは実装に入る前に、作成したデザインカンプをもとに、ボックスレイアウトを検討していきます。
※いきなり実装に入るよりも、どのようにボックスを配置させるのかを先に検討しておいたほうが、効率良く実装できます。

1-1.ヘッダー、メイン、フッター

ホームページは、基本的にヘッダー部、メイン部、フッター部の3つの領域に分割されます。したがって、まずは、header、main、footerの3つエリアに分割します。

1-2.ヘッダー内ボックスレイアウト

ヘッダー内は、サイトロゴ用のボックス(#site_logo)と予約連絡先のボックス(#site_reserve)、ナビゲーションメニューのボックス(nav)を配置します。
また、サイト内の左右マージン(余白)を調整するためのcontainerというボックスを配置します。
※名前の先頭に#が付いているのは、divタグのidです。.(ドット)が先頭に付いているのは、divタグのclassを表しています。

1-3.メイン内ボックスレイアウト

メイン内には、イメージ画像用のセクション(#main_image)、コンセプトセクション(#concept)、メニューセクション(#menu)、アクセスセクション(#access)の4つのセクションを設けます。
また、メニューセクション内には、各メニューを横並びに配置するためのボックス(.menu_box)を配置します。
アクセスセクション内には、マップとアクセス情報、連絡先を配置するためのボックス(#access_map,#access_txt,#access_reserve)を配置します。

1-4.フッター内ボックスレイアウト

フッター内は、ロゴとCopyright要素のみです。したがって今回は、特に新たなボックス要素は設けないこととします。

2.HTMLで実装

デザインカンプを元にレイアウト構成を決めたので、早速HTMLで各要素を配置していきましょう。
ダウンロードファイルに「00_サイトひな形」というフォルダがあります。その中のindex.htmlにコードを追加していきましょう。

2-1.ヘッダーの実装

まずは、ヘッダー部分から実装していきます。
ヘッダー内には、ロゴ、アクセス先、ナビゲーションメニューを配置します。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。

ヘッダー部レイアウト

2-2.メインの実装

次にメインを実装していきます。
まずは、mainタグと各セクションタグを作成しましょう。

2-2-1.メインセクションの実装

メインイメージエリアには、imgタグで画像を配置しましょう。

メインセクションレイアウト

2-2-2.コンセプトセクションの実装

コンセプトエリアには、コンセプトのロゴ、見出し、アイコン画像、テキストを配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。

コンセプトセクションレイアウト

2-2-3.メニューセクションの実装

メニューエリアには、メニューのロゴ、見出し、各メニューのリストを配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。

メニューセクションレイアウト

2-2-4.アクセスセクションの実装

アクセスエリアには、アクセスのロゴ、見出し、Googleマップのリンク、アクセス情報等を配置しましょう。
また、先ほどのレイアウト設計で決めたボックス名に従って、タグを埋め込んでいきましょう。

アクセスセクションレイアウト

※補足:
Googleマップのリンクは、以下サイトを参考にすれば良いと思います。
Google地図のリンクと埋め込み

2-3.フッターの実装

最後にフッター部を実装します。
フッター用の画像とコピーライトを配置します。

さて、ここまでできたら、ブラウザでindex.htmlを開いてみましょう。
CSSを定義していないので、とりあえず、配置した要素が単純に縦に並んでいるようなページが表示されるはずです。

3.CSSでレイアウト調整

いよいよ、CSSでレイアウト調整していきます。
ダウンロードファイルの「css」フォルダ内にあるstyle.cssファイルにコードを追加します。
まずは、body全体のフォント指定、サイトの左右余白用のボックスなどのサイト共通のスタイルを定義します。

3-1.ヘッダー内のレイアウト調整

続いて、ヘッダー内のレイアウトを調整していきます。

まずは、サイトロゴと予約連絡先の要素を横並びにしてみましょう。
以下のように、#site_logo と#site_reserveのfloatプロパティにleft、rightを設定して横並びにします。
また、float設定した後は、floatの解除が必要です。
今回は、float解除用のダミーのボックス要素を1つ追加して解除させたいと思います。以下のようにfloat解除を行うスタイル「.clearlist」を追加します。
そして、index.html側に、clearlistクラスのdiv要素を追加しましょう。

次にナビゲーションメニューのレイアウトを設定します。
ナビゲーションメニューは、横並びレイアウトなので、liタグにfloatのleftを設定します。
今回、floatの解除は、ulタグのafter疑似要素を使って解除しています。

ここまでできたら、一旦、index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。

3-2.メイン内のレイアウト調整

3-2-1.メインイメージセクションのスタイル

まずは、メインイメージのレイアウトを調整します。
メインイメージは、ブラウザの横幅全体に広げるように配置したいので、width:100%を指定しています。

3-2-2.コンセプトセクションのスタイル

コンセプトセクションのスタイルを定義していきます。
文字は、中央揃えにするので、text-align:centerを指定します。また、各要素のmargin等を微調整します。

更新:2019.07.28
#concept pのスタイルは設定不要でした。削除しています。

見出しのコンセプトの文字サイズを調整します。他のメニュー、アクセス等も共通で設定するので、h2タグのフォントサイズを標準サイズの2.0倍に設定しておきます。

3-2-3.メニューセクションのスタイル

メニューセクションのスタイルを定義していきます。
menu全体の背景色を設定し、文字を中央揃えにします。
また、.menu_boxを横並びに設定するため、float: leftを設定します。float解除は、clearlistで解除させますので、index.htmlにclearlistを追加します。

更新:2019.07.28
.menu_box ulのmargin-leftは、25px→3%に修正しました。

3-2-4.アクセスセクションのスタイル

続いて、アクセスセクションのスタイルを定義します。
access全体の文字を中央揃えにします。
また、access_mapとaccess_txtを横並びに設定し、float解除は、clearlistで解除させますので、index.htmlにclearlistを追加します。

ここまでできたら、一旦、index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。

3-3.フッター内のレイアウト調整

最後にフッターのレイアウトを定義していきます。
背景色と文字色、中央揃えに設定します。

index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。

4.スマホ用レイアウト(レスポンシブデザイン)

4-1.スマホ、タブレットの見え方を指定する

スマホ用のレイアウトを指定する前に、スマートフォンやタブレットで表示する際のサイトの見え方を指定しておきます。index.htmlのmeta要素として、viewportを記述しましょう。

・width=device-width:表示領域の幅は、端末画面の幅に合わせる
・initial-scale=1.0:初期のズーム倍率は、1.0倍

4-2.メディアクエリーを使って、CSSを切り替える

メディアクエリーという仕組みを使って、ウィンドウの横幅に応じて、スマホ用のレイアウトを適用します。
style.cssの今まで定義していたスタイルの下に以下を追記しましょう。
ウィンドウサイズが、0〜680pxのときだけ、以下の{}内に定義したCSSが採用されます。
したがって、この中にスマホ用のレイアウト定義を記載していくことでレイアウトを切り替えることができます。

4-3.スマホ用レイアウトの確認方法

Chromeを使っている場合、Macであれば、Command+option+iを押して、デベロッパーツールを開きます。※Windowsであれば、F12キーを押しましょう。
デベロッパーツールのToggle device toolbarをクリックすると、スマホやタブレットの画面サイズで表示を確認することができます。

また、上部のメニューから、いろんなスマホやタブレットのサイズを指定できます。

この機能を使って、スマホ用のレイアウトを確認してきましょう。

4-4.スマホ用のレイアウト

早速スマホ用のレイアウトを調整していきます。
まずは、PC用のレイアウトで、float設定して横並びにしていた箇所を縦並びに変更します。

あとは、スマホ用のレイアウトに合うように、各要素の幅やマージン、フォントサイズを微調整していきます。随時、ブラウザで画面を見ながら、値を調整していきましょう。
以下は私が調整した値です。皆さんもブラウザで表示を確認しながら、幅やマージン、フォントサイズなどを微調整してみてください。

更新:2019.07.28
・#concept h2のスタイルをh2全体を指定するように修正しました。(42行目〜44行目)
・.menu_boxのmarginを修正しました。(65行目)

index.htmlをブラウザで開いて、スタイルが反映されているか確認しましょう。

以上で、イタリアンレストランのホームページの完成です!

5.最後に

以上、実際にHTML&CSSでイタリアンレストランのホームページを作成する方法を説明しました。
ここまでできれば、自分でどんどんホームページを構築できるようになります。
本記事で実装の流れを理解できたら、ぜひオリジナルデザインのホームページの作成にチャレンジしてみてください!
少しでも皆さんの参考になれば幸いです。

それでは!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン