マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEB制作

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

投稿日:2014年8月15日 更新日:

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。
かくいうこのブログもレスポンシブ対応しています。

WEB制作スタッフBLOG

レスポンシブサイトを作る時には
デザイン面等でも気を付ける事は幾つかありますが、
今回はhtmlソースのみでの私が考える最も重要で
私が最低限やっていることをご紹介します。

X-UA-Compatibleの指定

X-UA-Compatibleの指定でIEのレンダリングモードを制御します。
私はこれが一番重要だと思います。

記述例

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

下記の様に他にも指定方法は色々ありますが、
私は上記の指定をよく使っています。

IE8のレンダリングモードで表示させる記述例

<meta http-equiv=”X-UA-Compatible” content=”IE=8″>

viewportの指定

記述例

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

viewportの指定は様々な記述方法がありますが、
レスポンシブサイトの場合はリキッドレイアウトである事が多いと思いますので
私はこの記述で殆どの場合は問題ないかと思います。
サイトによってuser-scalable=noを追加する位でしょうか。

IEにhtml5とcss3を対応させる

記述例

<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
<script src=”js/css3-mediaqueries.js”></script>
<![endif]–>

html5shiv ダウンロードページ
css3-mediaqueries-js ダウンロードページ

あとはコーディングを進めて行けばO.K.です。
以上、ご参考までにどうぞ。

-WEB制作

執筆者:


comment

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

関連記事

え、うそ、なんか今っぽい。

え、うそ、なんか今っぽい。Photoshopで写真をDuo Toneにする方法 http://www.markernet.co.jp/blog/2015/09/02/post-6033/ Facebo …

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

GoogleのMatt Cutts氏が、ペンギンアップデートver2.1を実行することをTwitter上で発表しました。 検索順位への影響は全体の1%以下とのことで、規模は大規模ではなさそうなことがう …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …

【Vol.5】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

冬っ子のわたくし、この暑さもう限界です 皆様こんにちは。いかがお過ごしでしょうか? 真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。   明日から気温が落ち着くようで …