格安ホームページ制作のブリリアントワークスです。個人事業(SOHO)としての特長を活かし、格安価格・高品質にてご提供いたします。
ホームページ制作 岐阜(BW)
» » ウィンドウサイズでCSSを切り替える方法

ウィンドウサイズで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を切り替える方法について説明してきましたが、パソコン・モバイル両対応にするには、更にヘッダー内に記述が必要です。

詳しくは、レスポンシブデザインにする方法をお読みください。

関連記事

グーグルの検索エンジンは、Googlebotと呼ばれるクローラーがウェブ中を駆け巡り、サイト情報を収集して持ち帰ってインデックスします。 ...


『サイトマップ』と聞くとサイト内に設置する目次的なページを想像する方が多いと思いますが、ここで説明するのはXMLファイル形式のサイトマップで...


パソコンでも、タブレットでも、スマホ・携帯でも、それぞれの画面サイズに合わせて表示するレスポンシブルデザインですが、視覚的にも検索エンジン的...


『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードをHTMLファイルのヘッ...


ホームページを作ったら、ぜひ利用したいのがサーチコンソール(Search Console)です。 以前はウェブマスターツール(Webmas...



コメントする

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

最新記事

Homepage

パンくずリストを構造化にすると、検索結果の下に表示されるURLがカテゴリ名にな...

WordPress

ワードプレスでpost classを使うと、さまざまなクラスと同時にhentr...

WordPress

ワードプレスには自動でPタグを入れる機能がありますが、場合によってはこれがデザ...

検索フォーム

コンテンツ

カテゴリ