cssでもっと楽な書き方を学ぼう

こんにちは!

takafumiです。

『3日で学ぶ cssの書き方』の2日目となりました。

1日目の『cssの基本的な書き方を学ぼう』では、見た目を変更したいタグにstyle属性を追加して、文字の色や大きさを変更できるようになりました。

2日目の今日は、新しい属性を使って要素に装飾を追加していきましょう。

さらに、cssを外部化して、もっと楽なcssの書き方を勉強します。

takafumi
それでは、2日目のレッスンスタートです!

borderで線を追加しよう

cssでは文字の大きさといった見た目だけでなく、要素に対してを追加することもできてしまいます。

線を追加することで、表現力がぐっと高まります!

見出しの<h2>タグに線を追加する

<h2>タグで生成された「それではベスト5の発表です」のところに注目してみましょう。

ちょっと寂しい見出しのh2タグ

 

たしかに、<h2>タグのおかげで周りのテキストよりは目立っていますが、もう少し見出し感がでるように周りに線を追加してみます。

 

index.phpを開いて、<h2>タグを次のように修正してみましょう。


(省略)

<h2 style="border: 1px solid #979797;">それではベスト5の発表です</h2>

(省略)

<h2>タグstyle属性を追加して、border属性を記述します。

あれ?

でも、なんか今までのcssの書き方とは違いますよね?

これまで1つの属性名に対して、1つの属性値であることがほとんどでした。

それは、文字の色を指定するときには1つの属性値だけで十分指定できるからです。

 

しかし、線を追加する場合は違います。

たとえば、あなたが私から

takafumi
ちょっと、写真の周りに枠線を追加しておいて

と言われたらどうでしょう。

あなた
線を追加しろって、言われたって「何色」で「どれくらいの線幅」なんだろう。。

と、あなたは考えるかもしれません。

 

cssで線を追加するときも同様です。

border属性の値には、「線の幅」「線の種類」「線の色」を3つ続けて指定します。

border属性の記述方法

上の場合だと、灰色で線幅が1pxの実線を追加することを意味しています。

2番目の値にあたる、線種を変えると点線を引くこともできちゃいます。

Result』をクリックして確認してみましょう。

See the Pen css-3days-01 by takafumi (@takafoo) on CodePen.0

 

さて、border属性を追加したのでファイルを保存してリロードして確認しましょう。

border属性を追加してh2タグに実線を追加

 

大見出しの<h1>タグに下線を追加しよう

ページトップにある「誰にも教えたくない東京の〜」という大見出しに下線を追加します。

線の種類は実線ではなく、点線にします。

要素の下の辺にだけ線を追加する場合には、border-bottom属性を使います。

<h1>タグのstyleborder-bottom属性を追加してみましょう。

線種に dashed を指定することで、点線にすることができます!


(省略)

<h1 style="font-size:25px; color: #0B4D9D; border-bottom: 2px dashed #0C4D9D;">誰にも教えたくない東京のオススメ飲食店ベスト5</h1>

(省略)

ページをリロードしてみましょう。

大見出しに下線が追加されました!

border-bottom属性で大見出しに下線を追加

 

background-colorで背景色を変えてみよう

見出しの<h2>タグに枠線がついたところで、今度は背景色を追加してみましょう。

background-color属性を使うことで、背景色を追加することができます。

<h2>タグのstyleにbackground-color属性を追加します。


(省略)

<h2 style="border: 1px solid #979797; background-color: #F4F4F4;">それではベスト5の発表です</h2>

(省略)

background-colorの属性値にはを指定するだけです。

保存して、ページをリロードしてみましょう。

見出しに灰色の背景色がつきましたね!

background-colorで見出しに背景色を追加

 

cssファイルを外部につくってみよう

これまで、見た目を変えたい要素のタグにstyle属性を追加して、少しずつウェブページの見た目も華やかにしてきました。

でも、これまでの方法だと後々困ることがでてきます。

 

cssファイルを作るメリット

では、どうして各要素にstyle属性を追加する方法が駄目なのでしょうか?

次のようなページを例に考えてみましょう!

 

これは、ある飲食店の人気ランキングのページです。

Result」をクリックすると、見出しだけのシンプルなランキングが表示されます。

See the Pen css-3days-02 by takafumi (@takafoo) on CodePen.0

そこで私はこんなことを考えました。

takafumi
ランキングの見出しが目立たないから、文字の色を赤にしてみよう

<h3>タグstyle属性を追加して、color属性にredを指定することにしました。

記述したものが次のコードです。

See the Pen css-3days-03 by takafumi (@takafoo) on CodePen.0

Result」をクリックして、ランキングの見出しが赤色になったのを確認してみましょう。

 

これで、問題ないように思えるのですが、ちょっと考えてみましょう。

ランキングページができて、気をよくした私はこんな事を考えました。

takafumi
よし、トップ10まで表示させてみよう!

<h3>タグをランキング10まで追加しただけの、シンプルなコードです。

Result」をクリックして、確認してみましょう。

強烈な赤色でランキングが表示されています。

See the Pen css-3dasy-day3 by takafumi (@takafoo) on CodePen.0

私はまたしても、こんなことを考えました。

takafumi
ちょっと、赤が強烈だなー。やっぱり、緑色に変えよう。

しかし、コードをみた私は愕然としました。

なぜなら、すべての<h3>タグに対して、color属性の値を red → green に変える作業をしなくてはいけないからです!

これが、もしトップ100を掲載するページだったらどうでしょうか?

変更を加える度に、同じ変更を100回しなくてはいけないのです。

こうなると、どうやら要素タグにstyle属性を追加する方法は得策とは言えないようです。

cssファイルを作成する

要素タグの見た目を変える便利な方法があるので、それをやってみましょう。

まず、tokyo-best5 フォルダの中にcssという名前のフォルダを作成します。

さらに、css フォルダ内に新しく style.css という空のファイルを作成します。

style.cssファイルを作成する

 

linkタグでcssファイルをつなげよう

cssファイルができたところで、index.htmlstyle.css を繋げてみましょう。

<head>タグの内側に<link>タグを使うことで、外部のファイルとindex.htmlを繋げられます。

hrefにはファイルへのパスを記述すれば大丈夫です!


(省略)

<head>
	<title>東京のオススメ飲食店</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

(省略)

 

cssファイルから要素タグの見た目を変えてみよう

これまで、変更したい要素タグに対して、直接属性を追加してきました。

ここからは、cssファイル内で要素タグの見た目を変更する方法について一緒に勉強していきましょう!

大見出しのh1タグをcssファイルから変更しよう

style.css ファイルを開きます。

大見出しの<h1>タグの見た目を変更するので、style.cssに次のように記述します。


/* 大見出し */
h1 {
	
}

要素タグ名である h1 のあとに { }を記述するだけです。

あとは、この括弧の中に属性を追加します。


/* 大見出し */
h1 {
	font-size:25px; 
	color: #0B4D9D; 
	border-bottom: 2px dashed #0C4D9D;
}

ところで、このコードの中の /* */ という部分は何でしょうか?

これは、コメント文と呼ばれるもので、開発者側がメモとして残すことができる書き方です。

/* */ の中に書かれたテキストは、ページに何の影響も与えません。

後々、コードの記述量が増えても混乱することがないように、今のうちからメモを残す癖をつけていきましょう!

 

index.html を開いて、<h1>タグの中に追加したstyle属性を削除しましょう。


(省略)

<h1>誰にも教えたくない東京のオススメ飲食店ベスト5</h1>

(省略)

保存して、ページをリロードしてみましょう。

トップの大見出しが何も変わっていなければ、大丈夫です!

<h1>タグに追加したstyle属性を削除しても、style.css でh1タグのスタイルを変更しているので、ページをリロードしても以前と同じ状態になります。

 

cssファイルを読み込んでh1タグを変える

 

カンのいいあなたなら、もう気づいているかもしれまんね。

あなた
そっか。

さっきの飲食店のランキングサイトも、cssファイルを作成して、h3タグに対してcolor:red; を指定すればいいんだ!これなら、トップ100まで表示しても、cssファイルの一箇所だけを修正するだけで済んじゃうもんな。

実際に、cssファイルを使ったページが下のようになります。

HTML」「CSS」をクリックして確認してみましょう。

See the Pen css-3days-04 by takafumi (@takafoo) on CodePen.0

これが、cssファイルを作成するメリットです。

今日のレッスンはここまで

お疲れ様でした。

2日目のレッスンはここで終わりです。

今日はborderbackground-colorなどの属性をつかって、要素タグに装飾を追加しました。

さらに、style.css というファイルを作成して要素タグごとにスタイルを指定する方法についても勉強しました。

今後は style.css ファイルに記述していく形になります!!

 

続きが気になる方は、こちらの『cssでclassとidの書き方をマスターしよう』へお進みください。

『3日で学ぶ cssの書き方』の目次はこちら