前回までで一通りHTMLのタグの話が終わったので、今回からCSSの方に入っていきます。HTMLよりは覚えることが多く大変ですが、その分webページを装飾できるようになるので、デザインを楽しみつつ学んでもらえたらなと思います。
CSSの基礎
最初にCSSを使うための基礎としてHTMLファイルとの関連づけをする方法を学びます。CSSを書いたファイルが実際にHTML文書に適用されるために書かなければならないところなのでめちゃくちゃ大事です！
書き方はHTMLファイルの方にlinkタグを使って以下のように書きます。ここでは例としてtc0401.htmlのHTML文書にtc0402.cssのCSSファイルを関連づけてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0402.css">
<title>HTML講座</title>
</head>
<body>
<h1>記事のタイトル</h1>
<p>このページではhtmlを中心に学んでいきます。</p>
</body>
</html>h1 {
color: red;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
htmlの方のソースコードを見てください。5行目でCSSファイルとの関連づけを行っています。この部分で指定するCSSファイルはhtmlファイルと同じ階層に保存してください。(ファイルのパスが書ける人は好きなところに保存してもらって構いません。各自で5行目のhrefの中身をいじってください)
このファイルを実行するとh1タグで囲まれていた、”記事のタイトル”という部分が赤色になったと思います(CSSファイルでh1タグで囲まれたところの文字の色を赤に変更するソースコードを書いたためです)。
無事に見出しの文字の色が赤色になった人はHTMLファイルが実行されるときにCSSファイルの内容が適用されているのでOKです。
このようにCSSファイルをhtmlファイルと関連づけして使うのが一般的なので最初のうちはこの書き方に慣れておきましょう。styleタグを使って直接html文書の中に書くこともできますがHTMLファイルが煩雑になりやすいので、CSSのコードが長くなる場合はstyleタグを極力使わないようにしてくださいね。
classとid
CSSを書くときにはデザインを適用する場所とその処理(効果)を書くことになります。その場所を指定するときに使うのがタグ名やclass名, idになります。『幾つもあってわかりづらい！どうして複数あるの！！』という人のために例をあげてclassとidについて解説していきます。
最初にランキングページを作ることを想定してみましょう。htmlファイルはliタグとolタグを使って以下のように書きますよね。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0404.css">
<title>HTML講座</title>
</head>
<body>
<h1>おすすめの本ランキング</h1>
<p>このページではおすすめの本を紹介します。</p>
<ol>
<li>3匹の牛</li>
<li>3匹のネズミ</li>
<li>3匹のオオカミ</li>
</ol>
</body>
</html>このとき1位だけを赤くしたい場合はどうすれば良いでしょう。tc0402.cssの時と同じ要領で、liタグに対してデザインを適用させるCSSファイルを作成してみましょう。
li {
color: red;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
実行してみると1位から3位まで全ての文字が赤くなってしまいました。これはCSSファイルのデザインが全てのliタグに対して適用されてしまったためです。
特定の部分だけにデザインを適用させたい場合はどうすれば良いのでしょうか。ここで登場するのがclassとidです。全てのタグにはclassやidをつけることができ、それにより他と区別をつける仕組みが備わっています。『人に例えるなら同じ鈴木さんでも名前が違えば区別できるよね』というわけですね。
このclassやidによってデザイン調整が可能になるというわけです。具体的なソースコードで見ていきましょうか。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0406.css">
<title>HTML講座</title>
</head>
<body>
<h1>おすすめの本ランキング</h1>
<p>このページではおすすめの本を紹介します。</p>
<ol>
<li class="rank-top">3匹の牛</li>
<li>3匹のネズミ</li>
<li>3匹のオオカミ</li>
</ol>
</body>
</html>.rank-top {
color: red;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
これを実行してみると1位のみにデザインが適用されているのがわかると思います。今回はclassを使いましたがidについても同様に個別のデザイン調整が可能です。次節でclassとidの違いを述べることにしてもう少しコードをみていきましょう。
【classを用いた場合】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0408.css">
<title>HTML講座</title>
</head>
<body>
<h1>レシピ研究ノート</h1>
<p>牛乳200mlを温め砂糖を溶かします。そこによく混ぜた全卵2個・卵黄2個をいれ<span class="marker">泡立てないように</span>混ぜます。その液体をこして温めます。あとはゼラチンで固めるか、蒸して滑らかなプリンを目指すか選んでください。(超絶適当なレシピ!まねしちゃダメ！絶対！！)</p>
</body>
</html>.marker {
background: linear-gradient(transparent 50%, #ff8 50%);
font-weight: bold;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
classを用いた場合、CSSファイルで指定する際にはクラスの属性値の前に『.』をつける必要があります。
【idを用いた場合】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0410.css">
<title>HTML講座</title>
</head>
<body>
<h1>野菜日記</h1>
<p>枝まめ！おいしい！！ハッピー！！！</p>
<div id="hitokoto">枝豆にはカメムシが寄ってきます。危ないですのでネットをかけて育てましょう!!</div>
</body>
</html>#hitokoto {
font-weight: bold;
color: #ff8888;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
idを用いた場合はCSSの方の書き方が変わり、『.』ではなく『#』をつけます。
classとidの違い
classとidの違いを簡単に述べるならば一つのhtmlファイルの中で何回でも使えるか否かです。具体的に述べるならば、idの方は同じid名を振ったものを複数作ることができませんが、classの方は同じclass名を振ったものを複数作ることができます。
サンプルコードをみてください。このコードでは、markerというクラスが何回も使われているのが分かります。一方で、commentというidは一度しか使われていません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0412.css">
<title>HTML講座</title>
</head>
<body>
<h1>生活垣間見ブログ</h1>
<p>コンビニに行ったらついついスイーツコーナーに立ち寄っちゃうよね。<span class="marker">ついついだよ！</span>え?まっすぐそこに向かったって??<span class="marker">細かいことは気にするな！</span></p>
<div id="comment">苺大福おいしい。苺大福は世界平和をもたらす！</div>
</body>
</html>.marker {
background: linear-gradient(transparent 50%, #ff8 50%);
font-weight: bold;
}
#comment {
font-size: 0.8em;
color: #888;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
このサンプルコードのようにclassを用いる際には、同じデザインを繰り返し使う可能性があるものを対象とします。一方でidを用いる場合というのは、そのページで1回しか使わないデザインをする際に用いられます。この違いが理解できればとりあえず大丈夫です。使い分けはそのうちコードを書くのに慣れてきて余裕ができたら調べてみてくださいね。
最後にCSSの場所指定の仕方の総まとめ的なソースコードを見てもらいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0414.css">
<title>HTML講座</title>
</head>
<body>
<h1>明日は晴れるか</h1>
<p>今日の天気が晴れならば、明日いきなり雨に変わる確率は<span class="blue">低い</span>でしょう。逆に今日の天気が雨ならば、明日の天気が雨になる確率は<span class="red">高い</span>でしょう。</p>
<h2>今日の天気から予測</h2>
<p>今日の天気が晴れならば明日の天気はどうなるのか考えてみよう。晴れの次の日は0.5の確率で晴れに、0.3の確率で曇りに、0.1の確率で雨になるとします。同様に今日が曇りや雨の場合の明日の天気に移行する確率がわかれば、確率的な予測が可能となります。</p>
<div id="matome">ぐへぐへぐへー</div>
</body>
</html>p .blue {
color: blue;
}
p .red {
color: red;
}
#matome {
font-size: 1.2em;
border: 2px solid #444;
border-radius: 5px;
padding: 3px;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
場所の指定は入れ子上になっている場合は外側のものから順に半角スペースで並べて書くことで限定して指定することができます。
例えばdivタグで囲まれた部分の中にpタグが使われている場合を考えて見ます。他のpタグには適用したくないけど、divタグの中にあるpタグの部分には適用したいデザインがあったとします。こういう場合は『div p {処理内容}』としてあげれば良いということです。
CSSでデザインを適用させる際には、デザインを適用させる場所と具体的な処理を書いてあげる必要があり、場所の指定にはタグ名やclass, idを用いることができる。classとidの違いは1つのwebページ上で同じ属性値を使えるかどうかである。
入れ子上になっている場所にCSSを適用させる場合には、タグやclass名, id名を半角スペース区切りで並べることで限定的にデザインを指定できる。
CSSのデザイン(font, text系)
ここまでCSSファイルが登場してきましたが具体的な処理について一切触れていなかったので、今度はCSS側のデザインの処理について見ていきます。処理部分は覚えることがたくさんあるので何回かの記事に分けて紹介していこうと思います。
処理の解説に入る前に簡単な用語の解説から入りましょう。
以下のCSSファイルは先ほどのtc0404.cssの再掲です。
li {
color: red;
}このファイルを用いて各部分の呼び方について紹介しておきます。
このソースコードの『li』の部分をセレクタと言います。セレクタという言葉通りデザインを適用する場所を選んでいるわけですね。
また2行目左側の『color』の部分をプロパティと言います。また、右側の『red』の部分を値と言います。プロパティと値はセットで用い、これを使ってデザインをしていくことになります。
以降ではプロパティと値の部分について個別に詳しく見ていきます。
font
文字全般を指定できるプロパティです。最初はfont-〇〇という個別に設定できるプロパティを用いて書きましょう。慣れてきたらまとめて書いても大丈夫です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0416.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample3">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample4">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
font: italic 24px 'MS 明朝';
}
.sample2 {
font: bold 1.5em / 150% 'MS ゴシック';
}
.sample3 {
font: oblique bold 2.0rem / 150% 'sans-serif';
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
font-family
文字のフォントの種類を指定できるプロパティです。値にはフォント名を書くことになりますが、このとき複数書くのが一般的です。理由は使っている端末やブラウザによって入っているフォントが異なるためです。そのため意図しない表示を防ぐためにも、それぞれの端末で表示できるフォントを必ず一つは値に入れるようにしてください。(font-family関係で調べると出てくるのでそれをそのまま用いても良いでしょう)
以下は面白そうなフォントを入れてみました。フォント設定はbodyタグに対して一括で適用させますが、今回はフォントが適用されたかを比較して確認するために特別にpタグに対して適用させてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0418.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
font-family: 'Bradley Hand','Wawati SC','Mv Boli','ヒラギノ明朝 ProN','Hiragino Mincho ProN','MS UI Gothic',sans-serif;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
フォントが変化したのが確認できたと思います。
font-size
文字の大きさを指定することができるプロパティです。値には数値に単位をつけて書いたり、smallやlargeといった単語を書くこともできます。最初に覚えておいた方が良いのは、pxとemと%を用いた書き方です。他のremやexなんかを用いた書き方は余裕があれば試してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0420.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample3">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample4">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
font-size: 30px; /*ピクセル単位で大きさを指定*/
}
.sample2 {
font-size: 2.0em; /*通常の文字の大きさを1としたときに何倍の大きさにするかを指定*/
}
.sample3 {
font-size: 150%; /*親要素で設定されたfont-sizeを何倍の大きさにするかを指定*/
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
font-weight
文字の太さを変更することができるプロパティです。値には数値(100, 200, 300, …, 900の9段階)を用いることもありますが、boldを用いることが多いです。初期値はnormalで特に何も指定がなければnormalが適用された状態になっています。boldだけ覚えておけば基本的には大丈夫でしょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0422.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample3">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
font-weight: 500;
}
.sample2 {
font-weight: bold;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
font-style
文字を傾けたいときに用いるプロパティです。値には斜体(oblique)やイタリック体(italic)があります。初期値はnormalになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0424.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample3">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
font-style: italic;
}
.sample2 {
font-style: oblique;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
他のfont-〇〇のプロパティは使う頻度が低いのでここでは割愛します。気になる人は調べてみてください!
text-align
これは文字を中央揃えにしたり左寄せにしたりする際に使われるプロパティです。タイトルなんかを中央に表示させる際にはこれを用いることになりますね。覚えておいて欲しい値は、center, leftです。(あまり使わないけどrightもちゃんとあるよ)ほとんどこれで事足りますが、たまにstartやendという値を用いているwebページがあったりしまね。基本的にはcenterとleftがわかればOKです！
初期値はleftになっているので、中央揃えをしたいときに書けば大丈夫です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0426.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample2">abcdefgABCDEFGあいうえお1234567890</p>
<p class="sample3">abcdefgABCDEFGあいうえお1234567890</p>
</body>
</html>.sample1 {
text-align: left;
}
.sample2 {
text-align: center;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
line-height
これは行と行の幅を調節することができるプロパティです。行が詰まりすぎて読みづらくなりそうなときは、このプロパティを用いて行間隔を広げましょう。
値は数値だけで書くこともできます。(1.5と書くことで150%や1.5emと同じ意味に解釈されます)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0428.css">
<title>HTML講座</title>
</head>
<body>
<p class="sample1">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p class="sample2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</body>
</html>.sample1 {
line-height: 3.0;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
まとめ
今回はCSSの基本ということで、CSSのファイルとHTMLファイルとのリンク方法やセレクタ、プロパティ、値といった用語まで勉強しました。また後半ではfontやテキスト関連のプロパティを学びましたね。
次回は今回に引き続きCSSの主要なプロパティについて見ていきます。CSSを用いて色をつけられるようになるとデザインの幅がぐんと広がって楽しいので期待して待っていてくださいね！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
