レスポンシブとは？
サイトをいろんな画面サイズに対応させる事。
リセットCSS
ブラウザにはいろいろな種類があります。それぞれの表示違いをなくすためにリセットCSSを読み込んでおきます。
リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルです。
※リセットCSSは必ず自作CSSの上に入れてください。
リセットCSSの場合
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
ノーマライズCSSの場合
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
viewportの設定／HTML
viewportとはWebページの表示領域を指します。
viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになる。
HTMLのheadタグ内にmetaタグを記述
<meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエリの設定／CSS
レスポンシブデザインでは、デバイスの画面幅に応じて異なるデザインを記述する必要があります。
メディアクエリを使用することで、画面幅に応じてCSSを切り替えることができます。
メディアクエリではブレイクポイントと呼ばれる「分岐点」を設定し、分岐点を境目にしてCSSの記述内容を変化させます。
このコードはすでにあるcssファイルに追記しても、
スマートフォン用に新しくcssファイルを作りそちらに記述してもOKです。
サンプルCSS
@media screen and (max-width:480px){
/*画面幅が480pxまでの時*/
}
@media screen and (min-width:768px){
/*画面幅が768px以上の時*/
}
例 CSS
@media screen and (max-width:480px){
/*画面幅が480pxまでなら、文字を青色にする*/
p {
color: blue;
}
}
ナビゲーションメニューの例／CSS
●リストでメニューを作成
HTML
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
●Flexboxを使ったナビゲーションメニュー例
HTML
<nav>
<ul class="navbar">
<li><a href="#">HOME</a></li>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</nav>
CSS
nav {
background: #6699ff;
}
.navbar {
display:flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.navbar li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
background: #3366cc;
color: #fff;
}
スマホで見た時は縦に並ぶナビゲーション（メディアクエリ）
（ウインドウ幅が767px以下の時）
CSS
@media only screen and (max-width: 767px) {
.navbar {
flex-direction: column;
}
}
●ナビゲーションメニュー例2／Homeだけ左寄せにする場合
スタイルシートに以下を書き加える
CSS
.navbar li:first-child{
margin-right: auto;
}
画像（img）をレスポンシブ／CSS
CSS
img{
max-width:100%;
height:auto;
}
スマホとPCで表示・非表示を切り替える
画像、コンテンツや、様々な要素をPC・スマホで表示を切り替えることができます。
CSS
@media screen and (min-width: 768px) {
.sp {display:none;} /*PCで非表示にするスマホ用コンテンツ*/
}
@media screen and (max-width: 768px) {
.pc {display:none;} /*スマホ非表示にするPC用コンテンツ*/
}
PC／HTML パソコンで表示
<div class="pc">
<p>PCで表示</p>
<p><img src="cat.jpg" alt="ネコ"/></p>
</div>
SP／HTML スマホで表示
<div class="sp">
<p>【例】スマホで表示</p>
<p><img src="lion.jpg" alt="ライオン"/></p>
</div>
【例】パソコンで表示
【例】スマホで表示
TELリンクをPCで表示させない
電話のリンクをするとPCではリンク表示になってしまいます。
※PCの場合は電話が使えないのでスマホの時だけリンク出来るようにCSSに以下を入れてください。
Tel.000-000-0000
HTML
<a href="tel:000-000-0000">Tel.000-000-0000</a>
CSS
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
GoogleMapやYoutubeなどを表示する
地図やユーチューブ動画をページ内に表示する場合
CSS
.ggy {
position: relative;
width: 100%;
padding-top: 100%;
}
.ggy iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="ggy">
<iframe>～</iframe>
</div>