ステップアップ!WordPress中級

TwentyTwelveのレスポンシブデザインの仕組み

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
TwentyTwelveではさまざまなデバイスに対応したレスポンシブデザインを採用しています。レスポンシブデザインの仕組みとカスタマイズの仕方について解説します。
講師:
08:12

字幕

このレッスンでは TwentyTwelveテーマの レスポンシブデザインについて 学習します TwentyTwelve テーマは レスポンシブデザインに対応しています レスポンシブデザインというのは その画面を表示する― スクリーンのサイズに合わせて 表示する内容や レイアウトを変更して 最適な表示を実現する方法です 実際にブラウザのサイズを変更して 確認してみます ブラウザのサイズが小さくなっていくと このように表示のデザインが変わってきます さらに小さくすると この画像の部分が 今 小さくなっていくのがわかります さらに小さくすると このように 二列のカラムが一列になります メニューも このような開閉式のメニューに変更されます スマートフォンなどでの表示に 最適化した― 表示に変わります サイドバーも下に並びます また広げると元に戻っていきます こういった形ですね 最近は PC のブラウザだけでなく 様々なデバイスでの ウェブの閲覧が増えています また PC の画面も 様々なサイズがありますので 閲覧してる人によって スクリーンのサイズが変わります TwentyTwelve では このようなレスポンシブデザインを 実現するために CSS の Media Query という機能と 画像のサイズに max-width という CSS を使って レスポンシブデザインを実現しています これらの機能っていうのは CSS だけで適用できるものなので JavaScript ですとか デバイスや スクリーンのサイズの取得といった 作業が必要ありません とても簡単に実現できることなので TwentyTwelve を使う場合だけでなく オリジナルのテーマを作る場合にも この TwentyTwelve で実現している レスポンシブデザインの ノウハウを使って サイトを作っていくといいと思います 最初に画像のサイズを ブラウザの幅に合わせて 変えていく方法ですが 画像の部分の スタイルシートを確認してみましょう この img タグに対して max-width というスタイルが 適用されています max-width に今 100% というふうに入っています この max-width というスタイルは そのエレメントのとりうる 最大の幅を指定します 画像を 100% で表示できる時には 100% で表示するが 表示できない場合には 100% より小さいサイズで 表示しなさいという指定です このようにすることで 画像が― 自動的に縮小されて 表示されるようになります 次に Media Query を確認してみましょう エディターを開きます TwentyTwelve のテーマの中にある style.css を開きます この非常に長いスタイル CSS の 一番最後の方に Media Query が記述されています この部分ですね Media queries というコメントが入っています Minimun width of 600 pixels というふうに書いてありますが この @media から始まる記述が Media Query になります この部分ですね min-width: 600px というふうに書いてあります これはどういうことかというと そのスクリーンの幅が 600px よりも大きい時 最初のサイズが 600px で それ以上の スクリーンサイズである時に この {} の中のスタイルを適用しなさいという 命令になります 通常のスタイルと違って {} の中にさらに スタイルを書いていくという 記述になります このように 600px よりも 大きいスクリーンで見ているときに 適用した CSS を書きます この Media Query の外で ある CSS を書いておいて それに対して 600px 以上であれば こっちの CSS にしなさいというふうに CSS の内容を上書きしていく という感じになります ここまでが 600px 以上のブラウザ― に対する指定になります 今度は min-width が 900px の時に このカッコの中を 適用しなさいという命令が また書いてあります このように Media Query というのは 複数の条件を指定して置いて 様々な スクリーンサイズに対して それぞれ 別項のスタイルを適用することができます ですので この style.css では 幅が 960px 以上の画面 それから 600px 以上 960px 未満の画面 そして 600px 未満の画面 それぞれ三つの 画面に対する CSS が 書かれていることになります 試しにこの― 二つの Media Query の指定を 削除して画面を表示してみたいと思います そうするとどのサイズで見ても 600px 以下の 画面で見た時の表示になるはずです サイトをリロードします はい 一番― 狭くした時と同じ表示になりました このように Media Query を使えば 様々なデバイスに対して 簡単にそれぞれ デザインを変更することができます とても便利なのでぜひ試してみてください ただ 注意としては Media Query は Internet Explorer の 8以下では動作しません Internet Explorer の場合には 9以上で Media Query を使うことができます このレッスンでは TwentyTwelveの レスポンシブデザインについて 学習しました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

3時間24分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年02月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。