レスポンシブ対応におけるCSSの扱いについて

こんにちはスウェルデザインのWです。

SEO対策の一環としてもレスポンシブデザインは避けられないですよね

このたび今更ながら初めてレスポンシブ対応のHPを作成いたしました。

元々レスポンシブ対応にすることを見越していない完成した後のHPでも、ある程度頑張ればCSSを2種類追加する事で各端末用に形を変えることができました。

最初からレスポンシブデザインをふまえたレイアウトをしていればよかったのですが、今回はあくまでその前提がないHPを代表に記事を書いていきます。

まずは、HTMLのheaderに画面サイズ別にCSSを読み込む読み込む為

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

を挿入しCSSを3種記述します。

<!-- PC用CSS -->
<link rel="stylesheet" media="all" type="text/css" href="PC.css" />

<!-- tablet用CSS -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />

<!-- smartphone用CSS -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />

三種類のCSSにはそれぞれ専用のスタイルを書き込んでいきます。

※この時注意して欲しいのがCSSは上書きでスタイルが変わっていくので

必ず記述内容が多いスタイル（※通常であればデフォルトのCSS。この場合PC用）を上から順に書いてください。

次に各CSSファイルの一番上に下記の記述をします。

｛｝の中に通常通りのCSSを書いていってください。

@media screen and (min-width: 769px){

box { width: 100%; }

などスタイルを記入していく


}

 赤字の部分は各端末向けによって異なります

・PCなどデフォルトのCSSの場合

min-width: 769px

・タブレット用のCSSの場合

max-width: 768px

・スマホ用のCSSの場合

min-width: 769px

以上の追加のみでレスポンシブ対応完了です！

他にも様々な方法がありますが上記の内容が一番必要技術も少ないので

簡単に実装できるでしょう。

注意して頂きたい点としては、同じ記述を各CSSでするのは無意味なので

デフォルトとするCSSから変更したい点だけを追記していく形でタブレットとスマホ用のCSSを作成してください。

表示させたくないソースに対してはdisplay:noneなどを駆使して基本のCSSで応用可能です。

ご活用ください。