あなたにもサクッとできる!レスポンシブWebデザイン(RWD)にチャレンジ!

レスポンシブWebデザイン

今週もTechWebの時間です。というか、コレは先週やった内容ですけど(笑)

ちなみにTechWebは、テクニカルWebデザインの略でWordPressと検索エンジン対策をメインにJavaScriptやCSSを使ったTipsなどを小出しにやっています。

PR

まずは動作サンプル

ブラウザの横幅を変更して確認してください。
今回は、ブレイクポイントを1024pxと600pxにしています。

トピックス1

トピックス2

トピックス3

PR

 

レスポンシブWebデザイン(RWD)とは

「レスポンシブWebデザイン」(以下、レスポンシブ)とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。 パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます(中には、タブレット向けデザインを用意しているサイトもあります)。
日経BPコンサルティングスタッフルームより

 

レスポンシブWebデザイン

サイトをレスポンシブWebデザインで構築するとなると、しっかりと考えて作らないといけませんが、とりあえずRWDを体験してみたいのであれば結構簡単に作ることができます。

レスポンシブWebデザインを実現する方法としては、linkタグでPC用の外部スタイル(style_pc.css)、スマホ用の外部スタイル(style_sp.css)など別のファイルを読み込む方法と内部CSSや外部CSSの中で各デバイス用のスタイルを記述する方法があります。

今回は、スタイルシートの中で書き分ける方法でやってみます。

 

 

CSS

ブラウザの幅によりレイアウトを切り替えますが、その境目のことをブレイクポイントと呼びます。ブレイクポイントは、下の方法で指定します。

PC以外にスマホ用とタブレット用と切り替える場合は、ブレイクポイントを変えて2つずつ用意します。


@media screen and (max-width:ブレイクポイントの指定){
 ここにスタイルを指定
}

そろそろWEB-LABOもレスポンシブにしないとな(笑)

その他のTechWebTipsはこちら

PR

関連記事