【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ
こんにちは、WEBマーケティング部の杉尾です。 今回は、レスポンシブデザインのサイトを作るのに欠かせないCSS3 メディアクエリ（Media Queries）のお話です。 Bootstrapなどのフレームワークを使った場合は、当たり前のようにレスポンシブデザインになりますが、そういうものを使わずにレスポンシブなサイトを作る場合は必ず必要となってくる知識です。 また、それらを使う場合でも、ちょっとした改修やデザイン変更時に触ることがあるかもしれません。 是非とも覚えて、積極的に活用しましょう。 メディアクエリとは？ CSS3から導入された仕様の一つです。 よく使う指定として、「ウェブページの表示サイズがこれ以上の幅ならこういうスタイルを適用する」という指定ができます。 それ以外にも、 『表示サイズ、高さ』(height) 『画面の幅、高さ』(device-width、device-heigh
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
