はじめてのHTML&CSS入門

段組レイアウト1

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダー、コンテンツ、ナビゲーション、フッターセクションを使って、Webサイトの定番レイアウトを作ってみましょう!
講師:
08:34

字幕

このレッスンでは CSS を使った定番レイアウトの方法を学びましょう。Chapter 04 lesson 01 のファイルを開いてブラウザで確認してみます。ファイナルのファイルはこの様な状態になっています。header があってナビゲーションがあってmain のエリアがあって subそして、footer と続きます。begin の方はまだこの箱が全て積み重なっている状態です。それでは、CSS の方を編集してレイアウトを作っていきましょう。では、Sublime Text を開いてまず、 index.html の方の構造を見ていきます。まずすべてを包んでいるのがwrapper です。wrapper の箱はナビゲーションやメイン、フッターの全てを包んでいることにまず注目してください。そしてその wrapper の中にまず、header がいます。そして、header の中にnav が含まれていてサイトのヘッダーが終わるとmain の箱そして、sub の箱そして、footer の箱と続きます。では上から順番にスタイリングをしていきましょう。スタイルシートに切り替えてまず全体を包む箱を制御します。 まず幅を狭めて、真ん中に寄せてみましょう。そして、Sublime の機能予測変換を使いましょう。w を打つと自動的にwidth が選ばれているようですのでここで 、Enter を押します。そうすると、自動的に予測変換されてwidth : までが入りました。そして値を 980px と入力しEnter そして今度はmargin を書きますがmargin と選ばれた時点でEnter そして値の方は真ん中に寄せる上下が0、左右が auto とします。そして、保存をしてブラウザで確認してみましょう。アプリケーションを切り替えてブラウザを更新します。これで、wrapper が 980 に狭められて中央に寄りました。今度は、nav をデザインします。nav はこのマーカーが出ていてしまったりとかまだ横に並んでいなかったりします。これをスタイルしましょう。では、Sublime の方に戻りnav のセレクターを見つけます。このエリアの nav のエリアがすべてCSS のセレクターですのでこの内側にプロパティを書いてCSS を記述します。では、まず横並びにしてマーカーを消しましょう。nav の ul の内側にlist-style というものを選んでここで Enter を押すと予測変換が入ります。 そしてリストスタイルはマーカーを制御できますのでそこに none と入れるとマーカーが消えます。そして、float これをright と指定します。そうすると nav 全体を右に移動させることができます。次にリストの中の一個一個の nav をスタイルします。では、li のセレクターの中にもfloat left そして;そして幅を入れておきます。幅は 100px としておきます。そしてここでいったん保存してブラウザで見てみましょう。アプリケーションを切り替えて更新です。更新をするとnav が右に移動して横並びになっているのが分かりますがmain の箱の内側に入ってしまっています。これは、float の特性が高さを失くしてしまうため下の箱にめり込んでしまうという状態になっているのでしっかりと浮いている部分を解除しなければなりません。Sublime Text に戻ってfloat がかかっている親の箱、nav の ul の親はid nav です。ここに overflow: hiddenという物を入れてあげましょう。overflow: hidden を入れると高さを出すことができます。また nav ul も、子供に li というfloat している子供を持っているためここでも overflow: hidden として高さを出してあげれば、ブラウザでちょっと確認してみましょう。 ブラウザに切り替えて、更新。そうすると、無事 nav の背景色も戻りmain の箱には重ならなくなりました。それでは、よりリンクらしく装飾していきます。nav li の中身の aリンクをスタイルする時はカーソルがハンドカーソルになるリンクのエリアである a もメインに装飾していきます。まず、リンクの幅全部がリンクになるようにするためにdisplay: block を設定しリンクの下線を消すためのtext-decoration: none で下線を消しリンクとリンクの切れ目のborder を左にだけ付けたいと思いますのでborder-left を選び直線で 1px色は黒と指定しておきます。そして、100px のボタンの領域の中で中央寄せにしてあげたいのでtext-align を選んでEnter そしてcenter という値を入れてあげます。そして上書き保存をしてブラウザで確認をしてみます。更新するとnav がボタンらしくなりました。それでは、main と sub を後は横並びにするだけです。main のエリアのスタイルシートはまず幅を決めてあげましょう。width を選んで 700 pxそして、仮の高さを入れてあげましょう。 高さ 300pxそして、左と右に横並びにするのでfloat: left そして、sub の箱は合計の値が 980 以下になればいいので今回は幅を 250そして、高さは仮ですが300px として最後に右に並んでほしいのでfloat: right を入れてみます。そして、保存をしてブラウザで確認をします。ここで footer の黄緑色がmain と sub のエリアにはみ出ているような形になってしまいました。これも、float を解除していないという弊害になりますので最後に footer にクリアを入れてみましょう。Sublime に戻ってfooter のエリアにclear: both;これで、float が解除されました。上書き保存をして、ブラウザを開き更新をすると無事に灰色の部分これは、wrapper の背景色です。ということで、定番のレイアウトを組むことができました。このレッスンではWeb デザインにおける定番レイアウトをCSS で実践してみました。

はじめてのHTML&CSS入門

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

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

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

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

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