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



CSSの頻出プロパティを解説! ゼロから始めるHTML/CSS講座Vol7
目次
  1. ゼロから始めるHTML/CSS講座CSSでよく使われるプロパティ
  2. プロパティ紹介
  3. color
  4. background-color
  5. font-size
  6. text-align
  7. border
  8. 補足:リンクの下線を消す
  9. HTML/CSSのソース表示
  10. 課題

ゼロから始める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;
}

css-property1-639

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;
}

css-color

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

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

  1. 色名 英語で色名を表す。 例) red, lime, blue
  2. #rrggbb R(赤)、G(緑)、B(青)の色をそれぞれ00~ffの2桁の16進数で表す。 例) #ff0000, #00ff00, #0000ff
  3. 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;
}

css-background

サンプルでは背景色を淡黄色(#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;
}

css-fontsize

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

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

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

  1. px指定 ピクセル単位の値を指定する。 表示はディスプレイの解像度に依存する。 例) 10px, 16px, 24px
  2. %指定 親要素に対する相対値を指定する。 親要素にサイズ指定がない場合、ブラウザ標準サイズからの相対比となる。 例) 62.5%, 100%, 150%
  3. キーワード指定 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%;
}

css-property6-639

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

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

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

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

css-fontsize-stye-seat

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;
}

css-text-align

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;
}

css-border

サンプルでは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>


a {
    text-decoration: none;
}

css-property9-639

text-decorationプロパティ

CSSには見た目を指定するためのプロパティと値が数多くあります。

よく利用するものは講義で紹介していきますが、全ての紹介と暗記は難しいです。

CSSのプロパティを紹介しているWebサイトは多数ありますので、デザインに必要なプロパティはできるだけ自身で調べ、試してみるようにしましょう。

HTML/CSSのソース表示

ブラウザはHTMLやCSSの記述内容を解析した結果をWebページとしてユーザへ見せていますが、解析前のHTMLとCSSを見ることも可能です。

ブラウザで右クリック(Macの場合はcontrolキー+クリック)を押し、「ページのソースを表示」を選択してください。

css-sourse

閲覧しているページのソースを見ることができます。

ブラウザの種類やバージョンによって右クリックした場合に表示される内容は多少異なりますが、「ソース表示」という機能は大抵のブラウザにあります。

link要素で指定してあるCSSファイルを選択することで、CSSを見ることも可能です。

css-sourse-file

このようにソース表示によりHTMLやCSSの中身を見ることが可能です。

ブラウザのソース表示を利用すれば世の中にあるWebサイトがどのようなHTMLとCSSで作られているか閲覧できるため、興味があれば色々なサイトのソースを表示し勉強してみましょう。

課題

以下と同じデザインになるCSSを新規作成してください。HTMLはmomotaro.htmlで読み込むCSSファイルを変更し利用してください。

charenge-momotarou-css

指定するプロパティと値は以下を参考にしてください。

body要素: 背景色[黒]
h要素: 文字サイズ[24px], 文字色[赤], 配置[中央揃え], 境界線[上下破線3px]
p要素: 文字サイズ[16px], 文字色[白]
a要素: 文字サイズ[16px]

 

NEXT LESSON ☛ marginとpadding

PREV LESSON ☛ CSSの適用方法

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp