レスポンシブの技あれこれ
ここではレスポンシブウェブデザインでよく使われる、便利な技をご紹介しましょう。
ＰＣだけ、スマホだけの表示は display:none;
どんなに上手にレスポンシブに作ったとしても、どうしても「この部分はＰＣでしか表示できない」「スマホにだけこれを表示させたい」というのは出てきます。でもHTMLは一つだけ・・・
どうぞご安心ください。その要素にid（またはclass）をつけて、表示させたくない方のCSSに非表示（display:none;）と設定すればOKです。
（例）id=gmenuと設定した要素を非表示にする場合
#gmenu{
display:none;
}メニューボタンを固定位置や半透明に
小さなスマホの画面で、常時すぐにメニュを見つけられるようにすることは重要です。その方法として有効なのは、メニュを出すためのボタンを常時表示させておくこと。
スクロールしても動かないボタンを、画面の最上部、または最下部、あるいは右横などに、固定で表示させる方法がよく行われています。
方法としては、絶対位置指定（position: fixed;）を使用します。
（例）メニュボタン（#menub）を最上部の右から10pxに固定で表示する場合
#menub{
position: fixed;
top: 0;
right:10px;
}その際、ボタンの場所を占有してしまってもよいのですが、その分使用できる画面が小さくなってしまいますので、半透明ボタンにして、コンテンツに被せることで、表示領域を減らさずに済ませる方法もあります。
半透明は、#FFF000 のような16進表記はできず、rgbaプロパティ（赤、緑、青、透明度）で指定します。透明度は0～1で表し、0が完全に透明（無色）、1が完全に不透明、0.5が半透明です。
#menub{
background-color: rgba(179,207,216,0.7);
}※rgbの赤、緑、青の値は、下記のサイトなどで調べることができます。
→HTMLカラーコード
YouTubeの埋め込み（iframe）
WebサイトにYouTube等の動画を埋め込んでいる人は多いと思います。「埋め込みコード」をコピペして貼り付けているけれど、そのiframeには 「width="560" height="315"」などとサイズ指定してあるので、パソコンではちょうど良くても、スマホでは画面からはみ出してしまったりします。
動画の場合は、width=100%指定だけでは縦のサイズをうまく調整できません。
これをCSSでうまくレスポンシブ対応させる方法をご紹介します。
まずHTMLでは、<iframe>を<div></div>で囲み、任意のclass名をつけます。
例えば、<div class="douga">のように、dougaというクラス名をつけます。
そして、CSSに下記のように記述することで、横は100%、縦は動画の縦横比率（9:16）で表示することができます。
.douga {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.douga iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
スマホ対応簡単解説 ＜目次＞
