CSSの継承・追加・上書きは、レスポンシブでも重要になります。
継承・追加・上書きを、より理解することが目的です。
01:22あたりで、スマートフォン用CSSのプレビュー画面を表示しているはずが、PC用のプレビュー画面で説明していました。
疲れていたんです。軽く流してください…
sp.cssを継承しながらtab.cssで追加・上書き
タブレット用のレイアウトを完成させる
作業の基本は、sp.cssからtab.cssへ変更がある部分を、コピーして書き換えるだけです。
VScodeで画面を分割して作業すると便利です
@media screen and (min-width:560px){
div{
grid-template-rows: 20vh 20vh 120vh 10vh;
}
header{
text-align: center;
background-color: rgb(0,0,0);
}
nav{
grid-row: 2/3;
}
main{
grid-row: 3/4;
}
}sp.cssとtab.cssを継承しながらpc.cssで追加・上書き
動画では「sp.css」からコピーして書き換えていますが、tab.cssで追加した部分がある場合は、それも継承されるので注意が必要です。
asideが非表示だったのでdisplay:blockで表示に変えるのがポイントです
@media screen and (min-width:960px) {
div{
width:95%;
margin: auto;
grid-template-rows: 20vh 5vh 65vh 10vh;
grid-template-columns: 1fr 280px;
}
header{
grid-column: 1/3;
background-color: rgb(255,240,235);
}
nav{
grid-column: 1/3;
}
aside{
display: block;
grid-row: 3/4;
grid-column: 2/3;
}
footer{
grid-column: 1/3;
}
}PC用から作成した場合の手順
Gridの練習で作成した「3-4.html」を使って、PC用からタブレット、スマートフォン用のCSSを作成します。
作業の手間はかかりますが、継承・追加・上書きの練習になります。
ただ、かなり複雑になるので注意 !
Chap15
3-4.html（gridの練習で作成したファイル）
pc.css（HTMLに記述のCSSをコピーして作成）
sp.css（pc.cssを別名保存または複製して作成）
tab.css（sp.cssを別名保存または複製して作成）
3-4.htmlのCSSをコピーしてpc.cssを作成
@media screen and (min-width:960px){
body{
margin: 0;
}
div{
width:95%;
margin: auto;
/* display:grid; */
grid-template-rows:20vh 5vh 65vh 10vh;
grid-template-columns:auto 280px;
}
header{
grid-row: 1/2;
grid-column: 1/3;
background-color:rgb(175,210,230);
}
nav{
grid-row: 2/3;
grid-column: 1/3;
background-color:rgb(120,210,110);
}
aside{
display: block;
grid-row: 3/4;
grid-column: 2/3;
background-color:rgb(255,230,175);
}
main{
grid-row: 3/4;
grid-column: 1/2;
background-color:rgb(255,205,200);
}
footer{
grid-row: 4/5;
grid-column: 1/3;
background-color:rgb(175,210,230);
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridLayout練習</title>
<link rel="stylesheet" href="pc.css">
</head>3-4.htmlのCSS部分は削除して、代わりに<link>で参照するのを忘れないように !
pc.cssを別名保存または複製してsp.cssを作成
pc.cssの内容をsp.cssで書き換えていきます。
プロパティは削除せずに、CSSのコメントアウトを使って無効にするのがポイントです。
無効にする文章をクリック、またはドラッグして「ctrl+/」で無効・解除できます
HTMLもコメントアウトが使えます
1カラムでサイズを変更し、asideを非表示、ナビとメインのレイアウトを変更します。
body{
margin: 0;
}
div{
width:100%;
/* margin: auto; */
display:grid;
grid-template-rows:20vh 120vh 20vh 10vh;
grid-template-columns:100%;
}
header{
grid-row: 1/2;
grid-column: 1/2;
background-color:rgb(175,210,230);
}
nav{
grid-row: 3/4;
grid-column: 1/2;
background-color:rgb(120,210,110);
}
aside{
display: none;
/* grid-row: 3/4;
grid-column: 2/3;
background-color:rgb(255,230,175); */
}
main{
grid-row: 2/3;
grid-column: 1/2;
background-color:rgb(255,205,200);
}
footer{
grid-row: 4/5;
grid-column: 1/2;
background-color:rgb(175,210,230);
}メディアクエリは必要ないので削除してください。
完成バージョンなので、動画と一部違います。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridLayout練習</title>
<link rel="stylesheet" href="sp.css">
<link rel="stylesheet" href="pc.css">
</head>動画では忘れてたけど、<link>忘れないように !
sp.cssを別名保存または複製してtab.cssを作成
動画では作成手順の解説用なので、中途半端に作成してから複製していますが、本当なら完全に完成してから複製しないといけません。
sp.cssの内容をtab.cssで書き換えていきます。
継承部分はコメントアウトを使って無効にし、プロパティの追加や値の上書きをしながら、タブレット用のデザインを作成します。
1カラムのサイズを変更し、ナビとメインのレイアウトが変わるだけで、あとは無効です。
@media screen and (min-width:560px){
/* body{
margin: 0;
} */
div{
/* width:100%;
margin: auto;
display:grid; */
grid-template-rows:20vh 20vh 120vh 10vh;
/* grid-template-columns:100%; */
}
/* header{
grid-row: 1/2;
grid-column: 1/2;
background-color:rgb(175,210,230);
} */
nav{
grid-row: 2/3;
/* grid-column: 1/2; */
/* background-color:rgb(120,210,110); */
}
/* aside{
display: none;
grid-row: 3/4;
grid-column: 2/3;
background-color:rgb(255,230,175);
} */
main{
grid-row: 3/4;
/* grid-column: 1/2; */
/* background-color:rgb(255,205,200); */
}
/* footer{
grid-row: 4/5;
grid-column: 1/2;
background-color:rgb(175,210,230);
} */
}メディアクエリの追加を忘れずに !
継承される部分だけコメントアウトで無効にし、変更するところは上書き・追加しながら、タブレットのデザインを完成させていきます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridLayout練習</title>
<link rel="stylesheet" href="sp.css">
<link rel="stylesheet" href="tab.css">
<link rel="stylesheet" href="pc.css">
</head>モバイルファーストで<link>を挿入していきます！
sp.cssやtab.cssを参考にpc.cssを修正
sp.cssやtab.cssの内容を元に、pc.cssを修正していきます。
継承部分はコメントアウトを使って無効にし、プロパティの追加や値の上書きをしながら、PC用のデザインを作成します。
基本はtab.cssと同じところを無効にしていく作業です
2カラムになるので、grid-columnを上書きするように、他の共通部分を無効にします。
@media screen and (min-width:960px){
/* body{
margin: 0;
} */
div{
width:95%;
margin: auto;
/* display:grid; */
grid-template-rows:20vh 5vh 65vh 10vh;
grid-template-columns:auto 280px;
}
header{
/* grid-row: 1/2; */
grid-column: 1/3;
/* background-color:rgb(175,210,230); */
}
nav{
/* grid-row: 2/3; */
grid-column: 1/3;
/* background-color:rgb(120,210,110); */
}
aside{
display: block;
grid-row: 3/4;
grid-column: 2/3;
background-color:rgb(255,230,175);
}
/* main{
grid-row: 3/4;
grid-column: 1/2;
background-color:rgb(255,205,200);
} */
footer{
/* grid-row: 4/5; */
grid-column: 1/3;
/* background-color:rgb(175,210,230); */
}
}猫カフェモPCカラツクッテマシタヨ