これまで作成してきた猫カフェトップページのCSSを、わかりやすくまとめておきました。
ここからは、以下のファイルを使って、レスポンシブデザインで作成していきます。
Contents
CSSの記述と管理
これまでは、HTMLやCSSの練習も兼ねて作成してきたので、CSSの記述と管理がうまく整理されていませんでした。
本来は、レスポンシブデザインで作成するという前提で、CSSファイルを管理する必要があります。
ここまで作成した内容を、ファイルに分けておきましたので、以下のボタンからダウンロードしておいてください。
CSSファイルとカンプファイルのDL
CSSファイルとカンプファイルを圧縮したファイルです
個別でDLする人はこの下のボタンです
フォルダ内のを整理
DLしたファイルは、「nyanroom」フォルダへ保存しますが、フォルダ内はこのように整理してください。
nyanroom
index.html
_index.html（index.htmlを別名保存したファイル）
room.html
destyle.css
layout.css
css（個別でDLした人は作成してください）
destyle.css（複製したファイル）
layout_pc.css（DLしたファイル）
index_pc.css（DLしたファイル）
images
オレンジのフォルダやファイルを使って作成します。
緑のファイルはこれまでの内容です。
ここから使うindex.htmlのソースコード
index.htmlが必要な人はコピーしてください
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保護猫カフェ/にゃんルーム</title>
<link href="css/destyle.css" rel="stylesheet">
<link href="css/layout_pc.css" rel="stylesheet">
<link href="css/index_pc.css" rel="stylesheet">
</head>
<body>
<header>
<p><img src="images/logo.png" alt="にゃんルームのロゴ"></p>
<nav>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="room.html">お部屋のご案内</a></li>
<li><a href="#">同居猫の紹介</a></li>
<li><a href="#">カフェメニュー</a></li>
<li><a href="#">保護猫カフェについて</a></li>
<li><a href="#">ご予約・お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>にゃんルームは<br>あなたと猫だけのくつろぎスペース</h1>
<div id="lead">
<p>猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。<br>
お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。<br>
早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。</p>
</div>
<section id="cont-1">
<div>
<h2>同居中の猫ちゃんたち</h2>
<dl>
<div>
<dt>ブウくん 3歳</dt>
<dd>エキゾチックショートヘアー</dd>
<dd><img src="images/neko_1.jpg" alt="ブウくんの画像"></dd>
</div>
<div>
<dt>ワラビくん 3歳</dt>
<dd>シンガプーラ</dd>
<dd><img src="images/neko_2.jpg" alt="ワラビくんの画像"></dd>
</div>
<div>
<dt>キイくん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd><img src="images/neko_3.jpg" alt="キイくんの画像"></dd>
</div>
<div>
<dt>ミイちゃん 2歳</dt>
<dd>スコティッシュフォールド</dd>
<dd><img src="images/neko_4.jpg" alt="ミイちゃんの画像"></dd>
</div>
</dl>
<p><a href="#" class="cont_link">お部屋によって、待っている猫ちゃんが違います。</a></p>
</div>
</section>
<section id="cont-2">
<div>
<h2>お部屋のご案内</h2>
<p>今日はどの部屋でくつろぎますか？</p>
<div id="room-container">
<section>
<h3><a href="room.html#room3">3Fにゃんルーム</a></h3>
<p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
<p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
</section>
<section>
<h3><a href="room.html#room2">2Fにゃんルーム</a></h3>
<p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
<p>元気で遊び盛りの猫ちゃんが4匹。<br>
広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
</section>
<section>
<h3><a href="room.html#room1">1Fにゃんルーム</a></h3>
<p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
<p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
</section>
</div>
<p><a href="#" class="cont_link">この他にも、お部屋は3室あります。</a></p>
</div>
</section>
<section id="cont-3">
<div>
<h2>ご利用案内と料金について</h2>
<p>猫が大好き！でも飼えない。<br>
気に入った猫ちゃんと暮らしてみたい。<br>
「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
<div id="info-container">
<section id="info-item1">
<h3>基本料金</h3>
<table>
<tr>
<th>一般</th><td>1,000円</td>
</tr>
<tr>
<th>大学生</th><td>700円</td>
</tr>
<tr>
<th>高校生以下</th><td>500円</td>
</tr>
</table>
<ul>
<li>基本60分でフリードリンク付きです。</li>
<li>最初の60分以降、30分ごとに300円の追加料金で予約できます。</li>
<li>お部屋によって、料金は変わりません</li>
</ul>
</section>
<div id="info-item2">
<section>
<h3>ご予約について</h3>
<p>ご利用は、完全予約制です。<br>
予約ページから、ご希望の日時とお部屋をご予約できます。</p>
</section>
<section>
<h3>お食事について</h3>
<p>お食事は、1Fにゃんルームのみのご利用となります。</p>
<p>お食事は別途料金が必要になります。<br>
<a href="#" class="cont_link">カフェメニューのページをご覧ください。</a></p>
</section>
</div>
</div>
</div>
</section>
<section id="cont-4">
<div>
<h2>営業時間・交通アクセス</h2>
<section id="open">
<h3>営業時間について</h3>
<div>
<p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
<p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
</div>
</section>
<section id="access-container">
<div>
<h3>交通アクセス</h3>
<dl>
<dt>所在地</dt>
<dd>東京都新宿区西新宿1-x-x</dd>
<dt>電話番号</dt>
<dd><a href="tel:01-2345-6789">01-2345-6789</a></dd>
</dl>
<ul>
<li>新宿西口駅前、徒歩3分</li>
<li>東京駅からJR中央線で14分</li>
<li>上野駅からJR山手線で24分</li>
<li>JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結</li>
</ul>
<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
</div>
<p>地図</p>
</section>
</div>
</section>
<section id="cont-5">
<div>
<h2>お知らせ</h2>
<dl>
<div>
<dt>2022年10月1日</dt>
<dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
<dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
</div>
<div>
<dt>2022年9月1日</dt>
<dd>読書の秋！ゆっくりと、読書をしながら…</dd>
<dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
</div>
<div>
<dt>2022年8月1日</dt>
<dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
<dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
</div>
<div>
<dt>2022年7月1日</dt>
<dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
<dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
</div>
<div>
<dt>2022年6月1日</dt>
<dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
<dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
</div>
</dl>
</div>
</section>
</main>
<footer>
<p>2022 © TOU-WEB</p>
</footer>
</body>
</html>スマートフォン用CSSファイルを作成
PC用のCSSファイルを複製・別名保存してスマートフォン用のCSSファイルを作成しましょう
nyanroom
css
destyle.css
layout_pc.css
layout_sp.css（複製・別名保存したファイル）
index_pc.css
index_sp.css（複製・別名保存したファイル）
スマートフォン用のCSSをHTMLへ<link>
<title>保護猫カフェ/にゃんルーム</title>
<link href="css/destyle.css" rel="stylesheet">
<link href="css/layout_sp.css" rel="stylesheet">
<link href="css/index_sp.css" rel="stylesheet">
<link href="css/layout_pc.css" rel="stylesheet">
<link href="css/index_pc.css" rel="stylesheet">
動画ではこの作業を忘れて後でやっていますが、このタイミングで<link>しておきましょう
モバイルファーストです !
PC用のCSSファイルにメディアクエリを記述
layout_pc.cssとindex_pc.cssの1行目と最後の行にメディアクエリの記述を追加しましょう
@media screen and (min-width:960px){
}スマートフォン用CSSファイルのレイアウトを編集
レイアウトサイズの変更
フルードグリッドで作成するので、pxを%に変更していきます。
スマートフォンの最小幅より大きい数値は、とりあえず全て100%に変更しておきましょう。
左右のパディングも幅に影響するので、コメントアウトで無効にしておきます。
編集・変更した行は目印として、左右のどちらかにインデントすると、あとでわかりやすくなります。
インデントは「 ctrl + [ 」で左に、「 ctrl + ] 」で右にズレます。（Macは ⌘ + ] ）
カッコはenterキーの隣です。
layout_sp.css
/* 共通デザイン */
body{
font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
line-height: 160%;
color: rgb(90,90,90);
}
img{
width:100%;
max-width: 100%;
height: auto;
}
h2{
font-size: 28px;
font-weight: bold;
color: rgb(185,125,75);
line-height: 150%;
text-align: center;
width: 100%;
margin: 0 auto 30px;
border-bottom: 2px solid rgb(185,125,75);
}
h3{
font-size: 21px;
padding-bottom: 10px;
}
.cont_link,
.cont_link:visited{
color: rgb(0, 60, 255);
text-decoration: underline;
}
/* 共通レイアウト */
header,
nav,
main,
section,
section>div,
footer{
width: 100%;
}
/* ヘッダー */
header{
background-color: rgb(210,180,175);
padding-top: 10px;
display: grid;
grid-template-columns: 1fr 280px 1fr;
grid-template-rows: 80px 1fr 1fr;
position: sticky;
top: 0;
box-shadow: 0px 1px 5px rgba(0,0,0,0.45);
}
header>p{
z-index: 10;
grid-area: 1 / 2 / 3 / 3;
}
/* ナビゲーション */
nav{
background-color: rgb(255,255,255);
padding-top: 30px;
grid-area: 2 / 1 / 4 / 4;
}
nav ul{
padding: 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
width:100%;
/* margin: auto; */
list-style-type: none;
}
nav a{
display: block;
padding: 20px 10px;
}
nav a:link,a:visited{
color:rgb(51,51,51);
text-decoration: none;
}
nav a:hover{
background-color:rgb(255,210,210) ;
color: rgb(200,50,0);
}
/* フッター */
footer{
background-color: rgb(210,180,175);
padding: 40px 0 25px 0;
}
footer p{
text-align: center;
font-size: 14px;
}index_sp.css
/* コンテンツ共通レイアウト・デザイン */
#cont-1,
#cont-2,
#cont-3,
#cont-4,
#cont-5{
background-image: url(../images/bg_1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
padding-top: 50vh;
}
#cont-1>div,
#cont-3>div,
#cont-5>div{
background-color: rgb(255,240,235);
padding: 80px 0;
}
#cont-2>div,
#cont-4>div{
background-color: rgb(255,255,255);
padding: 80px 0;
}
#cont-1 dl,
#room-container,
#info-container,
#open,
#access-container,
#cont-5 dl
{
width:100%;
/* margin: auto; */
display: flex;
justify-content: space-around;
flex-flow: row nowrap;
}
#cont-1 p,
#cont-2>div>p:last-of-type{
width: 100%;
/* margin: auto; */
text-align: right;
}
/* キービジュアル・キャッチ */
h1{
background-image: url(../images/bg_h1.jpg);
background-size: cover;
background-position: center;
background-attachment:fixed;
text-align: right;
font-size: 32px;
font-weight: bold;
padding: 60vh 5% 10vh 0;
color: rgb(255,255,255);
line-height: 140%;
text-shadow: 0px 0px 3px rgba(0,0,0,0.75);
}
/* リード文 */
#lead{
padding: 80px 0;
}
#lead p{
width: 100%;
/* margin: auto; */
background-image: url(../images/txtimg_1.jpg);
background-position: 100% 80% ;
background-repeat: no-repeat;
background-size: 385px auto;
/* padding: 160px 410px 160px 0; */
line-height: 40px;
}
/* 同居中の猫ちゃんたち */
#cont-1 dl{
margin-bottom: 80px;
}
#cont-1 dl div{
width: 23%;
display: flex;
flex-flow: column wrap;
}
#cont-1 dt{
order: 2;
text-align: center;
margin-bottom: 20px;
}
#cont-1 dd{
order: 3;
text-align: center;
margin-bottom: 20px;
}
#cont-1 dd:last-of-type{
order: 1;
text-align: center;
}
#cont-1 img{
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
}
/* お部屋のご案内 */
#cont-2{
background-image: url(../images/bg_2.jpg);
}
#cont-2 h2+p{
width:100%;
/* margin: 0 auto; */
text-align: center;
margin-bottom: 30px;
}
#room-container{
padding-bottom: 20px;
}
#room-container section{
width: 30%;
}
#room-container h3{
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
#room-container section:first-child h3{
background-image: url(../images/illust_4.png);
}
#room-container section:nth-child(2) h3{
background-image: url(../images/illust_2.png);
}
#room-container section:last-child h3{
background-image: url(../images/illust_3.png);
background-size: auto 80%;
}
#room-container img{
height: 200px;
object-fit: cover;
margin-bottom: 10px;
}
/* ご利用案内と料金 */
#cont-3{
background-image: url(../images/bg_3.jpg);
}
#cont-3>div>p{
width: 100%;
/* margin: auto; */
/* padding-right: 420px; */
padding-bottom: 40px;
background-image: url(../images/txtimg_2.jpg);
background-repeat: no-repeat;
background-position: right top;
background-size: 400px auto;
}
#info-container{
padding-top: 30px;
}
#info-item1,
#info-item2{
width: 45%;
}
#info-item1 table,
#info-item1 th,
#info-item1 td{
border: 1px solid rgb(60,60,60);
}
#info-item1 table{
width: 100%;
border-collapse: collapse;
background-color: rgb(255,255,255);
margin-bottom: 20px;
}
#info-item1 th,
#info-item1 td{
padding: 10px;
text-align: center;
}
#info-item1 th{
width: 150px;
text-align: left;
}
#info-item1 li{
font-size: 14px;
}
#info-item2 section:last-child{
padding-top: 30px;
}
/* 営業時間・交通アクセス */
#cont-4{
background-image: url(../images/bg_4.jpg);
}
#open{
display: block;
}
#open>div{
background-image: url(../images/illust_5.png);
background-repeat: no-repeat;
background-position: 20px top;
background-size: contain;
padding-left: 120px;
}
#open p{
margin-bottom: 10px;
}
#access-container{
padding-top: 30px;
}
#access-container div{
width: 310px;
}
#access-container dl{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-bottom: 10px;
}
#access-container dt{
flex: 0 1 30%;
}
#access-container dd{
flex: 0 1 70%;
}
#access-container ul{
list-style-type: disc;
padding-left: 25px;
margin-bottom: 10px;
}
#access-container>p{
width: 100%;
background-color: rgb(200, 200, 200);
}
/* お知らせ */
#cont-5{
background-image: url(../images/bg_5.jpg);
}
#cont-5 dl{
flex-flow: row wrap;
justify-content: space-between;
}
#cont-5 dl div{
width: 49%;
display: grid;
grid-template-rows: 40px auto;
grid-template-columns: 1fr 142px;
column-gap: 20px;
border-bottom: 1px dashed rgb(180,180,180);
padding-bottom: 10px;
margin-bottom: 30px;
}
#cont-5 dt{
font-size: 14px;
}
#cont-5 dd:first-of-type{
grid-row: 2/3;
grid-column: 1/2;
}
#cont-5 dd:last-of-type{
grid-row: 1/3;
grid-column: 2/3;
}
#cont-5 img{
height: 142px;
object-fit: cover;
object-position: bottom center;
}