格安ホームページ制作のブリリアントワークスです。個人事業(SOHO)としての特長を活かし、格安価格・高品質にてご提供いたします。
ホームページ制作 岐阜(ブリリアントワークス)
HOME » ホームページ制作 » ウィンドウサイズで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を切り替える方法について説明してきましたが、パソコン・モバイル両対応にするには、更にヘッダー内に記述が必要です。

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

関連記事

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


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


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


インターネットエクスプローラ(IE)やグーグルクローム(Google Chrome)などのブラウザでサイトを見るとき、アドレスバーやタブに...


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



コメントする

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

最新記事

WordPressテーマ『Flash Works』の見出しタグ

有料WordPressテーマ『Flash Works』の見出しタグ(Hタグ)に...

WordPressテーマ『Flash Works』のメニュー設置方法

有料WordPressテーマ『Flash Works』のメニュー設定方法につい...

WordPressテーマ『Flash Works』のグローバルナビゲーション

有料WordPressテーマ『Flash Works』のグローバルナビゲーショ...

WordPressテーマ『Flash Works』のウィジェットエリア

有料WordPressテーマ『Flash Works』には、パソコン・タブレッ...

WordPressテーマ『Flash Works』のアップデート

有料WordPressテーマ『Flash Works』のアップデート方法につい...

検索フォーム

WordPressテーマ『Flash Works』

コンテンツ

カテゴリ