12月15日（土）の活動報告・改訂版です。
はじめに
ファイルをダウンロード出来ましたら、mq1とmq2それぞれをブラウザで開いて下さい。
開きましたら、それぞれの画面の幅を小さくしてみて下さい。
いかがでしょうか？
mq2の方はある大きさまで狭まると、レイアウトが変わります。
今回の授業では、mq1を元に、
画面の大きさによってレイアウトが変わるmq2を作成しました。
それでは、どうやって作るのか？を説明してまいります。
元ファイルであるmq1のソースをコピーしてテキストエディタで開き、動作を確認してみて下さい。
手を加えるのは<head>内の<style></style>の中とhtmlの一部です。
1.ナビゲーションバーを左カラムにする
|
1 2 3 4 5 6 7 8 |
<head>内の<style></style>の中にある、 nav li {display:table-cell;}をコメントアウトして /*nav li {display:table-cell;}*/ nav li {list-style:none;} nav {float:left; width:10em;} article {margin-left:11em;} |
このように書き換えます。
するとナビゲーションバーが左に来る、2カラムのレイアウトになります。
2.直下にある要素に対してのみ、指定をかける方法
> をつかいます。
今回は分かりやすく見てみるために、mq1.htmlファイルのhtmlの中の<article>と<section>の間に
新たに<h1>を入れて実験します。
元のhtml
|
1 2 3 |
<article> <section> <h1>Responsive Web Designとは？</h1> |
この、
<article>と<section>の間に
|
1 |
<h1>Responsive Web Designとは？</h1> |
をコピペする。
|
1 2 3 4 |
<article> <h1>Responsive Web Designとは？</h1> <section> <h1>Responsive Web Designとは？</h1> |
こんな感じにします。
<h1>タグが<article>の直下にも、<section>の直下にもある状態になりました。
それでは、articleの中のh1にのみ、色を指定してみます。
<style></style>の中にある、
article h1 {… の記述の下に、
|
1 |
article > h1 {background:red;} |
の一文を追加してみて下さい。
<h1>がもうひとつ増えたのですが、article直下の方の<h1>だけが背景がredになっています。
3.@media screenを使って、画面サイズに合わせたレイアウトを指定する
mq.htmlファイルのこの指定
|
1 2 3 |
@media screen and (max-width: 800px) { #wrap {width:100%;} } |
の下に、もう一つのサイズ用の指定を書き加えます。
つまり、@media screen がふたつに増えます。
|
1 2 3 4 5 6 7 8 9 |
@media screen and (max-width: 800px) { #wrap {width:100%;} } @media screen and (max-width: 600px) { nav {float:none; width:100%;} article {margin-left:0;} .header_img {position:static;} #logo a {padding:0.2em 1em;} } |
この様に指定しましたら、ファイルをブラウザで開いて、画面の幅を小さくしてみて下さい。
600pxより小さくなると、1カラムになる筈です。
解説
画面サイズ(max-width)が800px以下の場合、更に600px以下になった場合の、
二つのケースのレイアウトを@media screenで指定します。
一つ目の@media…は同じなので、
二つ目の@media…の記述について上から順に説明します。
-
画面サイズ(max-width)が600px以下になった場合、
navのfloatは解除して、100%表示にします。
(この指定をすることで、2カラムが1カラムになります。) - articleのmargin-left:0;を指定する事で余白の調整をします。
-
.header_imgにposition:static;と指定することで、
cssの中で.header_imgに対して指定されていたstyleを元の状態に戻します。 - #logo aにpadding:0.2em 1em;の指定をすることで、余白の調整をします。
今回、画面サイズに合わせたレイアウト指定の具体例として用意しました”mqファイル”ですが、
中身が大変濃いぃファイルですので、よ〜く読んで Responsive Web Design についての理解を深めましょう♪
子セレクタの他にも便利なセレクタが色々あります。
興味があれば「便利なセレクタ」で検索して調べてみましょう。
■ユニバーサルセレクタについて
「ユニバーサルセレクタ」で検索すれば、関連記事が色々とでます。以下等が基本的な事柄です。
http://d.hatena.ne.jp/replication/20091215/1260832958
『ユニバーサルセレクタが遅い？』については、現在のマシン+ブラウザ性能が上がっている事や、
そんなに大規模なページを作成しない事から考えて、心配は不要でしょう。
一応、知識として知っておくと良いのは、cssのセレクタは右から解釈されるという意外な事実です。
http://tech.naver.jp/blog/?p=178
■私がユニバーサルセレクタでリセットしない方法に賛成しているのは以下のエントリーとほぼ同じ理由です。
http://hail2u.net/blog/webdesign/reset-vs-normalize.html
#2タカハシ先生