文字のフォントに関するプロパティ
font-size
「font-size」プロパティは指定したHTML要素の文字サイズを変更できます。
値には、pxや%、remを使って文字サイズを指定できます。
font-size: 20px;
font-weight
「font-weight」プロパティは文字の太さを変更できます。
値の種類は、lightやboldのように太さの名前で指定したり、数値で指定することもできます。
font-weight: bold;
font-weight:300;
color
「color」プロパティは文字の色を変更することが可能です。
値はredのように色を名前で指定したり、#FF0000の16進数6桁または3桁で表現することもできます。以下はすべて赤色を示しています。
color: red;
color: #FF0000
color: #F00
font-family
「font-family」プロパティはフォントの種類を変更できるプロパティで、複数指定できます。
指定したフォントの表示は回覧する端末に依存するので、CSSで指定したフォントが相手の端末に入っていないと表示されず、代わりのフォントが表示されます。
もしも指定したフォントが表示されなかったときのために、複数指定できる仕様になっています。
以下はArialというフォントを表示させるために記入しています。
Arialが表示できないときは、2番目に記載しているHelveticaというフォントを表示します。
font-family: Arial, Helvetica, sans-serif;
text-align
「text-align」プロパティはブロック要素内にある文字の位置を指定できるプロパティです。
値は主に以下を使用します。
- center：ブロック要素の中央に文字を配置
- right：ブロック要素の右に文字を配置
- left：ブロック要素の左に文字を配置
text-align: center;
text-align: right;
text-align: left;
text-decoration
「text-decoration」プロパティは文字にアンダーラインのような装飾を付けたり消したりできるプロパティです。
主にaタグにデフォルトで設定されているアンダーラインを消したり、文字にアンダーラインを加えるときに利用します。
text-decoration: none;
text-decoration: under-line;
line-height
「line-height」プロパティはテキストの行間を調節でき、初期値としてnormalという値が設定されています。
値は、pxや％表記する方法と数字単体で入力する方法があります。
値に20pxを指定するとテキストの行間は20pxに統一されます。単体だと、1を指定すると文字サイズと同じ行間で表示し、2を指定すると行間が文字サイズの2倍になります。
line-height: 20px;
line-height: 2;
横幅や高さ余白などを設定するプロパティ
width
「width」プロパティはHTML要素の横幅を調節できるプロパティです。初期値としてautoという値が設定されています。
値はpxや%で表記したり、max-contentなどの文字で指定することがあります。
width：300px
width：50%
height
「height」プロパティはHTML要素の高さを調節できるプロパティです。width要素と同様に初期値としてautoという値が設定されています。
値はpxや%で表記したり、max-contentなどの文字で指定することがあります。
height：300px
height：50%
padding
「padding」プロパティはHTML要素内部の余白を調節するときに利用するプロパティです。
HTMLで作ったボックスと内部テキストの間に余白を作るときによく利用されます。
paddingに値を指定するときは、左から順に上の余白、右の余白、下の余白、左の余白という順に設定できます。また、上下と左右の余白を一緒に調節する場合、左に上下の値、右に左右の値を同時に指定できます。
たとえば、上下に20pxの空白、左右に30pxの空白を指定する場合は以下のように入力します。
padding:20px 30px;
margin
「margin」プロパティはHTML要素外部の余白を調節できます。
要素同士の余白を調節したりとWebサイトをレイアウトするときによく利用します。
値の使い方はpaddingプロパティと同じく、左から順に値を入力することで四方の余白を指定できます。
たとえば、上に10pxの空白、右に20pxの空白、下に30pxの余白、左に余白を作らないように指定する場合は以下のように入力します。
padding:10px 20px 30px 0;
背景を設定するプロパティ
background-color
「background-color」プロパティは指定した要素の背景色を変更できるプロパティです。
Webサイト全体の背景から、各ボックスの背景色まで変更できます。
background-color: red;
background-color: #FF0000;
background-color: #F00;
background-image
「background-image」プロパティは指定した要素の背景に画像を挿入するときに使用します。
Webサイトのメインビジュアルやボックスの背景に画像を設定するときに利用されます。
画像の指定方法は、background-imageの値に画像のパスを指定することで表示できます。
background-image: url(…/test.png);
レイアウトを指定する
display
「display」プロパティはHTML要素の使用を変更できます。
たとえば、ブロック要素であるdivタグをインライン要素にしたり、要素を簡単に横並び表示にできます。
以下はよく使用するdisplayの値です。
- block：指定した要素をブロック要素に変更できる
- inline：指定した要素をインライン要素に変更できる
- inline-block：指定した要素をインラインブロック要素に変更できる
- flex：指定した要素をフレックスレイアウトへ変更できる
display: block;
display: inline;
display: inline-block;
display: flex;
コメント