HTML&CSSでWebサイトを作ってみよう!

段組レイアウト(1) ナビ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グローバルナビゲーションをレイアウトしてみましょう。「float」プロパティの使い方が重要になります。
講師:
09:22

字幕

このレッスンでは縦並びであったナビゲーションを横並びにするという方法を学んでいきます。それでは、まず、final のフォルダを開きましてindex.hrml を Chrome で開きましょう。Chrome で開くと、このように横並びになっていることが確認できます。それでは、CSS を記述していきましょう。フォルダに戻り、begin のフォルダをSublime text にドラッグ&ドロップしてindex.hrml を ダブルクリックそして CSS のフォルダを開いてCSS もダブルクリックしておきましょう。このようにタブで2つのファイルが開かれました。それでは、現時点でのファイルを見ておきましょう。HTML にフォーカスをして右クリックコンテキストメニューを開いてOpen in Brower を押します。そうしますと、現状は背景に色がついているような状態になっています。ですが、この肝心のナビゲーションがリストマークがついたままで縦並びになっているとこれをこのようなボタン状にしていくのが目標です。それでは、Sublime text に戻ってスタイルシートの方に行きナビのエリアを探してここに記述をしていきましょう。 このように、CSS でどのエリアを記述しているか分かりやすくするためにコメントを書くことは結構よくあります。エリア毎にこのように区切りをつけてあげると良いと思います。それでは、ID nav の部分に装飾としてボーダーを入れておきたいと思います。boader-bottom として下線を入れて置きたいと思います。1px solid fff ということで細さ1px でsolid 実線で、そして色は白という罫線が入る予定です。そして、すこし、背景を濃くしたいのでバックグラウンドカラーを# は残して、999 としておきましょう。そして上書き保存をしてブラウザの方で更新です。薄らとこのエリアとこのエリアの境目に白い線が入りますが後でこの下が背景画像が濃くなるのでそちらで、はっきりと白い罫線が分かるようになるかと思います。それでは、Sublime text に戻ってスタイルシートを記述しましょう。まず、ID nav の中の li というセレクタを作って横並びにするためには、float の left という物が必要です。そして、float と幅は一緒に使わないとトラブルが起きますので幅、width を指定して、187px と入力をします。 なぜ、187 かというと 940 というのが基準の横幅になっています。こちらの inner で指定している通りです。これをナビ5つで分割しなくてはなりません。こちらを5 で割ると、940px を5分割しなければならないので940 を5で割って、188px がきっかりなサイズになるのですがこの ファイナルなファイルを見た通り実は罫線を1本ずつ入れていきたいと思います。そうしますと、1pxの横幅がこの線で発生しますので予めその1 px 分を引いた 187 という値をナビの方に入れています。そして、幅とともに罫線の指定であるboader left というものを入力補完で選んで1 px、そして solid の実線であって色は白 fff を選んでおきましょう。そして上書き保存をしてブラウザの方で更新をします。begin のファイルを更新します。そうしますと、このような状態になっていました。たしかに横並びになっているのですがこのリストマークのせいだったりとかで残念ながら、横に5つ並びきれず、1つ採用情報がカラム落ちという状態行からはみ出してしまっています。ですので、この余白であったりリストのマークを消したいと思いますので今度は余白を消す設定を予め入れてお来ましょう。 Body という一番上の所まで戻り*そして{ を書きます。そして margin が0 padding が0としておきます。これは、ブラウザが勝手に付けてしまうデフォルトの余白といったものを解除するためのおまじないです。一度保存をしておきます。そしてブラウザを更新してみましょう。今度はあらゆる余白が縮まって見出しの上と下もこのように詰まりまして後はナビゲーションの方もこのように横並びになってくれました。ただ、このリストマークがまだ残っていますのでこちらを消してあげたいと思います。Sublime text に戻り、ナビゲーションのエリアに行ったらnav ul というセレクタを作りましょう。li の子供達の親の ul ですね。そしてここに list style、list まで打つと入力補完がでると思いますのでEnter そして num という値を設定するとマーカーのマークが消えるという命令になりますので上書き保存をしてからブラウザに評価として更新をしましょう。このようにマーカーが消えました。それでは、Sublime text に戻ってもう1行 ul におまじないを入れてあげなければいけません。 o と打って overflow ですね、ov まで打つと確実に選ばれるかと思います。overflow まで打ったら、Enter そしてhidden と打ちます。これは ul の子供である li が float している時にfloat は浮かんでしまって高さが無くなってしまいますのでそれを防ぐために、float しているものの親である ul でfloat の高さを出す overflow hidden というおまじないを入れてあげます。それでは、次のセレクタを書きましょう。今度はnav の li :last child と書きましょう。そして{ で幅が 186px でboader right が1px solid fff というふうにして上書き保存してブラウザを更新します。つまり、左だけの罫線だと右のラストの線が出ないので今回その線を最後のリストlast child はこの5個の li の中の最後の li だけ指定することができる書き方になります。そして今度はナビゲーションのリンクのセレクタを書きましょう。ID nav li の a です。そして、リンクのエリアを広げるためのdisplay block高さを出すためのhight を50 pxそして文字を中央に揃えたいのでtext align の centerそして文字をボックスの縦位置の中央にしていきたいのでline hight 行の高さを50 px に指定しておきます。 そして上書き保存をして更新する前に企業情報の右のエリアはリンクになっていません。ただ、更新をしてみましょう。更新をするとdisplay block によってa のリンクのエリアが広がります。このように li は横並びのレイアウトのために使ってリンクそのもののデザインについてはa のタグのスタイルでスタイルしていくとやりやすいと思います。このレッスンではナビゲーションのレイアウトについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

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

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

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

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