マーカーネット株式会社

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

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

関連記事

Laravel SocialiteでGitHubを利用した認証

Lravel SocialiteでGitHubを利用したOAuthによる認証の手順を紹介します。 1. GithubでOAuthアプリケーションを作成 GitHubにログインし、 [Settings] …

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

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

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

参考になるスマホサイト

皆さん・・・ こんばんは・・・・ webデザインを新人デザイナーKです・・・ 何故私がこんなに落ち込んでいるかというと・・・最近、5kgも太っ”#$#”$!!! ことではなく! 最近、スマホのデザイン …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

初心者向けWEBデザイン力強化トレーニング法

学生時代デザインを勉強してきて、いいものを作る、作れる自信を持っている新人さんが驚くことは先輩デザイナーの圧倒的なスピードだと思います。 社会に出ると当然「納期」があり、「自分のペースで」なんてことが …