Youtube、画像のモバイル表示ではCSSに「max-width:100%」と付け加えておくと役立つかもしれない。

ページ

 

Youtube、画像のモバイル表示ではCSSに「max-width:100%」と付け加えておくと役立つかもしれない。

2013年4月23日火曜日
Youtube、画像のモバイル表示ではCSSに「max-width:100%」と付け加えておくと役立つかもしれない。

おそらく書くブロガーさんたちはモバイル用のブログ表示をしていると思います。今回の記事はブロガーTIPSです。画像やYoutube動画の表示を刷るときにCSSに入れておけばスッキリと表示できちゃうやつです。


あ、どうも、@kissatenです。


モバイル用表示

CSSを追加

PC表示の時とは違い、モバイルは画面サイズが色々あったりします。そんな画面サイズに合う魔法のCSSを紹介。

max-width:100%
をつけ加えればよいのです。

具体的には

img {
max-width:100%;
height:auto;
}

こんなかんじで設定します。

説明です。

「max-width」とは『最大この大きさまで表示していいですよ』という値です。PCで表示されている画像をそのままモバイル端末で表示されるとはみ出しやがります(物によっては収まる)。ブログサイズに収めたい場合に、「max-width」を設定すると『ブログの幅分が最大の画像の大きさだからね』という注意書きにもなります。

そしてこのままだと高さが揃わないので、「max-width」に対しての「height:auto」ということです。幅が決まってからの高さ設定です。コレで画像比率を損なわずにモバイルでちゃんと表示されます。要素は『img』です。

Youtubeの場合

実はYoutubeでも同様の事が可能です。
iframe{
max-width:100%;
height:auto;
}

Youtubeの場合は「iframe」を当ててやるのが正解です。これでiframeのYoutube埋め込みコードを入れても幅を調整されて表示されます。

Bloggerの場合

Googleのブログサービス、Bloggerのモバイルテンプレートは「.mobile」が必要になります。なので以下の様な設定を追記してあげると良いと思います。

.mobile img {
max-width:100%;
height:auto;
}
.mobile iframe{
max-width:100%;
height:auto;
}

これをCSSに追加してあげて下さい。

ちなみに

最大値を決める「max-width」の反対で最低値を決める「min-width」も存在します。「最低コレぐらいは表示して下さい」ってやつです。

いかがですか?

ブログのモバイル表示にちょっとしたTIPSです。知っていた人も知らなかった人も、コレは見ておいて良いと思いますよ。]]

ちなみに、CSSの節約方法として


img, iframe {
max-width:100%;
height:auto;
}

こういう感じで、「、(こんま)」を使ってあげると数行節約出来ますよ。「、(こんま)」の役割は「AND」と一緒だと思っていただけると良いと思います。複数同じ処理をさせるならコレを使いましょう!

管理人の一言

CSS節約したいけど何をいじっていいか正直わからん。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事