今すぐ登録して、25,300件以上登録されている、業界エキスパート指導のコースを受講しましょう。
共用CSSとリンクを装飾する
このレッスンではサイト全体の 共通で使用する 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 は一度訪れたことがある という状態です。 そしてカンマで２行一遍に 選択することによって どちらの状態でも同じ色という風に 設定することができます。 また、現時点では このように下線がついていますので 下線を外すスタイルシートも 設定しておきたいと思います。 text-decoration を選んで Enter そしてこちらで none を設定すると…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。