職業訓練日記 -CSSプロパティ-

HTML/CSS

こんにちは!ゆきまさです!!(@yyykms

今回は授業で習った文字や文章のスタイルを定義するプロパティを紹介していきます!

color

文字の色を定義
color: red;

文字の色を変えるにはcolorプロパティを使用します。

colorプロパティの代表的な値

記述例
カラーキーワード color: red;
色番号(16進数) color: #FF0000;  color: #F00;
色番号(10進数) color: rgb(255, 0, 0);
色番号(パーセント) color: rgb(100%, 0%, 0%);
色番号(透明度あり) color: rgba(255, 0, 0, .7)

カラーキーワード

色の名前で指定します。代表的な色の名前が以下の通りです。

色名
赤系 黄色系 緑系 青系 モノクロ系
pink khaki lightgreen skyblue white
mageta yellow green aqua gray
red gold lime blue silver
purple orange olive navy black

色番号

光の3原色のR(Red:赤)、G(Green:緑)、B(Blue:青)の強さを0~255で指定します。

新しいブラウザではA(Alpfa:透明度)を0~1(0.7のような記述だが.7とも記述できる)で指定することもできる。

16進数

16進数の場合「#FF0000」のように「#」と6桁の数字で記述し、前から2桁区切りでRGBを意味し、00(暗い)~FF(明るい)で表します。

また、「#F00」のように省略形で記述することもできます。

#FF0000,#f00
アルファベットは大文字でも小文字でも可

10進数

10進数の場合は「rgb(255, 0, 0)」のように記述し、それぞれ前からRGBの値を0(暗い)~255(明るい)で指定します。

rgb(255, 0, 0)

パーセント

パーセントの場合は「rgb(100%, 0%, 0%)」のように記述し、それぞれ前からRGBの値を0%(暗い)~100%(明るい)で指定します。

rgb(100%, 0%, 0%)

透明度

透明度を指定する場合は「rgba(255, 0, 0, .7)」のようにrgbの後にaを記述し、4番目の値に透明度を0(透明)~1(不透明)で指定します。

0~1をコンマ単位で調整して、半透明にしたりします。

rgba(255, 0, 0, .5)

透明度の指定は「rgba()」の他に「opacity」というプロパティでもできます。

「rgba()」はプロパティのみにして対して指定しますが、「opacity」はセレクタに対して指定します。

例えばh1タグの背景色のみを半透明にしたい場合は「background-color」に「rgba()」を指定します。
「opacity」はh1タグに対して指定しているため文字も含めて半透明にしてしまうからです。

font-size

文字の大きさを定義
font-size: 20px;

文字の大きさを変えるにはfont-sizeを使用します。

font-sizeプロパティの代表的な値

内容
単位付きの数値 単位付きの数値で大きさを指定
キーワード 決められたキーワードで指定

数値で使用する代表的な単位

数値と単位の間にスペースを入れず、値が0の場合には単位をつけなくても構いません。

これらの単位はfont-sizeプロパティ以外にも使用することができます。

相対単位

単位 内容
px ピクセル:ディスプレイの1画素数を1pxとした単位
em エム:基準となる文字の高さを1とする単位
rem ルートエム:ルート要素(html要素)の文字の高さを1とする単位(IE9以上)
ex エックス:小文字xの高さを1とする単位(あまり使わない)
% パーセント:親要素の大きさに対する割合をパーセントで指定した単位

絶対単位

単位 内容
in インチ:1in = 2.54cm
pt ポイント:72pt = 1in
pc パイカ:1pc = 12pt
mm ミリメートル
cm センチメートル
基本的には相対単位を使用するので絶対単位は無視でいいでしょう。相対単位の中でも「px」、「em」、「rem」、「%」がよく使用されます。

キーワード

font-sizaプロパティに使用できる代表的なキーワードは以下の通りですが、ブラウザによっては同じキーワードでもサイズが違ったり対応していない古いブラウザがあります。

キーワード
xx-small x-small small medium large x-large xx-large

なので基本的にはキーワードでは指定せず、単位で指定します。

font-family

文字の書体を定義
font-size: 20px;

文字の書体を変えるにはfont-familyを使用します。

font-familyプロパティの代表的な値

フォント名 説明
MS Pゴシック Windows標準ゴシック系フォント
メイリオ Windows標準ゴシック系フォント
ヒラギノ角ゴ PRO W3 Mac OS標準ゴシック系フォント
Osaka Mac OS標準ゴシック系フォント
MS P明朝 Windows標準明朝系フォント
ヒラギノ明朝 Pro W3 Mac OS標準明朝系フォント
Arial Windowsの代表的なsans-serif英語フォント
Helvetica Mac OSの代表的なsans-serif英語フォント
Times New Roman Windowsの代表的なserif英語フォント     
Times Mac OSの代表的なserif英語フォント     
Courier New Windowsの代表的な等幅英語フォント     
Courier Mac OSの代表的な等幅英語フォント

font-familyプロパティで指定できる代表的なフォントキーワード

キーワード 説明
sans-serif ゴシック体、サンセリフ体
serif 明朝体、セリフ体
monospace 等幅フォント
cursive 手書き風フォント
fantasy 装飾的フォント

font-familyで指定した書体は閲覧者のパソコンに存在する場合のみ適用されます。

指定した書体が閲覧者のパソコンに存在しないことを想定し、複数の書体を「カンマ(,)」区切りで指定し、 そして最後にフォントのキーワードを指定します。

注意
フォント名にスペースがある場合は「ダブルクォーテーション(”)」か「シングルクォーテーション(’)」で囲みます。

font-weight

文字の太さを定義
font-weight: bold;

文字の太さを変えるにはfont-weightを使用します。

font-weightの値

内容
bold 太字にする
normal 標準の太さにする
数値 太さを100刻みで指定
注意
数値で指定する場合は主に400(標準)と700(太字)が使われていて、そのほかの数値はあまり使われません。

細かな太さ表示にブラウザが対応するまでは数値での指定は使わないほうがいいでしょう。

font-style

文字のスタイルを定義
font-style: normal;

文字を斜体、非斜体にするにはfont-styleを使用します。

font-styleの値

内容
italic 斜体にする
normal 斜体表示をやめる
斜体になるタグ
em 強調
cite 引用元
日本語フォントを斜体にすると読みづらくなるためあまり使用しません。
主にem要素やcite要素などを、ブラウザの初期設定で斜体表示となるものを非斜体にするときに使われます。

text-decoration

文字の装飾を定義
text-decoration: none;

文字をに下線をつけたり取り消し線をつけたり装飾するにはtext-decorationを使用します。

text-decorationの値

内容
underline 下線をつける
overline 上線をつける
line-through 取り消し線をつける
none テキストの装飾をなくす
よく使われる方法としては、リンクの下線を非表示にするために使われることが多いです。
また、文字色を青にしたり下線を表示させてしまうとリンクと間違われやすいのであまり使用しないほうがいいでしょう。

text-align

行揃えを定義
text-align: center;

ブロックレベル要素内の文章を中央揃え、左揃え、右揃えにするにはtext-alignを使用します。

text-alignの値

内容
left 左揃え
right 右揃え
center 中央揃え
text-alignは要素内の行揃えを定義するためで、要素自体の表示を変えるわけではありません。
要素自体を中央揃えにしたい場合は、「margin: auto;」にすることによって変更することができます。

verticle-align

インライン要素の縦方向揃えを定義
verticle-align: middle;

インライン要素の縦方向に中央揃え、上揃え、下揃えにするにはverticle-alignを使用します。

verticle-alignの値

内容
baseline 親要素のベースラインに揃える
top 上揃え
middle 中央揃え
bottom 下揃え

インライン要素とテーブルセルのみ適用可能となります。
ブロックレベル要素での行の中央揃えは次のline-heightで説明します。

またよく使う方法としては画像の下に微妙な余白が空くので「verticle-align: bottom;」とすることで余白をなくすことができます。
この余白ができる理由はverticle-alignのデフォルト値にbaselineが設定されているからです。
画像もインライン要素なので配置されるのがbaselineになります。

参考記事>>>こちら

line-height

文字の高さを定義
line-height: 1.6;

行の高さを変えるにはline-heightを使用します。

line-heightの値

内容
単位なし数値 文字の高さを1とする倍率
割合 文字の高さを100%とする割合
normal 要素が持つ初期値

 

line-heightは「px」で表示すると文字の大きさを変えたときに上下の行と被ってしまう恐れがあるため基本的には数値で記述します。

またheightで高さを設定したブロックレベル要素に、その高さと同じ数値をline-heightで記述すると行の中央に文字がそろいます。
ただこの場合は1行のみに有効でブロック自体を中央にしたい場合は上下に同じだけの余白をとれば可能となります。

line-heightの詳しい仕組みはこの記事がわかりやすくておすすめです。>>>サルワカ | line-heightで行間を調整する方法

white-space

ホワイトスペースや改行の表示方法を定義
white-space: nowpap;

要素内に含まれるソース中のホワイトスペース(連続する半角スペース・タブ)と改行の表示方法を変えるにはwhite-spaceを使用します。

white-spaceの値

内容
 normal(初期値) 連続する半角スペースやタブ、改行を1つの半角スペースとして表示し、要素に大きさが指定されている場合は、その大きさに応じて自動的に改行する
 nowrap 連続する半角スペースやタブ、改行を1つの半角スペースとして表示し、要素に大きさが指定されていても自動改行しない 
 pre  連続する半角スペースやタブ、改行をそのまま表示し、要素に大きさが指定されていても自動改行しない
テキストの折り返しを禁止するときによく使われる

list-style

リストのスタイルをカスタマイズするプロパティでいくつか種類があります。

list-style-type

リストマーカーの種類を定義
list-style-type: circle;

リスト項目の先頭に表示されるマーカーの形状を変えるときはlist-style-typeを使用します。

ulに対するlist-style-typeの値

内容
disc 黒丸 : ●
circle 白丸 : ○
square 四角 : ■
none 表示しない

olに対するlist-style-typeの値

内容
decimal アラビア数字 : 1、2、3
lower-alpha 小文字アルファベット : a、b、c
upper-alpha 大文字アルファベット : A、B、C
lower-roman 小文字ローマ字 : ⅰ、ⅱ、ⅲ
upper-roman 大文字ローマ字 : Ⅰ、Ⅱ、Ⅲ
none  表示しない

list-style-image

リストマーカーの画像を定義
list-style-image: url(img/test.gif);

リスト項目の先頭に表示されるマーカーを画像に変えるときはlist-style-imageを使用します。値には「url(画像の場所)」を記述します。

list-style-imageの値

内容
url(画像の場所) 画像の場所を絶対パスか相対パスで指定

list-style-position

リストマーカーの位置を定義
list-style-position: inside;

リスト項目の先頭に表示されるマーカーの位置を変えるときはlist-style-positionを使用します。

list-style-positionの値

内容
outside(初期値) マーカーを外側に定義する
inside マーカーを内側に定義する

マーカーの一括定義

マーカーの一括定義
list-style: circle url(img/test.gif) inside;
list-styleプロパティを使用すればリスト関連のスタイルを一括で記述することができます。定義する値の順番は自由で、指定する必要のない値は省略できます。

まとめ

CSSの文字や文章のスタイルを定義するプロパティで、よく使うものなどをまとめてみました。

上記に書いたプロパティの値は一部で、ほかにもいろいろな種類があるので調べてみてください!