Webデザインの基本は、誰でも利用ができて使いやすいことです。
実際にサイトのトップページを作りながら、これからWebデザインとWeb制作について学習しましょう。
以下は、猫カフェのトップページ作成のサポートです。
完成データはchap4-4でコピーできます。
次の受講に間に合わない場合や、どうしてもうまく表示できない場合は、コピーして使ってください。
演習で使用するフォルダとファイルを作成
「Web制作」フォルダに「nyanroom」フォルダを作成し、HTMLファイルを「index.html」で保存します。
Web制作フォルダ
nyanroom フォルダ（ルートフォルダ）
index.html（トップページ）
chap02
chap03
HTMLファイルの作成
「index.html」でファイルを保存したら、HTMLの基本構造を記述します。
タイトル文は「保護猫カフェ/にゃんルーム」とします。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>保護猫カフェ/にゃんルーム</title>
</head>
<body>
<body>
</html>HTMLの文章をコピー
Chap4-1で使用する文章です。コピーをして作成した「index.html」へ貼り付けましょう。
※ 動画の内容と一部、文章が異なる箇所がありますが、問題ありません。（住所・TELを変更しました）
index.htmlの文章（クリックで表示できます）
にゃんルームのロゴ
トップページ
お部屋のご案内
同居猫の紹介
カフェメニュー
保護猫カフェについて
ご予約・お問い合わせ
ネコの画像
にゃんルームは、あなたと猫だけのくつろぎスペース
猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。
お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。
早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。
同居中の猫ちゃんたち
ブウくん 3歳
エキゾチックショートヘアー
ブウくんの画像
ワラビくん 3歳
シンガプーラ
ワラビくんの画像
キイくん 2歳
スコティッシュフォールド
キイくんの画像
ミイちゃん 2歳
スコティッシュフォールド
ミイちゃんの画像
お部屋によって、待っている猫ちゃんが違います。
お部屋のご案内
今日はどの部屋でくつろぎますか？
3Fにゃんルーム
3Fにゃんルームの画像
3Fにゃんルームで待つ猫ちゃんは2匹。
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。
2Fにゃんルーム
2Fにゃんルームの画像
元気で遊び盛りの猫ちゃんが4匹。
広々としたリビングで思う存分、猫ちゃんたちと遊べます。
1Fにゃんルーム
1Fにゃんルーム画像
人懐っこい4匹の猫ちゃんがお出迎え。
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。
この他にも、お部屋は3室あります。
ご利用案内と料金について
猫が大好き！でも飼えない。
気に入った猫ちゃんと暮らしてみたい。
「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。
あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。
基本料金
基本60分でフリードリンク付きです。
一般の方は1000円、大学生は700円、高校生以下は500円となります。
最初の60分以降、30分ごとに300円の追加料金で予約できます。
お部屋によって、料金は変わりません
ご予約について
ご利用は、完全予約制です。
予約ページから、ご希望の日時とお部屋をご予約できます。
お食事について
お食事は、1Fにゃんルームのみのご利用となります。
お食事は別途料金が必要になります。
カフェメニューのページをご覧ください。
営業時間・交通アクセス
営業時間について
営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。
定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。
その他、年末年始等の営業につきましては、お知らせでご確認ください。
交通アクセス
所在地は、東京都新宿区西新宿1-x-x
電話番号は、01-2345-6789
新宿西口駅前、徒歩3分です。
東京駅からJR中央線で14分、上野駅からJR山手線で24分。
JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。
お車でお越しの方は、お近くのコインパーキングをご利用ください。
お知らせ
2022年10月1日
秋にピッタリな、スイーツとお食事はいかが？
食欲の秋の画像
2022年9月1日
読書の秋！ゆっくりと、読書をしながら…
読書の秋の画像
2022年8月1日
猫ちゃんたちも、暑さでぐったりしています。
夏の画像
2022年7月1日
猫ちゃんたちの夏ファッションが楽しめます。
ネコファッションの画像
2022年6月1日
雨の日は、ねこ部屋でゆっくりしませんか？
梅雨の画像
2022 © TOU-WEB文章に見出しをマークアップ
次の章立てを参考に、該当する文章へ見出しタグを記述していきましょう。
- にゃんルームは、あなたと猫だけのくつろぎスペース
- 同居中の猫ちゃんたち
- お部屋のご案内
- 3Fにゃんルーム
- 2Fにゃんルーム
- 1Fにゃんルーム
- ご利用案内と料金について
- 営業時間・交通アクセス
- 基本料金
- ご予約について
- お食事について
- お知らせ
See the Pen 4-1 by Rayout-gw (@Rayout-gw) on CodePen.
文章に段落・改行・各種リストタグをマークアップ
今回作成した完成例です。
See the Pen 4-2-2 by Rayout-gw (@Rayout-gw) on CodePen.
ブラウザで表示したときに表示が異なる場合は、その場所のタグやその前のタグをチェックしましょう