2年 ago
1838 Views

出力ディバイスの画面サイズごとに異なるスタイルを適応する方法(スマホ対応)

css

先日グーグルさんが、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。
そうそう、スマホ対応かどうかって話。楽天もスマホユーザーが多くて店舗によっては50%以上スマホってとこも多くなってきましたよね。なので、今日はスマホ対応で必要なCSSメディクリについて説明します。

画面サイズに合わせてスタイルを変更するメディアクエリ(Media Queries)

スタイルの一部を変更する場合は、CSSファイル内にて@medeiaルールを使用することで対応できます。スタイル全体を変更したい場合は、link要素のmedeia属性を使った方法を使用することで適用されるCSSファイル自体を変更することが可能です。またスマホのタイプに合わせてディスプレイのみ適用させることも可能です。なお、画面サイズに応じてスタイルを変更した場合、当然デバイスの画面サイズに依存してしまうので、今後既存のデバイスと画面サイズが違う機種が出た際に意図してない表示になってしまったり、専用CSSを追加する必要性が発生してしまったりする可能性があるのでご注意ください。

■CSSソース1
@mediaルールを使用する場合は、規則集合を囲うようにして記述します。

■htmlソース1
link要素のmedia属性を使った方法の場合はhead要素内に記述

<link rel="stylesheet" href="./css/style.css" media="screen">
<!-- for smart phone -->
<link rel="stylesheet" href="sp.css" media="only csreen and (min-device-width: 320px) and (max-device-width: 1024px)">
<!-- for ipad -->
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
<!-- 1024px over -->
<link rel="stylesheet" href="w1024.css" media="only screen and (min-width: 1024px)">

■cssソース2
@mediaルールを使用してRetinaディスプレイのみにスタイルを適用させる場合

■htmlソース2
head内にlink要素にてretinaディスプレイのみにスタイルを適用させる場合

ご参考までに。

Article Categories:
html&CSS · スマホ対応
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ