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

共用CSSとリンクを装飾する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
定番のスタイルに加え、リンクの色を、セクションごとに変える方法を学びます。
講師:
08:57

字幕

このレッスンではサイト全体の共通で使用する CSS とリンクカラーの設定について学びます。レッスンファイル final のフォルダーの中に入っている index.html をブラウザで開きます。ブラウザで開くとグローバルナビのリンクの色とヘッダーのリンクの色そしてフッターのリンクの色がそれぞれ違う設定になっています。このような設定方法を学んでいきましょう。ではフォルダーを開きbegin のフォルダーをSublime Text で開きます。開きましたら index.html をダブルクリックで開きCSS の中の style.css もダブルクリックで開いておきます。それではまず こちらの COMMON のコメントのエリアにある「リンクの設定」という所をみます。そしてリンクのカラーをまず設定していきましょう。a コロン linkそしてカンマを打って改行a コロン visitedそして { } の中にリンクの内容を入れていきます。color コロン そして色番号はメインカラーを使用したいと思うのでここからコピーをしてきます。そしてこちらにペーストしましょう。そしてこの時点で保存をしてブラウザで見てみたいと思います。 HTML にフォーカスをして右クリックからOpen in Browser で開きます。そうするとリンクの色が共通で設定されていますがこのようにグローバルナビのリンクのカラーがそこにはあるんだけれども見えなくなってしまいました。またフッターの方もメインカラーの背景色とメインカラーのリンク色なので見えなくなってしまいました。これを解消しなければなりません。それでは Sublime Text に戻ります。CSS を開いてまずこちらの a:link はリンクが張られている状態そして visited は一度訪れたことがあるという状態です。そしてカンマで2行一遍に選択することによってどちらの状態でも同じ色という風に設定することができます。また、現時点ではこのように下線がついていますので下線を外すスタイルシートも設定しておきたいと思います。text-decoration を選んで Enterそしてこちらで none を設定すると下線を消すという設定にできます。一度保存をしてブラウザにフォーカスをしてこちらに注目をしていてください。それではブラウザを更新します。更新すると下線を消すことができました。では Sublime Text に戻ってリンクの後2つの状態を設定していきます。 まずマウスがリンクの文字列にかぶった時に設定するa hover という状態とリンクをクリックした時という状態のa:active という状態を設定したいと思います。こちらはリンクであることをよりユーザーに分かりやすくするために色を少し変更したいと思います。color コロンそして色味はこちらのメインカラーを明るくしたバージョンというこちらの色をコピー&ペーストでもってきたいと思います。コピーしてペーストをします。そして上書き保存をしてブラウザで更新です。そうすると「お問い合わせ」や「サイトマップ」にマウスを重ねた時に少し文字が明るくなっているようになりました。グローバルナビも同様ですがa:link の状態がまだ見えません。それでは Sublime Text に戻ります。それではナビゲーションのエリアを見てみましょう。ナビゲーションの #nav の中のa というものの下にリンクのセレクタを追記しましょう。#nav の中の li の中の a:linkそしてカンマそして #nav の li の a:visited の状態を書いていきたいと思います。リンクの文字色を白にしたいのでカラーを fff としておきます。 また効率化を図るためにこちらをコピーして流用しましょう。こちらをコピーしてそしてペーストをします。そして link と visted の状態だけを変えればいいのでこちらが hoverこちらが active になります。そしてこちらはナビゲーションの背景を変えたいと思いますので先に背景の色味をこちらの明るい緑の所から持ってきておきましょう。コピーをとってスクロールをします。そうしたら、background というものを追記しましょう。background でそしてこの色味をペーストします。# 記号を忘れないようにして下さい。それでは上書き保存をしてブラウザにフォーカスして更新をするとこのようにナビゲーションもa link と visited の状態が白ということで見えるようになりました。今度はフッターのリンクを調整していきたいので今回のこの設定をそのまま流用したいと思います。この4行分をコピーしてフッターのエリアまでスクロールしましょう。そしてこのようにペーストしたらnav ではなくて footer とセレクタを書き換えていきましょう。入力できたら上書き保存をしてブラウザにフォーカスして更新するとスクロールした時にフッターの方もこのように色味が変わるようになりました。 それでは Sublime Text に戻ります。今度は共通で使用する CSS を書きましょう。こちらのコメント「float を親で解除するoverflow hidden の代替」と書いてあります。こちらはまず .clearfix と書いてコロン before カンマそして .clearfix コロンで afterそして中身の内容がdisplay の block とcontent というプロパティを作って空のダブルクォーテーションを2つ打っておきます。そして clearfix コロン afterというセレクタを作ってclear の both と書いておきます。また最後に clearfix というだけのセレクタを作ってzoom コロン 1というのを作っておきます。こちらは、今まで float を作ってそれを解除するということをoverflow hidden などで処理をしてきましたがoverflow hidden は本来はみ出したものを隠すという意味なのでそれではデザイン上不都合が起きる時があります。そんなときは親の要素に .clearfixつまりクラス clearfix を付けることによってfloat の高さを算出することができます。 こちらは困った時に非常にお世話になるので必ず共通の設定の方に入れておくようにしましょう。このレッスンでは共通で使用する CSS とリンクのカラーの設定について学びました。

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

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

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

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

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

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