Responsive Web Designとは?

12月15日(土)の活動報告・改訂版です。

はじめに

mq1ファイルをダウンロード

mq2ファイルをダウンロード

ファイルをダウンロード出来ましたら、mq1とmq2それぞれをブラウザで開いて下さい。
開きましたら、それぞれの画面の幅を小さくしてみて下さい。
いかがでしょうか?
mq2の方はある大きさまで狭まると、レイアウトが変わります。

今回の授業では、mq1を元に、
画面の大きさによってレイアウトが変わるmq2を作成しました。

それでは、どうやって作るのか?を説明してまいります。
元ファイルであるmq1のソースをコピーしてテキストエディタで開き、動作を確認してみて下さい。

手を加えるのは<head>内の<style></style>の中とhtmlの一部です。

1.ナビゲーションバーを左カラムにする

このように書き換えます。
するとナビゲーションバーが左に来る、2カラムのレイアウトになります。

2.直下にある要素に対してのみ、指定をかける方法

> をつかいます。

今回は分かりやすく見てみるために、mq1.htmlファイルのhtmlの中の<article>と<section>の間に
新たに<h1>を入れて実験します。

元のhtml

この、
<article>と<section>の間に

をコピペする。

こんな感じにします。
<h1>タグが<article>の直下にも、<section>の直下にもある状態になりました。

それでは、articleの中のh1にのみ、色を指定してみます。
<style></style>の中にある、
article h1 {… の記述の下に、

の一文を追加してみて下さい。

<h1>がもうひとつ増えたのですが、article直下の方の<h1>だけが背景がredになっています。

3.@media screenを使って、画面サイズに合わせたレイアウトを指定する

mq.htmlファイルのこの指定

の下に、もう一つのサイズ用の指定を書き加えます。
つまり、@media screen がふたつに増えます。

この様に指定しましたら、ファイルをブラウザで開いて、画面の幅を小さくしてみて下さい。
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 についての理解を深めましょう♪

> 2.直下にある要素に対してのみ、指定をかける方法
子セレクタの他にも便利なセレクタが色々あります。
興味があれば「便利なセレクタ」で検索して調べてみましょう。

■ユニバーサルセレクタについて
「ユニバーサルセレクタ」で検索すれば、関連記事が色々とでます。以下等が基本的な事柄です。
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タカハシ先生
カテゴリー: study, 勉強会 | タグ: , , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

コメントを残す

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

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.