マーカーネット株式会社

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

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

関連記事

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …

Movable Type6を操作してみました

Movable Type6を操作してみました

先日リリースされました、movable type6を操作していました。 – ダッシュボード グーグルアナリティクスをアカウント設定しますと、 サイト情報欄に、アクセスの情報が表示されます。 …

オンライン上でPDFファイルをWordファイルに変換する

オンライン上でPDFファイルをWordファイルに変換する

WEBディレクターとして働いていますと、PSDやPNGなどのデザインデータ以外にもパワーポイントやエクセル、PDFなどのファイルなどクライアント様からさまざまな素材をいただいたり、こちらが資料を作成し …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

【Vol.3】優れたキャッチコピーを見て、閃き力を上げよう!【ファッション編】

は~るがき~た、は~るがき~た♪ みなさまこんばんは。いかがお過ごしでしょうか? 桜の花が各地で満開を迎え、 日差しもあたたかくなり春を感じることが少しずつ増えていく毎日ですね。 春は出会いと別れの季 …