プログラミング

ゼロから始めるプログラミング生活 #3 CSSを使ってリンクテキストのデザインを変えよう!

ゼロから始めるプログラミング生活 #2 HTMLを使ってWebサイトをつくってみよう! https://mataneteta.com/programmingzero1/ 前回Webサイトを作る準備が終わりました。 ...

前回メインページ(index.html)をHTMLを使って構築しました。

次にCSS(スタイルシート)を使って

メインページのデザインを変更していきたいと思います。

CSS(スタイルシート)とは

まずは前回作成したindex.html内の<head>内に次のコードを追記してみましょう。

<style media=”screen”>
*{outline:1px solid #ff0000}
</style>

指定する色は何色でも大丈夫です。(今回使っている色は赤)

追記してindex.htmlをブラウザで開いてみましょう。

色を指定する際、Atomのパッケージ「color-picker」と「pigments」を
インストールしておくと今後CSSで色を指定する際とても便利です。
color-pickerの説明へ

pigmentsの説明へ

 
 

前回「6 CSS適応のためにHTMLを整理しよう」のときに整理したHTMLが

可視化された状態になりました。

CSSはこのボックス内やボックスそのものに命令を与えて

ボックス内の文字や色を変えたり

ボックスの配置や位置関係を変えたりすることができます。

今回追記したこのコードはボックスの位置や変化を可視化するために
あえてそのままにしています。
Webサイトには必要のないコードなので
不必要と感じたり、作業が終わり次第消しましょう。

CSSファイルを作成してHTMLファイルと紐づけよう

まずAtomメニューのファイルから

「新規ファイル」をクリックして新しいタブを作ります。

作成した新規タブに文字コード方式の宣言を記入します。

@charset “UTF-8”;

書き込んだら別名で保存を選択し

保存先にフォルダ「website」内に「css」という新規フォルダを作成し

その中に名前を「style.css」にして保存します。

次に作成したstyle.cssをHTMLファイルと紐づけます。

HTMLファイルすべての<head>タグ内に<link>タグを追記します。

<link rel=”stylesheet” href=”css/style.css”> 

 
<link>タグは<meta charset=”UTF-8″>より下に追記しましょう。

ナビゲーション内のリンクテキストを縦長から横長に変えてみよう

Webサイトのデザインをすっきりさせたいので

CSSを使って縦長になっているナビゲーション内のリンクテキストの表示を横長にします。

まずはリンクテキストの先頭についている「・」の表示を変更します。

style.cssに次のコードを追記して保存します。

nav li {list-style-type: none;}

「・」表示が消えました。

list-style-typeをnoneにしてマーカーを消しました。

このnoneの部分の表記を変えることで別のマーカーに置き換えることもできます。

「circle」 → ○
「square」 → ■
「decimal」 → 算用数字
「upper(lower)-roman」→ 大文字(小文字)のローマ数字

などがあります。

次にリンクテキストの縦表示を横表示に変えてみます。

style.cssに追記した「nav li {list-style-type: none;}」を改行を使い整理して

nav liの{ }内に次のコードを追記して保存します。
 
display: inline;

これで横並びになりました。

「display」は表示の仕方、「inline」は並べ方です。

「inline」→横並び。幅と高さが指定できない。指定できるのは左右の余白だけ。

「block」→縦並び。幅や高さ、前後左右の余白が指定できる。

次にリンクテキストの間隔を広げてみましょう。

nav liの{ }内に次のコードを追記して保存します。

padding-right: 30px

 
リンクテキストの右側に30pxの余白ができました。

ナビゲーション内のリンクテキストの仕様を変更しよう

現状のリンクテキストには下線があり、クリックすると色が変わります。

デフォルトで設定されているリンクの仕様「5つ」をCSSを使って変更します。

クリックする前(未訪問)のリンクテキストの指定 → 「a:link」
クリックした後(訪問後)のリンクテキストの指定 → 「a:visited」
リンクテキストにカーソルが載った時の変化の指定 → 「a:hover」
リンクテキストをクリックして離すまでの変化の指定 → 「a:active」
リンクテキストの下部にある下線 → 「text-decoration」

この5つの仕様を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;
}

 

追記したことで下線部が消え、移動前移動後後ともに色が変化せず

カーソルを合わせた時に色が変わるリンクに変更になりました。

CSSに記述する際
「link」→「visited」→「hover」→「active」の順に記載しないと
スタイルが適応しない可能性があるので順番には注意しましょう。

今回のまとめ

今回はCSSを使う下準備と

実際にCSSを使ってナビゲーション部分のデザイン変更を行ってみました。

次回もCSSを使いindex.html(メインページ)をデザインしていこうと思います。

ゼロから始めるプログラミング生活 #4 index.htmlのデザインを完成させよう https://mataneteta.com/programmingzoro3/ 前回CSSを使う準備を終えて 実際にCSSを使...