前回の講座記事ではCSSの基本的な部分について勉強しました。今回はCSSのプロパティについて勉強をしていきます。
CSSのよく使うプロパティ
この講座で勉強するプロパティを一覧にしてみました。復習する時にお使いください。
| プロパティ | 説明 |
|---|---|
| font系,text系 | 文字に関する指定に使う(HTML&CSS講座#4) |
| color, background系 | 色,背景に関する指定に使う |
| width系,height系 | 幅や高さの指定に使う |
| margin系,padding系 | 空白の指定に使う |
| border系 | 枠線の指定に使う |
| overflow系他 | 表示位置の指定に使う |
color
文字に色を付ける際に使われるプロパティです。色はRGB形式で『#〇〇○』または『#〇〇○〇〇○』とシャープの後に3桁or6桁をつけて指定します。イメージする色のカラーコードは調べてみてください。Atomエディタを使っている方は便利な拡張パッケージがあったと思うのでそちらを使ってみると良さそう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0502.css">
<title>CSS講座</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: #ff0000;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
このCSSのプロパティによって1位のテキストに色を付けることができました。今回はカラーコードを用いて書きましたが、redやorangeなどの色名をあたいに指定しても大丈夫です。
background系
背景について様々な指定ができます。background-colorは背景の色を指定することができ、background-imageは背景画像を指定することができます。background-imageを使う時はbackground-repeatも覚えておくと良さそう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0504.css">
<title>CSS講座</title>
</head>
<body>
<div class="contents-area">
<h1>カタツムリ</h1>
<p>カタツムリは雨が好き。それは梅雨の季節のあじさいを見れば誰もが納得するだろう。しかしそれを科学的に証明しようとなると途端に難しくなる。なぜならば科学的な視点というのは主観的ではなく<span class="marker">客観的な事実のみを積み重ねていかなければならないから</span>だ。</p>
</div>
</body>
</html>body {
background-image: url("./back.jpg");
}
.contents-area {
background-color: #fff;
}
.marker {
background: linear-gradient(transparent 50%, #ff8 50%);
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
マーカーペンも背景色を応用することで作れます。値の方のlinear-gradient()はグラデーションを指定するものです。アイデア一つで色々使えるのは楽しいですよね。
width系,height系
widthやheightを用いるとコンテンツの幅や高さを指定できます。基本的にはwidthのみを指定することが多いです。さらにwidthには最小幅や最大幅を指定することができるmin-width,max-widthもあります(heightの方にもあります)。
最大幅や最小幅を指定することで端末の画面のサイズが変わった場合でも、コンテンツのサイズが指定範囲を超えることがなくなります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0506.css">
<title>HTML講座</title>
</head>
<body>
<h1>自己紹介</h1>
<p>〇〇です。好きなものは＊＊で、嫌いなものは××です。</p>
<img class="my-image-icon" src="./profile_image.jpg" alt="プロフィール画像です">
<p>PCの方はブラウザを拡大縮小してみてもらえればわかると思います。</p>
</body>
</html>body {
width: 100%;
}
.my-image-icon {
width: 50%;
min-width: 400px;
max-width: 1000px;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
ブラウザのウィンドウを拡大縮小すると画像が400px幅より小さくなることがないのがわかると思います。
margin系,padding系
どちらも空白について指定をするプロパティです。2つのプロパティの違いについてはコラムで扱うことにして、とりあえずは使い方を見ていきましょう。
marginやbottomの値の指定の仕方については少し複雑なので書き方をまとめてみました。
セレクタ {
margin: 値1 値2 値3 値4;
margin: 値1 値2;
margin: 値1;
}値を4つ指定した場合は、『値1が上方向の空白に、値2が右方向の空白に、値3が下方向の空白に、値4が左方向の空白に』対応します。上から順番に時計回りと覚えておくと良いです。
値を2つ指定した場合は、『値1が上下方向の空白に、値2が左右方向の空白に』対応します。
値を1つ指定した場合は、『値1が上下左右方向の空白に』対応します。
それらをふまえて以下のソースコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0508.css">
<title>HTML講座</title>
</head>
<body>
<h1>空白の確認</h1>
<p>paddingに値を4つ指定した場合</p>
<p class="content-a">いちご</p>
<p>paddingに値を2つ指定した場合</p>
<p class="content-b">ばなな</p>
<p>paddingに値を1つ指定した場合</p>
<p class="content-c">りんご</p>
</body>
</html>.content-a {
background-color: #ff0000;
width: 120px;
padding: 10px 20px 30px 40px;
}
.content-b {
background-color: #ff0000;
width: 120px;
padding: 10px 20px;
}
.content-c {
background-color: #ff0000;
width: 120px;
padding: 10px;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
このソースコードではわかりやすいようにwidthとbackground-colorを指定してpaddingの値のみを変化させてみました。それぞれの部分を見比べて確認してみてください。
またpaddingやmarginは方向を指定して空白を指定することも可能です。
セレクタ {
margin-top: 値;
margin-bottom: 値;
margin-left: 値;
margin-right: 値;
}border系
枠線について指定をするプロパティです。borderの値には線の太さ・線の種類・線の色を指定することができます。
線の種類については下記の表を参考にどうぞ。
| 線の種類 | 説明 |
|---|---|
| solid | 普通の線 |
| dotted | 点線(…) |
| dashed | 破線(- – -) |
| double | 二重線(=) |
borderもpaddingやmarginと同じく各方向のみを指定することができます。
そのほかにもborder-radiusで枠線の角について指定するものや、box-sizingで枠線をwidthに含めるかを指定するものがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0510.css">
<title>HTML講座</title>
</head>
<body>
<h1>明日は晴れるか</h1>
<p>今日の天気が晴れならば、明日の天気は雨になりにくいでしょう。</p>
<h2>今日の天気から予測</h2>
<div class="point-box"><p>晴→雨:確率的に高くはない</p></div>
</body>
</html>h1 {
border-bottom: 1px solid #888;
}
.point-box {
border: 2px solid #f44;
border-radius: 5px;
padding: 3px;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
marginとpaddingの違い
marginとpaddingについて勉強した時にそのプロパティの違いについては説明しませんでした。その理由は2つの違いを説明するにはborderについて先に勉強してもらった後の方が都合がよかったからです。以下のソースコードを試してみてください。『marginとborderを指定したもの』と『paddingとborderを指定したもの』を用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0512.css">
<title>HTML講座</title>
</head>
<body>
<p>marginとborder</p>
<p class="sample-a">サンプルA</p>
<p>paddingとborder</p>
<p class="sample-b">サンプルB</p>
</body>
</html>.sample-a {
margin: 10px;
border: 1px solid #888;
}
.sample-b {
padding: 10px;
border: 1px solid #888;
}
確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
結果を見てもらうと違いがわかると思いますが、borderの枠線の外側に空白が入るのがmarginで、内側に空白が入るのがpaddingですね。borderだけではなくbackground-colorでも確認できます。コードを書き換えて試してみてください♪
overflow系
コンテンツの幅が大きすぎる場合にどう処理するかを指定するプロパティです。overflow-xを使うことで幅について、overflow-yを使うことで高さについてそれぞれ記述することが可能です。保たんどの場合は『overflow-x: auto;』を使うだけのような気がします(人によっては値にclipを使う方もいるかもですがその辺りは必要になったら適宜調べてみてください)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0514.css">
<title>HTML講座</title>
</head>
<body>
<figure class="item-a">
<table>
<tbody>
<tr>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
<td class="cell-width">あいうえお</td>
</tr>
</tbody>
</table>
</figure>
</body>
</html>.cell-width {
min-width: 200px;
}
item-a {
overflow-x: auto;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
ブラウザ幅を超えた表が表示されたと思います。『overflow-x: auto;』を指定したのでそのコンテンツ部分に対してスクロールバーが表示されましたね。
まとめ
今回はプロパティについて基本的なものは一通り勉強しました。今回まででHTMLとCSSの基本的な部分はほとんど勉強し終わりました。これらのプロパティをうまく組み合わせて自分の理想のwebサイトを作りましょう！次回はCSSの残りで擬似要素や擬似クラスについて説明していきます。
次々回からは実際にwebサイトをデザインしてみましょう！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
