WEB-LABOあなたにもサクッとできる!レスポンシブWebデザイン(RWD)にチャレンジ!2014/10/16HTML&CSSWebについてツイート今週もTechWebの時間です。いうか、コレは先週やった内容ですけど(笑)ちなみにTechWebは、テクニカルWebデザインの略でWordPressと検索エンジン対策をメインにJavaScriptやCSSを使ったTipsなどを小出しにやっています。動作サンプルブラウザの横幅を変更して確認してください。今回は、ブレイクポイントを1024pxと600pxにしています。menu1menu2menu3menu4menu5menu6トピックス1トピックス2トピックス3レスポンシブWebデザイン(RWD)とは「レスポンシブWebデザイン」(以下、レスポンシブ)とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます(中には、タブレット向けデザインを用意しているサイトもあります)。日経BPコンサルティングスタッフルームよりサイトをレスポンシブWebデザインで構築するとなると、しっかりと考えて作らないといけませんが、とりあえずRWDを体験してみたいのであれば結構簡単に作ることができます。レスポンシブWebデザインを実現する方法としては、linkタグでPC用の外部スタイル(style_pc.css)、スマホ用の外部スタイル(style_sp.css)など別のファイルを読み込む方法と内部CSSや外部CSSの中で各デバイス用のスタイルを記述する方法があります。今回は、スタイルシートの中で書き分ける方法でやってみます。</footer></div>CSSブラウザの幅によりレイアウトを切り替えますが、その境目のことをブレイクポイントと呼びます。ブレイクポイントは、下の方法で指定します。PC以外にスマホ用とタブレット用と切り替える場合は、ブレイクポイントを変えて2つずつ用意します。レスポンシブツイート関連記事フッターまでスクロールしたら発動するアクションをjQueryとJavaScriptで作ってみよう!jQueryのスライドショーを自作しよう!(最終回/全3回)TechWebでやった(やる予定)Tipsの動画を作ってみました。oonishi熊本電子ビジネス専門学校のITビジネス科で、Webをメインに教えています。「Webデザイナーである前に、ビジネスパーソンであれ」がモットーです。「今」の積み重ねによる未来を待つのではなく、未来から逆算して「今」を生きる。miniフィードRSSAtom。