MENU
技能検定AI対策

CSSを使って色やフォントなどのスタイルの指定

色やフォントなどのスタイルを指定するための一般的なCSSプロパティは以下になります。

目次

colorプロパティ

colorプロパティは、テキストの色を指定するためのCSSプロパティです。

p {
    color: value;
}

ここで、pはスタイルを適用する要素(HTMLにおいて<h1>と指定があるところ）を示します。<p>要素に対して、colorプロパティを指定しています。valueは指定する色を示します。下記のようにいくつか指定方法があります。一般的には16進数(#ff0000)が多く使われています。

  • キーワード: red, blue, greenなどの予め定義された色のカラーネームを使用できます。
  • RGB値: rgb(255, 0, 0)のように、赤、緑、青のそれぞれの値を0から255の範囲で指定します。
  • HEX値: #ff0000のように、16進数で赤、緑、青のそれぞれの値を指定します。
  • HSL値: hsl(0, 100%, 50%)のように、色相、彩度、明度を指定します。
p {
    color: red;
}
p {
    color: #ff0000;
}
p {
    color: rgb(255, 0, 0);
}
/*上記は全て赤の指定です*/

カラーコード一覧

カラーネームカラーコード(16進数)プレビュー
White#FFFFFF
Snow#FFFAFA
GhostWhite#F8F8FF
Ivory#FFFFF0
Black#000000
DimGray#696969
DarkSlateGray#2F4F4F
SlateGray#708090
Red#FF0000
Crimson#DC143C
FireBrick#B22222
IndianRed#CD5C5C
OrangeRed#FF4500
Orange#FFA500
DarkOrange#FF8C00
Coral#FF7F50
Yellow#FFFF00
Gold#FFD700
LightGoldenRod#FAFAD2
Khaki#F0E68C
Green#008000
Lime#00FF00
Olive#808000
PaleGreen#98FB98
Blue#0000FF
DodgerBlue#1E90FF
SkyBlue#87CEEB
DeepSkyBlue#00BFFF
Purple#800080
Violet#EE82EE
Orchid#DA70D6
Plum#DDA0DD
Brown#A52A2A
SaddleBrown#8B4513
Sienna#A0522D

backgroundプロパティ

backgroundプロパティは、要素の背景を指定するためのCSSプロパティです。背景には色だけでなく、画像やその繰り返し方法などを設定できます。

ここで、selectorはスタイルを適用する要素（HTML内の要素）を示します。backgroundプロパティのvalueは、背景の指定内容を示します。以下のようにいくつかの指定方法があります。

背景色 (Background Color)

背景に色を指定します。

  • キーワード: red, blue, green などのカラーネームを使用します。
  • HEX値: #ff0000 など、16進数で色を指定します。
  • RGB値: rgb(255, 0, 0) のように、赤、緑、青の値を指定します。
  • HSL値: hsl(0, 100%, 50%) のように、色相、彩度、明度を指定します。
div {
    background: red;
}
div {
    background: #ff0000;
}
div {
    background: rgb(255, 0, 0);
}
/* 上記はすべて赤い背景の指定です */

背景画像 (Background Image)

背景に画像を指定します。

  • 指定方法: url("image.jpg") のように画像ファイルのパスを指定します。
div {
    background: url("background.jpg");
}

背景の繰り返し (Background Repeat)

背景画像を繰り返す方法を指定します。

  • repeat: 繰り返す（デフォルト）
  • no-repeat: 繰り返さない
  • repeat-x: 水平方向に繰り返す
  • repeat-y: 垂直方向に繰り返す
div {
    background: url("background.jpg") no-repeat;
}

背景の位置 (Background Position)

背景画像の表示位置を指定します。

値の種類: top, center, bottom, left, right, または具体的な座標値（例: 50% 50%）

div {
    background: url("background.jpg") center;
}

背景のサイズ (Background Size)

背景画像の表示サイズを指定します。

  • auto: 画像の元のサイズ
  • cover: 要素を覆うように拡大縮小
  • contain: 要素内に収まるように拡大縮小
div {
    background: url("background.jpg") center / cover;
}

ショートハンドプロパティ

backgroundは以下のように複数の値を一度に指定できます。

div {
    background: red url("background.jpg") center/cover no-repeat fixed;
}

borderプロパティ

borderプロパティは、要素の枠線を指定するためのCSSプロパティです。線の太さ、スタイル、色を指定することで、さまざまな枠線デザインを作成できます。

枠線の指定方法

枠線のスタイル (Border Style)

  • solid: 実線（デフォルト）
  • dotted: 点線
  • dashed: 破線
  • double: 二重線
  • groove: 凹状の線
  • ridge: 凸状の線
  • none: 枠線なし
div {
    border-style: solid;
}
div {
    border-style: dotted;
}

枠線の太さ (Border Width)

枠線の幅を指定します。

  • キーワード: thin, medium, thick
  • 長さ: px, em などの単位で指定
div {
    border-width: 2px;
}
div {
    border-width: thick;
}

枠線の色 (Border Color)

  • キーワード: red, blue, green など
  • HEX値: #ff0000 など
  • RGB値: rgb(255, 0, 0)
  • HSL値: hsl(0, 100%, 50%)
div {
    border-color: red;
}
div {
    border-color: #ff0000;
}

borderプロパティのショートハンド

borderプロパティを使うと、枠線の幅、スタイル、色を一括で指定できます。

selector {
    border: width style color;
}
div {
    border: 2px solid red;
}

各辺ごとの指定

borderプロパティには、上下左右の各辺ごとに個別指定できるプロパティがあります。

  • border-top
  • border-right
  • border-bottom
  • border-left
div {
    border-top: 3px dotted blue;
    border-right: 2px solid green;
    border-bottom: 4px dashed red;
    border-left: 5px double black;
}

応用: 枠線の角を丸める

border-radiusプロパティを使うと、枠線の角を丸めることができます。

div {
    border: 2px solid black;
    border-radius: 10px;
}

font-sizeプロパティ

font-sizeプロパティは、テキストのサイズを指定するためのCSSプロパティです。

p {
    font-size:value;
}

ここでの　p　はスタイルを適用する要素(HTMLにおいて<p>と指定があるところ）を示します。<p>要素に対して、font-sizeプロパティを指定しています。valueは指定する値を示します。指定方法はいくつかあります。一般的にはpx,rem,em,%がよく使われています。

p {
    font-size: 16px;   /* ピクセル単位で指定 */
    font-size: 1em;    /* 相対値で指定 */
    font-size: 80%;    /* パーセンテージで指定 */
}
  • font-sizeプロパティを使用して、指定された要素内のテキストのサイズを変更します。
  • 絶対値（px、ptなど）は、テキストのサイズを具体的な単位で指定します。
  • 相対値（em、remなど）は、親要素のフォントサイズに対する相対的なサイズを指定します。
  • パーセンテージは、親要素のフォントサイズに対するパーセンテージとしてテキストのサイズを指定します。

通常、ウェブページでは、相対値やパーセンテージを使用してテキストのサイズを指定することが推奨されます。これにより、異なるデバイスやウィンドウサイズに対して柔軟に対応することができます。

font-familyプロパティ

font-sizeプロパティは、テキストの表示に使用されるフォントファミリーを指定するためのCSSプロパティです。このプロパティを使用することで、テキストの表示に使用されるフォントを優先順位付きで指定することができます。

body{
/* Arialが利用可能な場合はそれを使用し、利用できない場合はHelvetica、さらに利用できない場合はサンセリフフォントを使用 */
font-family: Arial, Helvetica, sans-serif;
}
body{
 /* "Times New Roman"が利用可能な場合はそれを使用し、利用できない場合はTimes、さらに利用できない場合はセリフフォントを使用 */
font-family: "Times New Roman", Times, serif;
}

ここでの　body　はスタイルを適用する要素(HTMLにおいて<body>と指定があるところ）を示します。<body>要素に対して、font-familyプロパティを指定しています。

  • font-familyプロパティは、テキストの表示に使用されるフォントを指定します。
  • フォントファミリーは、コンマ区切りで複数指定することができます。最初に指定されたフォントが利用できない場合、ブラウザは次に書かれたフォントを試します。
  • フォントファミリーは、クオートで囲まれることもあります。特にスペースを含むフォント名を指定する場合には、クオートで囲む必要があります。
  • 一般的なフォントファミリー（総称ファミリー）には、セリフフォント（serif）、サンセリフフォント（sans-serif）、等幅フォント（monospace）などがあります。これらは一般的にブラウザやOSによって定義された既定のフォントが割り当てられます。

font-weightプロパティ

font-weightプロパティは、テキストの太さを指定するためのCSSプロパティです。このプロパティを使用することで、テキストの太さを普通、太字、極太などのさまざまな値で指定することができます。

font-weight: normal; /* 通常の太さ */
font-weight: bold; /* 太字 */
font-weight: 600; /* 数値で指定 */
  • normal: 通常の太さを指定します。
  • bold: 太字の太さを指定します。
  • bolder: 親要素よりも太い太さを指定します。
  • lighter: 親要素よりも薄い太さを指定します。
  • <number>: 100から900までの整数を指定します。通常、100〜900の間の100の倍数（100、200、300など）を指定します。しかし、すべてのフォントファミリーがすべてのウェイトをサポートしているわけではないので、選択されたフォントによって適切な値を選択する必要があります。
  • font-weightプロパティは、テキストの太さを指定。テキストがどの程度太く見えるかは、使用されるフォントによって異なります。
  • normalは通常の太さ、boldは太字を意味します。
  • bolderとlighterは相対的な太さを指定します。親要素の太さを基準にして、それよりも太くしたり薄くしたりします。日本語での変化はありません。
  • <number>を使用する場合、100が最も薄く、900が最も太いことを示します。しかし、すべてのウェイトが利用可能なわけではないため、選択されたフォントに依存します。

font-styleプロパティ

font-styleプロパティは、テキストのスタイル（斜体、普通の書体）を指定するためのCSSプロパティです。このプロパティを使用することで、テキストの表示を斜体にしたり、通常の書体にしたりすることができます。

font-style: normal; /* 通常の書体 */
font-style: italic; /* 斜体 */
font-style: oblique; /* 傾斜書体 */
  • normal: 通常の書体を指定します。
  • italic: 斜体の書体を指定します。
  • oblique: 傾斜書体を指定します。ブラウザやフォントによっては、italicと同じ効果を持つことがあります。
  • font-styleプロパティは、テキストの表示スタイルを指定します。
  • normalは通常の書体、italicは斜体の書体、obliqueは傾斜書体を意味します。
  • ブラウザやフォントによっては、obliqueがitalicと同じ効果を持つことがありますが、意味的には異なります。
  • Windows では、デフォルトのフォントが「メイリオ」なため、font-style: italic;では表示が斜体にはなりません。
目次