はじめてのHTML&CSS入門

リキッドレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
固定の幅ではなく、ブラウザのウインドウ幅に対応するレイアウトの方法を学びましょう。
講師:
03:23

字幕

このレッスンでは、CSS によるリキッドレイアウトについて学びます。それでは、Chapter04 lesson05 のファイルをブラウザで見てみましょう。まずこの final のファイルのウィンドウの横幅をつかんで広げたり縮めたりしてみます。そうするとブラウザの横幅に応じてコンテンツが伸び縮みしているようなデザインになっています。begin の方では特にウィンドウ幅を変えてもコンテンツは伸び縮みしません。ではこの方法を実践してみましょう。それでは、Sublime Text に行きstyle.css を開いた状態になっています。スタイルシートでまず最初に変更するのはwrapper のセレクターを探します。この wrapper のセレクターに全体の横幅 980pxこのように明示的に数字で横幅を指定することをソリッドなレイアウトと呼びます。対して、リキッドなレイアウトはこの幅の値を%で記述します。なので、全体のウィンドウ幅の90% としました。また、margin の方もこの 90% に合わせて上下が 0 の auto の部分を5% にしてみました。こうすると、左右 5% で合計の値が 100%という状態になります。 それでは上書き保存をしてブラウザの方で確認をしてみましょう。アプリケーションを切り替えてChrome で更新をします。そうすると、一応ナビゲーションの方は伸びているように見えますがまだ、メインの方は縮みません。また、Sublime に戻って記述を加えていきます。main の箱のスタイルシートを探します。ここに id main というのが見つかりましたので700px ではなくて%70% と指定してあげます。そして上書き保存をしてまたブラウザに切り替えます。ブラウザを更新します。そして、何も変わっていないように見えますがブラウザの端をつかんでやってみるとこのようにコンテンツが伸び縮みします。ナビゲーションは 200px で固定そしてメインの箱は%でリキッドこの様に横幅を%で指定することはこれからのマルチデバイスの時代には必須のテクニックになってきますので相対的に指定するということも覚えておきましょう。このレッスンでは、CSS によるリキッドレイアウトについて学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

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

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

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