ウィンドウサイズでCSSを切り替える方法
モニターのサイズにもよりますが、パソコンの場合は画面が大きいので今まで制作されてきた横幅1,000ピクセル以上のサイズでも画面全体を表示できますが、携帯電話やスマートフォンではその1/3の横幅しか表示できず横にスライドしなければなりませんでした。
ホームページにおいて、縦方向にある程度長いことは問題ないのですが、横にスライドすることはとてもストレスを感じるのでタブーとされています。
そして、Googleがスマホの普及率を考慮して、モバイル対応のサイトは検索エンジンの評価で優遇するという対応をとりました。
そのため、パソコンでも、タブレットでも、スマホ・携帯でも、それぞれの画面の横幅に収まるように改良しなければならず、その方法のひとつがウィンドウサイズを取得して読み込むCSSを切り替える方法です。
CSSを読み込むためのヘッダー内への記述
<link href="css/style.css" rel="stylesheet" media="all" type="text/css"> <link href="css/mobile.css" rel="stylesheet" media="all" type="text/css">
まずは<head>～</head>の中に、CSSを読み込む上記の記述をします。
上がPC用で、下がタブレット・スマホ・携帯用のCSSです。それぞれの環境に合わせてhrefの部分を変更してください。タブレット用も別に用意する場合はその分のCSSも必要となります。
パソコン用とモバイル用を同一CSSファイルに書き込むと長くなるので、今回は別々のファイルとしました。
もちろん、同一ファイルにすべて書き込んでも大丈夫です。私もワードプレスの時は子テーマのCSSファイル一つにまとめて書き込んでいます。
CSSにMedia Queriesを記述する
/* style.css（パソコン用CSSファイル） */
@media screen and (min-width: 768px){
/* パソコン用のスタイルを記述します。 */
}
/* mobile.css（タブレット・携帯・スマホ用CSSファイル） */
@media screen and (max-width: 797px){
/* モバイル用のスタイルを記述します。 */
}
パソコン用とモバイル用のCSSファイルを用意して、それぞれに上記をコピペし、カッコの中にスタイルを記述します。
これを『メディアクエリ』と言い、ウィンドウサイズを取得して読み込むCSSファイルを変えることができます。
気を付けて欲しいのは、画面が大きいパソコン用はmin-widthで、画面が小さい携帯・スマホ用はmax-widthとなっていることです。
上記の場合、768px以上でパソコン用CSSが適用され、767px以下では携帯・スマホ用CSSが適用されます。ご自身のパソコン用サイトの横幅に合わせて、それぞれ設定しましょう。
なお、パソコンとモバイルの両方に適用したいスタイルについてはカッコの外に記述するか、もう一つ別のCSSを用意して記述してください。
上記のようにCSSを分ける場合は、どちらか一方のCSSファイルのカッコ外に記述すれば、どちらにも適用されます。
以上、ウィンドウサイズで読み込むCSSを切り替える方法について説明してきましたが、パソコン・モバイル両対応にするには、更にヘッダー内に記述が必要です。
詳しくは、レスポンシブデザインにする方法をお読みください。
関連記事
『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードをHTMLファイルのヘッ...
グーグルやヤフーで検索した時、次の画像のように、タイトルの下に表示されるURLが日本語表示になっていることがあります。 これはパンくず...
パソコンでも、タブレットでも、スマホ・携帯でも、それぞれの画面サイズに合わせて表示するレスポンシブルデザインですが、視覚的にも検索エンジン...
グーグルの検索エンジンは、Googlebotと呼ばれるクローラーがウェブ中を駆け巡り、サイト情報を収集して持ち帰ってインデックスします。 ...
『サイトマップ』と聞くとサイト内に設置する目次的なページを想像する方が多いと思いますが、ここで説明するのはXMLファイル形式のサイトマップ...
最新記事
WordPressテーマ『Flash Works』の子テーマである「Move ...
WordPressテーマ『Flash Works』の子テーマである「Pop（ポ...
WordPressテーマ『Flash Works』の子テーマである「Zoom ...
WordPressテーマ『Flash Works』の子テーマである「Alpha...
WordPressテーマ『Flash Works』の子テーマ「Move（ムーブ...