目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

IE8より前のブラウザでレスポンシブらせる時のメモ

このエントリーをはてなブックマークに追加

こんにちは!銀ねこです。

最近は今更レスポンシブデザインを勉強会してます。笑
HTML5やCSS3とは無縁の今更なテーブルレイアウト大好きなWebショップに務めてて、最近自社サイトをせっかくレスポンシブに作り直してもらったにもかかわらず、バナー差し替えの時にフルードならないように設定したせいで、レイアウトがおかしくなっていることを発見。 これじゃいかんっということで本腰を入れて取り組もうと思います。

メディアクエリでデバイスの幅に最適なレイアウト

Webページと言っても最近はPCだけじゃなく、スマホ、タブレットなんかにもデザインを対応しないといけない大変な時代。
サイトによってはそれぞれ最適なページを用意して、JavaScriptやPHPなんかで切り替えて表示を変えるなどしてます。
そんなことしてちゃ更新のたびに手間と時間がかかる!…ってことで、同じページで横幅によってレイアウトを切り替える方法の一つがメディアクエリです。
おさらい的ですがCSSで幅ごとに(ブレークポイント)スタイルを変えることができます。


ブレークポイントはmin-width:以降の数値です。
幅が768pxまではこのレイアウト、1024px以下はこのレイアウトという感じで設定できます。

古いIEへの対処方法は?

メディアクエリで幅を切り替えることができるのは分かりました。
ただ…メディアクエリは古いIEはもちろん対応してません。その他、CSS3やHTML5も色々対応してないところが多く色々不便。お約束のIE問題です。

そこで古いIEにメディアクエリーを対応させるためにJavaScriptを使います。

IE8以下でHTML5を使う方法

下記よりJSファイルをDLします。
http://code.google.com/p/html5shiv/

ヘッダー内にこんな感じで追記。

IE8以下でCSS3を使う方法

下記よりJSファイルをDL。
http://code.google.com/p/css3-mediaqueries-js/

ヘッダー内にこんな感じで追記。

まとめ

JavaScriptによってはCSSの属性セレクタなどが使えないのでよく調べて使った方が良いですね。

スポンサーサイト
  1. 2014/02/16(日) 12:17:47|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0
<<ヒーロー島バレンタインスペシャル 2014 に参加してきました | ホーム | スタイルで気を付けたい点*htmlメルマガ*>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/77-ab2c26b5
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。