更新日: 2017年03月23日
公開日: 2015年12月03日

CSSの頻出プロパティを解説！　ゼロから始めるHTML/CSS講座Vol7

ゼロから始めるHTML/CSS講座CSSでよく使われるプロパティ
プロパティ紹介
color
background-color
font-size
text-align
border
補足:リンクの下線を消す
HTML/CSSのソース表示
課題

ゼロから始めるHTML/CSS講座CSSでよく使われるプロパティ

プロパティ紹介

CSSのプロパティの中でも利用頻度の高いプロパティについて紹介していきます。前回「CSSの適用方法」で作成した桃太郎あらすじのCSSファイル以下のように変更してください。


body {
    background-color: #ffffe0;
}

h1 {
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    border-bottom: solid 1px #000000;
}

p {
    color: #0000ff;
    font-size: 20px;
}

body要素、h1要素、p要素に様々なCSSが適用されます。

color

文字色を指定する際に使用します。


body {
    background-color: #ffffe0;
}

h1 {
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    border-bottom: solid 1px #000000;
}

p {
    color: #0000ff;
    font-size: 20px;
}

サンプルではh1要素の文字色を赤、p要素の文字色を青にしています。

色の指定方法は複数あり、以下で一部を紹介します。

色名英語で色名を表す。例) red, lime, blue
#rrggbb R(赤)、G(緑)、B(青)の色をそれぞれ00～ffの2桁の16進数で表す。例) #ff0000, #00ff00, #0000ff
rgb(値, 値, 値) R(赤)、G(緑)、B(青)の色をそれぞれ0～255の10進数で表す。例) rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)

どの形式で指定してもWebページの表示結果は一緒ですが、CSSでの色指定は一般的に#rrggbbを利用します。


h1 {
    color: red;
}


h1 {
    color: #ff0000;
}


h1 {
    color: rgb(255, 0, 0);
}

例として、上記3つはどれも「h1要素の文字色を赤にする」というCSS指定になります。今後は#rrggbbの形式を利用してcolorプロパティの値を指定しましょう。

CSSでは基本色(16色)として以下が定義されています。

CSS基本色(16色)

color値(#rrggbb)を覚える必要はありません。必要に応じて調べて利用しましょう。

background-color

背景色を指定する際に使用します。


body {
    background-color: #ffffe0;
}

h1 {
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    border-bottom: solid 1px #000000;
}

p {
    color: #0000ff;
    font-size: 20px;
}

サンプルでは背景色を淡黄色(#ffffe0)にしています。

色の指定方法はcolorプロパティと同じです。

※色に関するプロパティの値の指定方法はどれも同じです。

font-size

文字の大きさを指定する際に使用します。


body {
background-color: #ffffe0;
}

h1 {
color: #ff0000;
font-size: 28px;
text-align: center;
border-bottom: solid 1px #000000;
}

p {
color: #0000ff;
font-size: 20px;
}

サンプルではh1要素の文字サイズを28px、p要素の文字サイズを20pxにしています。

文字サイズにはCSS指定がなかった際の標準サイズがあり、ほとんどのブラウザで標準サイズは16pxとなっています。

大きさの指定方法は複数あり、一部を紹介します。

px指定 ピクセル単位の値を指定する。表示はディスプレイの解像度に依存する。例) 10px, 16px, 24px
%指定 親要素に対する相対値を指定する。親要素にサイズ指定がない場合、ブラウザ標準サイズからの相対比となる。例) 62.5%, 100%, 150%
キーワード指定 7つのキーワードによる絶対値を指定する。 mediumが標準サイズとなる。例) small, medium, large

3つのうち、%指定は親要素の影響を受けるため、指定の仕方が複雑になりがちです。

例として、下記size.htmlとsize.cssを作成してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>%指定</title>
    <link rel="stylesheet" href="size.css">
</head>
<body>
    <p>16px × 75% = 12px相当</p>
    <ul>
        <li>16px × 200% = 32px相当</li>
        <li>
            <p>16px × 200% × 75% = 24px相当</p>
        </li>
    </ul>
</body>
</html>


p {
    font-size: 75%;
}

li {
    font-size: 200%;
}

p要素のfont-sizeはCSSで75%に指定されていますが、親要素の影響により同じp要素でも文字サイズが異なる結果となります。

font-sizeは一般的に%指定を中心に利用したほうが良いと言われています。しかし%指定は前述の通り指定が複雑になりがちなため、慣れないうちはpx指定の利用を推奨します。

なおh1要素はCSSを指定しなくても文字が大きくなりますが、これはブラウザがh1要素に対してfont-sizeのCSSを自動で追加しているためです。

ブラウザにはデフォルトスタイルシートというものがあり、h1要素を含めいくつかの要素に対してCSSが設定されています。

h1要素は文字の大きさという「デザイン」もHTMLで変更しているよう思えますが、あくまで見た目はCSSで変更しており、文章の構造を定義するHTMLとデザインを指定するCSSという原則はしっかり守られています。

text-align

テキストの配置を指定する際に使用し、値としてテキストの位置を指定します。


body {
    background-color: #ffffe0;
}

h1 {
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    border-bottom: solid 1px #000000;
}

p {
    color: #0000ff;
    font-size: 20px;
}

border

境界線を指定する際に使用します。


body {
    background-color: #ffffe0;
}

h1 {
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    border-bottom: solid 1px #000000;
}

p {
    color: #0000ff;
    font-size: 20px;
}

サンプルではh1要素の「下」境界線を表示しています。

境界線の指定はプロパティも値も複数の指定方法があります。

borderプロパティの値には「スタイル」「太さ」「色」を指定することができ、この3つを任意の順序でスペースで区切って記述します。指定しない値は省略も可能です。

例1) border: スタイル太さ色 border: solid 1px #000000;

例2) border: 太さスタイル border: 1px solid;

スタイルは線の種類で、一部例として以下のようなものがあります。

border種類
スタイル	内容説明
none	線が表示されず太さも0になる。初期値。
solid	1本線で表示される。
double	2本線で表示される。
dashed	破線で表示される。

初期値はnoneとなっており、別なスタイルを指定しないと境界線は表示されません。例) border: solid 1px #000000;

太さの値はfont-sizeのように指定方法が複数ありますが、px指定が一般的です。例) border: solid 1px #000000;

色の値は他と同じく#rrggbbの形式で指定します。例) border: solid 1px #000000;

次にプロパティに関してですが、境界線を指定するプロパティは複数用意されています。

borderプロパティ
プロパティ名	内容説明
border	上下左右の境界線(スタイル、太さ、色)を指定する。
border-top	上の境界線(スタイル、太さ、色)を指定する。
border-bottom	下の境界線(スタイル、太さ、色)を指定する。
border-left	左の境界線(スタイル、太さ、色)を指定する。
border-right	右の境界線(スタイル、太さ、色)を指定する。

値の指定方法は共通ですので、指定したい境界線により、適切なプロパティを利用しましょう。例) border-bottom: solid 1px #000000;

補足:リンクの下線を消す

a要素でリンクを作成した場合、デフォルトでは文字の下に下線がありますが、これもCSS指定で変更することが可能です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リンク下線</title>
    <link rel="stylesheet" href="anchor.css">
</head>
<body>
    <p>リンク下線を消す</p>
    <a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>