💁♂️ 【お知らせ】塾専用HP作成サービス
こんにちは！
takafumiです。
『3日で学ぶ cssの書き方』の2日目となりました。
1日目の『cssの基本的な書き方を学ぼう』では、見た目を変更したいタグにstyle属性を追加して、文字の色や大きさを変更できるようになりました。
2日目の今日は、新しい属性を使って要素に装飾を追加していきましょう。
さらに、cssを外部化して、もっと楽なcssの書き方を勉強します。
目次
borderで線を追加しよう
cssでは文字の大きさや色といった見た目だけでなく、要素に対して線を追加することもできてしまいます。
線を追加することで、表現力がぐっと高まります！
見出しの<h2>タグに線を追加する
<h2>タグで生成された「それではベスト5の発表です」のところに注目してみましょう。
たしかに、<h2>タグのおかげで周りのテキストよりは目立っていますが、もう少し見出し感がでるように周りに線を追加してみます。
index.phpを開いて、<h2>タグを次のように修正してみましょう。
(省略)
<h2 style="border: 1px solid #979797;">それではベスト5の発表です</h2>
(省略)<h2>タグにstyle属性を追加して、border属性を記述します。
あれ？
でも、なんか今までのcssの書き方とは違いますよね？
これまで１つの属性名に対して、１つの属性値であることがほとんどでした。
それは、文字の色を指定するときには１つの属性値だけで十分指定できるからです。
しかし、線を追加する場合は違います。
たとえば、あなたが私から
と言われたらどうでしょう。
と、あなたは考えるかもしれません。
cssで線を追加するときも同様です。
border属性の値には、「線の幅」「線の種類」「線の色」を3つ続けて指定します。
上の場合だと、灰色で線幅が1pxの実線を追加することを意味しています。
2番目の値にあたる、線種を変えると点線を引くこともできちゃいます。
『Result』をクリックして確認してみましょう。
See the Pen css-3days-01 by takafumi (@takafoo) on CodePen.0
さて、border属性を追加したのでファイルを保存してリロードして確認しましょう。
大見出しの<h1>タグに下線を追加しよう
ページトップにある「誰にも教えたくない東京の〜」という大見出しに下線を追加します。
線の種類は実線ではなく、点線にします。
要素の下の辺にだけ線を追加する場合には、border-bottom属性を使います。
<h1>タグのstyleにborder-bottom属性を追加してみましょう。
線種に dashed を指定することで、点線にすることができます！
(省略)
<h1 style="font-size:25px; color: #0B4D9D; border-bottom: 2px dashed #0C4D9D;">誰にも教えたくない東京のオススメ飲食店ベスト5</h1>
(省略)ページをリロードしてみましょう。
大見出しに下線が追加されました！
background-colorで背景色を変えてみよう
見出しの<h2>タグに枠線がついたところで、今度は背景色を追加してみましょう。
background-color属性を使うことで、背景色を追加することができます。
<h2>タグのstyleにbackground-color属性を追加します。
(省略)
<h2 style="border: 1px solid #979797; background-color: #F4F4F4;">それではベスト5の発表です</h2>
(省略)background-colorの属性値には色を指定するだけです。
保存して、ページをリロードしてみましょう。
見出しに灰色の背景色がつきましたね！
cssファイルを外部につくってみよう
これまで、見た目を変えたい要素のタグにstyle属性を追加して、少しずつウェブページの見た目も華やかにしてきました。
でも、これまでの方法だと後々困ることがでてきます。
cssファイルを作るメリット
では、どうして各要素にstyle属性を追加する方法が駄目なのでしょうか？
次のようなページを例に考えてみましょう！
これは、ある飲食店の人気ランキングのページです。
「Result」をクリックすると、見出しだけのシンプルなランキングが表示されます。
See the Pen css-3days-02 by takafumi (@takafoo) on CodePen.0
そこで私はこんなことを考えました。
<h3>タグにstyle属性を追加して、color属性にredを指定することにしました。
記述したものが次のコードです。
See the Pen css-3days-03 by takafumi (@takafoo) on CodePen.0
「Result」をクリックして、ランキングの見出しが赤色になったのを確認してみましょう。
これで、問題ないように思えるのですが、ちょっと考えてみましょう。
ランキングページができて、気をよくした私はこんな事を考えました。
<h3>タグをランキング10まで追加しただけの、シンプルなコードです。
「Result」をクリックして、確認してみましょう。
強烈な赤色でランキングが表示されています。
See the Pen css-3dasy-day3 by takafumi (@takafoo) on CodePen.0
私はまたしても、こんなことを考えました。
しかし、コードをみた私は愕然としました。
なぜなら、すべての<h3>タグに対して、color属性の値を red → green に変える作業をしなくてはいけないからです！
これが、もしトップ100を掲載するページだったらどうでしょうか？
変更を加える度に、同じ変更を100回しなくてはいけないのです。
こうなると、どうやら要素タグにstyle属性を追加する方法は得策とは言えないようです。
cssファイルを作成する
要素タグの見た目を変える便利な方法があるので、それをやってみましょう。
まず、tokyo-best5 フォルダの中にcssという名前のフォルダを作成します。
さらに、css フォルダ内に新しく style.css という空のファイルを作成します。
linkタグでcssファイルをつなげよう
cssファイルができたところで、index.html と style.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ファイルを作成して、h3タグに対してcolor:red; を指定すればいいんだ！これなら、トップ100まで表示しても、cssファイルの一箇所だけを修正するだけで済んじゃうもんな。
実際に、cssファイルを使ったページが下のようになります。
「HTML」「CSS」をクリックして確認してみましょう。
See the Pen css-3days-04 by takafumi (@takafoo) on CodePen.0
これが、cssファイルを作成するメリットです。
今日のレッスンはここまで
お疲れ様でした。
2日目のレッスンはここで終わりです。
今日はborderやbackground-colorなどの属性をつかって、要素タグに装飾を追加しました。
さらに、style.css というファイルを作成して要素タグごとにスタイルを指定する方法についても勉強しました。
今後は style.css ファイルに記述していく形になります！！
続きが気になる方は、こちらの『cssでclassとidの書き方をマスターしよう』へお進みください。
