前回メインページ（index.html）をHTMLを使って構築しました。
次にCSS（スタイルシート）を使って
メインページのデザインを変更していきたいと思います。
目次
CSS（スタイルシート）とは
まずは前回作成したindex.html内の<head>内に次のコードを追記してみましょう。
*{outline:1px solid #ff0000}
</style>
指定する色は何色でも大丈夫です。（今回使っている色は赤）
追記してindex.htmlをブラウザで開いてみましょう。
前回「6 CSS適応のためにHTMLを整理しよう」のときに整理したHTMLが
可視化された状態になりました。
CSSはこのボックス内やボックスそのものに命令を与えて
ボックス内の文字や色を変えたり
ボックスの配置や位置関係を変えたりすることができます。
あえてそのままにしています。
Webサイトには必要のないコードなので
不必要と感じたり、作業が終わり次第消しましょう。
CSSファイルを作成してHTMLファイルと紐づけよう
まずAtomメニューのファイルから
「新規ファイル」をクリックして新しいタブを作ります。
作成した新規タブに文字コード方式の宣言を記入します。
書き込んだら別名で保存を選択し
保存先にフォルダ「website」内に「css」という新規フォルダを作成し
その中に名前を「style.css」にして保存します。
次に作成したstyle.cssをHTMLファイルと紐づけます。
HTMLファイルすべての<head>タグ内に<link>タグを追記します。
ナビゲーション内のリンクテキストを縦長から横長に変えてみよう
Webサイトのデザインをすっきりさせたいので
CSSを使って縦長になっているナビゲーション内のリンクテキストの表示を横長にします。
まずはリンクテキストの先頭についている「・」の表示を変更します。
style.cssに次のコードを追記して保存します。
「・」表示が消えました。
list-style-typeをnoneにしてマーカーを消しました。
このnoneの部分の表記を変えることで別のマーカーに置き換えることもできます。
「circle」 → ○
「square」 → ■
「decimal」 → 算用数字
「upper（lower）-roman」→ 大文字（小文字）のローマ数字
などがあります。
次にリンクテキストの縦表示を横表示に変えてみます。
style.cssに追記した「nav li {list-style-type: none;}」を改行を使い整理して
これで横並びになりました。
「inline」→横並び。幅と高さが指定できない。指定できるのは左右の余白だけ。
「block」→縦並び。幅や高さ、前後左右の余白が指定できる。
次にリンクテキストの間隔を広げてみましょう。
nav liの{ }内に次のコードを追記して保存します。
ナビゲーション内のリンクテキストの仕様を変更しよう
現状のリンクテキストには下線があり、クリックすると色が変わります。
デフォルトで設定されているリンクの仕様「５つ」をCSSを使って変更します。
クリックした後（訪問後）のリンクテキストの指定 → 「a:visited」
リンクテキストにカーソルが載った時の変化の指定 → 「a:hover」
リンクテキストをクリックして離すまでの変化の指定 → 「a:active」
リンクテキストの下部にある下線 → 「text-decoration」
この５つの仕様をstyle.css内に追記して保存し、
ナビゲーション内のリンクテキストのみに適用します。
nav a:link{
color: #000000;
text-decoration:none;
}
nav a:visited{
color: #000000;
text-decoration:none;
}
nav a:hover{
color: #f28bc8;
text-decoration:none;
}
nav a:active{
color: #fb4b85;
text-decoration:none;
}
追記したことで下線部が消え、移動前移動後後ともに色が変化せず
カーソルを合わせた時に色が変わるリンクに変更になりました。
「link」→「visited」→「hover」→「active」の順に記載しないと
スタイルが適応しない可能性があるので順番には注意しましょう。
今回のまとめ
今回はCSSを使う下準備と
実際にCSSを使ってナビゲーション部分のデザイン変更を行ってみました。
次回もCSSを使いindex.html（メインページ）をデザインしていこうと思います。
