HTML・CSS独学応援 3-6 「よく使うプロパティー紹介」

CSSで使用頻度の多いプロパティーを紹介します。

  • color
  • background-color
  • font-size
  • text-align
  • border

プロパティーについては、下記の記事で学びました。

どこの {
        なにを : どうしたい;
        }

「なにを」の部分がプロパティーになります。

サンプルコード

サンプルコードにCSSを付属しながら学んでいきましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSプロパティー</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <h1>れお太郎</h1>
    <p>あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
    <p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きなライオンが流れてきました。</p>

</body>
</html>

ファイル構造は以下のようになっています。

がぞう

color

「color」は、文字の色を変更することができるプロパティーです。

指定方法は3つあります、どの方法を使っても同じ色になります。

  • 色の名前
  • 色の番号 (#rrggbb)
  • 赤、緑、青の調合 rgb(値, 値, 値)

色を選ぶ際はWEB色見本などを参考にするといいでしょう。

色の名前

色の名前を指定して、色を変更する方法です。

h1{
    color:red;
}

上記のように書くことで
見出し(h1)の文字を赤く変更します。

色の番号 (#rrggbb)

色番号を指定して、色を変更する方法です。

実は色には、それぞれ固有の番号が振られています。
先頭に#を付けた、アルファベットと数字の組み合わせの番号により指定します。

WEB色見本などで公表されているので確認してください。

h1{
    color:#ff0000;
}

上記のように書くことで
見出し(h1)の文字を赤く変更します。

赤、緑、青のブレンド rgb(値, 値, 値)

赤、緑、青の三大色をブレンドして色を決めます。
少しイメージしにくいかもしれませんが、色番号と同様に
WEB色見本などで、ブレンド割合は確認できます。

(rgb(rの割合、gの割合、bの割合))といった感じで記入します。

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

上記のように書くことで
見出し(h1)の文字を赤く変更します。

background-color

background-colorは、背景の色を変更することができるプロパティーです。

色の指定方法は、colorプロパティーと同様3つの方法があります。

  • 色の名前
  • 色の番号 (#rrggbb)
  • 赤、緑、青の調合 rgb(値, 値, 値)

それぞれ以下のようになります。ここでは「オレンジ」を指定しています。

body{
    background-color:orange;
}
body{
    background-color:#ffa500;
}
body{
    background-color:rgb(255,165,0);
}

font-size

font-sizeは文字の大きさを変更できるプロパティーです。

サイズは2つの方法で、指定できます。

  • 数値で指定する
  • キーワードで指定する

どの方法が正しいなどはなく、自分の使いやすい方法を使用するのがいいでしょう。

数値で指定する

数値による指定方法は、使用する単位によって大きさが変わります。

  • px(ピクセル)  1ピクセル単位で指定する
  • %(パーセント) 親要素の大きさのを基準に割合で決める
  • rem(レム) html要素で指定されたサイズを基準としたサイズ

上記のような方法がありますが、ここではシンプルなpx(ピクセル)による指定を使います。

 p {

    font-size: 20px;
 }

上記のように書くことで、段落(p)の大きさに変更できます。

キーワードで指定する

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

7段階のキーワードでサイズを指定できます。

 p {

    font-size: medium;
 }

上記のように書くことで、段落(p)の大きさに変更できます。

text-align

テキストの配置を指定するときに使います。

  • left 左寄せ
  • center 中央寄せ
  • right 右寄せ

上記の3つが主に使われます。

 h1 {

    text-align: center;
 }

上記のように書くことで、見出し(h1)を中央に寄せることができます。

border

境界線を指定するときに使います。

borderの値について

borderプロパティーの値には、種類、太さ、色を指定します。

種類は、以下のものが代表的です。
太さは、px(ピクセル)で指定するのが一般的です。
色は、色番号を使うのが一般的です。

  • solid 1本線を引く
  • double 2重線を引く
  • dashed 破線を引く
 h1 {
    border: solid 1px #000000;
 }

上記のように書くと、見出し(h1)を囲む線が引けます。

borderのプロパティーについて

プロパティーによって、線を引く場所を決められます。

  • border 上下左右すべて
  • border-top 上だけ
  • border-right 右だけ
  • border-bottom 下だけ
  • border-left 左だけ
 h1 {
    border-bottom: solid 1px #000000;
 }

上記のように書くと、下にだけ線を引けます。

© 2021 ーれおの部屋ー