20200707 メディアクエリからのスマホサイトの作成・ヒーロー画像について max-width, min-width, vw,vh,word-break:break-all;
スマホサイトの作成
↓画面表示が480px以下になると背景色がオレンジに変化する
ーーーCSSーーー
/* 画面幅480pxまで：スマホデザイン */
@media screen and (max-width: 480px) {
body {
background-color: orange;
}
注意
html headタグに
<meta name="viewport" content="width=device-width, initial-scale=1.0">
をいれること。
VScodeは！で反映されるが他のテキストエディタだと入力し忘れがち
メディアクエリを利用した表示の切り替え
表示させたい要素にpc、もしくはspを入力する
→これによってスマホ画面になったときに消しとばしたい要素を指定することが可
ex)
<head class="pc">
-CSS－
/*パソコン画面の時に表示*/
.pc {
display: block;
}
.sp {
display: none;
}
/*スマホ画面の時に表示*/
@media screen and (max-width: 480px) {
.pc {
display: none;
}
.sp {
display: block;
}
}
スマホ画面における文字サイズの指定
使用単位 vw（横）とvh（縦）
----------------100vw-------------|
|
|
|
100vh
|
|
|
|
使用する際の注意
headタグにmetaタグの[viewport]を必ず使用すること。
VScodeは！で入力される
〇単位について
・vw(Viewport Width)
表示領域（viewport）の幅を基準
1vwはviewportの幅の1%に相当
・vh(Viewport Height)
表示領域（viewport）の高さを基準
1vhはviewportの高さの1%に相当する
ヒーロー画像について
background-attachment：fixed→背景画像の固定化
↑※iphoneのバグで不具合を起こすことがあるらしい
background-attachment: scroll→背景画像が一緒にスクロールするようになる
画面サイズによって読み込むCSSファイルの切り替え
html
<head>
<link rel="stylesheet" href="css/pc.css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:480px)">
</head>
media="screen and (max-width:480px)"を切り替えた時に読み込ませるCSSファイルのリンクタブに書き込むことによって、
表示サイズ480ｐｘ以下になった時にmobile.cssを読み込むようになる。
※便利そうに見えるが実務ではCSSで@mediaを使うパターンが主流らしい
PCファースト・モバイルファーストとは
基準になるデザインでどちらかが決まる。
☆PCファースト
画面が小さくなるほどデザインが変わるパターン
ex)
@media screen and (max-width: 1024px) {
color: green;
}
}
@media screen and (max-width: 768px) {
p {
color: orange;
}
}
@media screen and (max-width: 480px) {
p {
color: gold;
}
}
☆モバイルファースト
画面が大きくなるほどデザインが変わるパターン
ex)
@media screen and (min-width:480px) {
p {
color: green;
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
color: orange;
}
}
@media screen and (min-width:1024px) {
p {
color: gold;
}
}
スマホサイト作成の手順
①～⑩をCSSの@media screen and (max-width: ～px)以下に記述
①width：～ｐｘをautoに切り替えたものを記述
②min-widthを0に切り替えたものを記述
③display:flexをblockにする
④float指定をnoneにする
⑤PCのみ表示・スマホのみ表示対応
＝＝必要があれば＝＝
⑥table pre等の対応 親グループにoverflow:auto;
⑦URLの強制改行 word-break:break-all;
⑧微調整
文字の大きさをvwで統一 だいたい5vw
⑨余白調整
左右→vw
上下→vh
⑩スマホ用デザイン適用
-----便利機能-----
・VScode
ctr+F→検索機能
スマホサイト作成の際、＠media追記時に使うと捗る
f12で検証ツールを出した状態で
ctr+shift+p→FULLと入力
→ページ全体のスクショ
これで保育園のサイトを撮っておこう
-----宿題-----
小児科医院
幼稚園保育園
のサイトを見ておくこと。
疲労抜きも自己管理のうち。
体調崩さないように今日は思い切ってしっかり寝る
