いろんな要素を楽にレスポンシブ化するために知っておきたいTips

この記事は約7分で読めます。

responsive

Googleがモバイルフレンドリーに関するアップデートを発表してからますます需要が高まっているレスポンシブデザイン。
市販されているWordpressなどのテンプレートなどでも、だんだんとデフォルトでレスポンシブ化されているものも増えてきました。

でも、勝手にレスポンシブ化されるからといって、いつものようにコンテンツを足していくと、画像が枠からはみ出たり、おかしな表示になってしまったりと、思わぬトラブルに巻き込まれがち。

この記事ではWeb屋さんとしてレスポンシブデザインをがっつり作りこんでいる人はもちろんのこと、そうした人々に作ってもらったものを使ってコンテンツを作っているけどハマってしまったという方に向けて、レスポンシブデザインのTipsをご紹介しています。

メディアクエリーとは?

レスポンシブデザインの基本ともいえるメディアクエリー。CSSに書いておくことで、「このウインドウ幅の時だけこのスタイルを適用させて!」と指示することができるコードになります。

例えばこういうコードがあったとします。

@media (max-width: 700px) {
	.sidebar {
	display:none;
	}

レスポンシブデザインでは、スマートフォンで表示したときに、サイドバーの存在が邪魔になることが多いです。
このコードを利用することで、ウインドウ幅が700px以下の時は「sidebar」というクラスの要素を非表示にすることができます。

極端な話、このメディアクエリーを使えば、PC用とスマホ用のソースコードを同じHTMLに書いておいて、メディアクエリーで丸々表示・非表示を切り替えるなんてこともできます。

でも、それは無駄にページ容量も食いますし、コンテンツの重複にもつながりますので、あまりおすすめはできません。
何より、工数が2倍かかります。

レスポンシブデザインでは基本的に、PCかスマホを基準にして一度CSSを組み、それに対して別のデバイスにて表示を変更したいという場合にメディアクエリーを利用して調整をかけるのが効率的です。

画像をレスポンシブ表示する

レスポンシブデザインに手を出した方がまず直面する問題、それが画像が画面をはみ出してしまう!という問題です(たぶん)。
特に、横幅が大きな画像に関しておこりがちな問題です。
解決策としては、ウインドウ幅に合わせて、画像を自動で縮小させるような処理を加えてやるのが得策です。

@media (max-width: 700px) {
	img.sample {
	width:100%;
	}
}

上記のようなコードを書いてあげることで、ウインドウ幅が700px以下の場合は「sample」というクラスがつけられた画像の横幅を画面(正確には親要素)の100%になるように、自動で調整してくれます。
注意するべきは、700pxに満たない、30pxとかの画像も、このコードを適用してしまうと横幅いっぱいに広がってしまうことでしょうか。
何でお前まで引き伸ばされとんねん!と心のなかで何度つぶやいたことでしょう。

とはいえ、コーディングをする身としては、できるだけ多くの画像をひとつのコードでいっぺんに処理したいもの。
そうしたときに使えるコードが以下のコードです。

@media (max-width: 700px) {
	img {
	max-width:100%;
	}
}

このコードを書いてあげることで、ウインドウ幅が700px以下の場合、すべての画像の最大の横幅がウインドウ幅(親要素)の100%になるように調整されます。
ポイントは、調整されるのは最大の横幅という点。
つまり、ウインドウ幅を超えないぐらいの小さな画像であれば、このCSSは適用されず、ウインドウからはみ出てしまうような大きな画像のみに適用されてくれるという優れものなのです。

CSSコードの最初にこのコードをとりあえず書いておき、それでも表示がおかしなところは個々に調整するという書き方が効率的ですよ。

youtube動画をレスポンシブ表示する

スマートフォンが普及してかなりの期間がたちますが、画面からはみ出ているyoutube動画を見かけることはいまでもまだまだ珍しくはありません。
youtubeでは、埋め込みコードを作る際に、横幅と縦幅を指定するオプションがあるのですが、これには「~%」という設定ができませんので、スマートフォンでもちゃんと表示させようと思うと、最初から小さなサイズを指定しておかないといけないと考える方もおられるのではないでしょうか。
私もこの問題には悩んでいろいろ調べたのですが、とてもお手軽なハックを紹介されている記事がありました。

HTML

<div class="move">
/*動画の埋め込みコード*/
</div>

CSS

.move{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.move iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

普通にwidth:100%だけを適用すれば横幅はちゃんとレスポンシブになってくれるのですが、縦幅はそのままのサイズでレスポンシブになってくれちゃうので、デフォルトのサイズによっては、動画なのかなんなのかよくわからない状況になってしまいます。
それを解決してくれるのが上記のコード。
paddingも%指定を使えることをうまく利用したナイスなハックです。

Facebookウィジェットをレスポンシブ表示する

youtubeがはみ出ているのとおなじくらい、Facebookもはみ出ている姿を良く見かけます。
はみ出ないように最初から幅が細いウィジェットにしているものも良く見られますが、周りのデザインと比較してう~んと首をかしげたくなるようなものも。

このFacebookウィジェットに関しては、iframeでFacebookサーバーから要素を引っ張ってきているのですが、ありがたいことに引っ張ってこられた要素にも丁寧にIDやクラスが付与されているので、これを利用して無理矢理CSSを書き換えます。

以下はFacebookウィジェットで「HTML5」形式を挿入した場合のCSSの記述です。

#fb-root {
	display: none;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
	width: 100% !important;
}

最近は勝手にレスポンシブになるものも

世の中もこうしたレスポンシブな流れに対応せざるを得なくなってきたのでしょうか、はじめからレスポンシブに対応しているウィジェットもちらほら見かけるようになりました。
モバイルフレンドリーアップデートの際に、というかそれよりも以前からレスポンシブデザインを推しまくっているGoogleですが、さすがこれだけレスポンシブデザインを推すだけのことはあり、自社サービスにも積極的にレスポンシブデザインを採用しています。

代表的なものは、Google Adsenseの貼り付けバナー。
「レスポンシブ」というバナーオプションを使用することで、ウインドウ幅に合わせて勝手に伸縮する広告バナーを設置することができます。
これまでは、レスポンシブデザインにGoogle Adsenseを貼り付ける際は、はじめから小さめのバナーを選択するか、横幅が大きいバナーを表示する際は非表示にするなどの対応を行っていたのですが、なにかと不便を感じていたのでこのオプション追加は非常にありがたいです。

こんな感じでレスポンシブデザインを利用する人にとって優しい世の中になればな~と思うのですが、やっぱりまだまだレスポンシブデザインは新しい技術。
しばらくの間はCSSと格闘しながらええ感じな表現を模索していくことになりそうですね。

スポンサーリンク

Facebookページに「いいね!」いただければ、このブログの最新情報をお届けします!