猫カフェページで、画像の取り扱いや表示方法などを演習します。
文章の一部として表示する画像と、デザイン目的で使用する画像について理解することが目的です。
Contents
猫カフェ「にゃんルーム」で使用する画像
ダウンロードしたファイルは「nynroom」フォルダ内へ保存します。
個別でダウンロードした人は、「nyanroom」フォルダを作成して保存してください。
web制作
nyanroom
images（個別でダウンロードした人は作成）
ダウンロードした画像ファイル（30枚）
圧縮ファイルしたzipファイルをダウンロードする場合は、
下のダウンロードボタンを押してください。
個別ダウンロードはココをクリックして表示
画像ファイルは必ず「images」フォルダへ保存しましょう
前回までのHTML完成データ
ここからは、前回作成した「index.html」を引き続き使用して作成します。
まだ作成途中の人等は、まず「index.html」完成させるか、この下のソースコードで作業を進めてみてください。
（完成した「index.html」を使う場合は、作成中の「index.html」は別名で保存しておくと良いでしょう）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>保護猫カフェ/にゃんルーム</title>
<style>
body{
font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
line-height: 100%;
}
ul{
padding: 0;
display: flex;
justify-content: space-around;
width:960px;
margin: auto;
background-color:rgb(90, 140, 120);
list-style-type: none;
}
</style>
</head>
<body>
<p>にゃんルームのロゴ</p>
<ul>
<li>トップページ</li>
<li>お部屋のご案内</li>
<li>同居猫の紹介</li>
<li>カフェメニュー</li>
<li>保護猫カフェについて</li>
<li>ご予約・お問い合わせ</li>
</ul>
<p>ネコの画像</p>
<h1>にゃんルームは、あなたと猫だけのくつろぎスペース</h1>
<p>猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。<br>
お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。<br>
早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。</p>
<h2>同居中の猫ちゃんたち</h2>
<dl>
<dt>ブウくん 3歳</dt>
<dd>エキゾチックショートヘアー</dd>
<dd>ブウくんの画像</dd>
<dt>ワラビくん 3歳</dt>
<dd>シンガプーラ</dd>
<dd>ワラビくんの画像</dd>
<dt>キイくん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd>キイくんの画像</dd>
<dt>ミイちゃん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd>ミイちゃんの画像</dd>
</dl>
<p>お部屋によって、待っている猫ちゃんが違います。</p>
<h2>お部屋のご案内</h2>
<p>今日はどの部屋でくつろぎますか？</p>
<h3>3Fにゃんルーム</h3>
<p>3Fにゃんルームの画像</p>
<p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
<h3>2Fにゃんルーム</h3>
<p>2Fにゃんルームの画像</p>
<p>元気で遊び盛りの猫ちゃんが4匹。<br>
広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
<h3>1Fにゃんルーム</h3>
<p>1Fにゃんルーム画像</p>
<p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
<p>この他にも、お部屋は3室あります。</p>
<h2>ご利用案内と料金について</h2>
<p>猫が大好き！でも飼えない。<br>
気に入った猫ちゃんと暮らしてみたい。<br>
「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
<h3>基本料金</h3>
<p>基本60分でフリードリンク付きです。<br>
一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
<p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
<p>お部屋によって、料金は変わりません</p>
<h3>ご予約について</h3>
<p>ご利用は、完全予約制です。<br>
予約ページから、ご希望の日時とお部屋をご予約できます。</p>
<h3>お食事について</h3>
<p>お食事は、1Fにゃんルームのみのご利用となります。</p>
<p>お食事は別途料金が必要になります。<br>
カフェメニューのページをご覧ください。</p>
<h2>営業時間・交通アクセス</h2>
<h3>営業時間について</h3>
<p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
<p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
<h3>交通アクセス</h3>
<p>所在地は、東京都新宿区西新宿1-x-x<br>
電話番号は、01-2345-6789</p>
<p>新宿西口駅前、徒歩3分です。<br>
東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
<h2>お知らせ</h2>
<dl>
<dt>2022年10月1日</dt>
<dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
<dd>食欲の秋の画像 </dd>
<dt>2022年9月1日</dt>
<dd>読書の秋！ゆっくりと、読書をしながら…</dd>
<dd>読書の秋の画像</dd>
<dt>2022年8月1日</dt>
<dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
<dd>夏の画像</dd>
<dt>2022年7月1日</dt>
<dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
<dd>ネコファッションの画像</dd>
<dt>2022年6月1日</dt>
<dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
<dd>梅雨の画像</dd>
</dl>
<p>2022 © TOU-WEB</p>
</body>
</html>ロゴ画像を表示
<body>
<p><img src="images/logo.png" alt="にゃんルームのロゴ"></p>うまく表示できなかった人は、下のコードを参考に確認してください
「同居中の猫ちゃんたち」の画像を表示
<h2>同居中の猫ちゃんたち</h2>
<dl>
<dt>ブウくん 3歳</dt>
<dd>エキゾチックショートヘアー</dd>
<dd><img src="images/neko_1.jpg" alt="ブウくんの画像"></dd>
<dt>ワラビくん 3歳</dt>
<dd>シンガプーラ</dd>
<dd><img src="images/neko_2.jpg" alt="ワラビくんの画像"></dd>
<dt>キイくん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd><img src="images/neko_3.jpg" alt="キイくんの画像"></dd>
<dt>ミイちゃん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd><img src="images/neko_4.jpg" alt="ミイちゃんの画像"></dd>
</dl>うまく表示できなかった人は、下のコードを参考に確認してください
「お部屋のご案内」の画像を表示
<h2>お部屋のご案内</h2>
<p>今日はどの部屋でくつろぎますか？</p>
<h3>3Fにゃんルーム</h3>
<p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
<p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
<h3>2Fにゃんルーム</h3>
<p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
<p>元気で遊び盛りの猫ちゃんが4匹。<br>
広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
<h3>1Fにゃんルーム</h3>
<p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
<p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>うまく表示できなかった人は、下のコードを参考に確認してください
「お知らせ」の画像を表示
<h2>お知らせ</h2>
<dl>
<dt>2022年10月1日</dt>
<dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
<dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
<dt>2022年9月1日</dt>
<dd>読書の秋！ゆっくりと、読書をしながら…</dd>
<dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
<dt>2022年8月1日</dt>
<dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
<dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
<dt>2022年7月1日</dt>
<dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
<dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
<dt>2022年6月1日</dt>
<dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
<dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
</dl>うまく表示できなかった人は、下のコードを参考に確認してください
デザインとして使う画像は背景画像で表示
デザインとして使う画像は、CSSで背景画像として表示します。
背景画像をどのタグに表示するかは、一番関係が深いタグで考えると良いでしょう。
h1{
background-image: url(images/bg_h1.jpg);
background-size: cover;
background-position: center;
padding: 60vh 0 0 0;
}background-image、background-positionプロパティはセットで使います。
背景画像を表示する領域は、padding（余白）またはheight（高さ）プロパティを使います。
背景画像の追加オプションとしてbackground-sizeプロパティを覚えると便利です。
背景画像を表示するときに使うプロパティは、セットで覚えるといいでしょう