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

フッターの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フッターには補足情報や、ナビゲーションを配置してみましょう。主張しすぎないデザインを学びます。
講師:
05:37

字幕

このレッスンではフッターの装飾とレイアウトについて学んでいきましょう。それでは、final のフォルダにあるindex.html をブラウザの方で開きましょう。そして、下までスクロールしていくとフッターのエリアにはこの背景画像とそして横並びのナビゲーションがあるようになっています。それでは、begin のフォルダーも開いてみましょう。begin のフォルダーを丸ごとSublime Text にドラッグ&ドロップします。そして、index.html をダブルクリックしましょう。そして、CSS のフォルダの中にあるstyle.css もダブルクリックで開いておきましょう。そして、index.html をフォーカスして右クリックからOpen in browser で確認をしておきますとフッターはまだ縦並びですしこのような背景画像もまだ設定がされていません。それでは、Sublime Text に戻りstyle.css を開いて一番下までスクロールです。そうすると、footer というエリアがありますのでここに指定をしていきましょう。まず背景画像を出したいとおもいます。背景画像を入れるのにbackground というプロパティを使っていきますがまだ背景色の指定しかありません。 こちらの色の指定の後に半角スペースを入れてurl() と入れます。背景画像を入れたいので背景画像の場所を特定をしましょう。背景画像は CSS から見て一階層上に上った後にimages フォルダに下りてその中にある footer-bgという画像を指定したいと思います。bg.jpegそして、こちらはブラウザのウィンドウが広がっても続いていてほしいので横方向へのリピートつまり、repeat-x という風に横方向だけへのリピートを指定してあげます。そして一度上書き保存をしてブラウザで見てみましょう。begin のファイルを更新します。そうしますと、このように背景画像が入ってきたと思いますが背景画像が入ったことによってナビゲーションが始まる部分がここからになってしまって文字が読みづらくなってしまいますので隙間を設けてあげましょう。Sublime Text に戻ってこちらの footer のcolor の下に新しいプロパティpadding を入れておきましょう。padding を入力して上に隙間を設けたいので上の方に 200px の隙間左右の隙間はいらないので 0 そして、下の隙間は 30pxという風に設定をして ; を打っておきます。 padding に3つの値がある時は最初の値が上方向、真ん中の値が左右の値そして3つ目の値が下方向ということになります。では上書き保存をしてブラウザの方で更新をすると少しスクロールをしてあげるとここも 200px の隙間が取れてそして、ここからホームが始まっているという状況です。あとは、このナビを横並びにしていきましょう。Sublime Text に戻りまして追記をしていきましょう。id footer の中の.footer-nav という方にクラス指定がされていますのでこちらを使いましょう。まず横並びにする為にfloat を使えますがそれは親でちゃんと float の高さを出して上げないといけないので先に overflow hidden というおまじないを親に入れておいてそして、コピーライトとの余白を作りたいのでmergin-bottom 30px を予め入れておきます。そして、footer の中のfooter-nav の中にあるli と言う風にセレクタを作ったらその li は横並びにするのでfloat left を入れてあげてそして、一個一個の項目の右の隙間であるmargin right を30px 指定してあげて上書き保存。そして、ブラウザ上で更新を押すとこの様に横並びになってそして一個一個の項目の隙間はmargin right で隙間が取れています。 それでは、コピーライトを最後に右寄せにしていきましょう。id footer の中にある pこちらが text-align のright ; です。そして上書き保存をしてブラウザにフォーカスをして更新です。これでtext-align right によってコピーライトが右に寄ってくれました。これでフッターの装飾とレイアウトが終わりました。このレッスンではフッターの装飾とレイアウトについて学びました。

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

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

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

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

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

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