マーカーネット株式会社

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

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

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 画 …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …