CSS基礎についての記事はこちら
CSSで文字を装飾する
CSSの書き方には決まりがあります。
スタイルはセレクタ・プロパティ・値の3つで指定します。
考え方はセレクタ＝どこの、プロパティ＝なにを、値＝どうするです。
- セレクタ：スタイルを適用する対象(pタグやclass・id名)
- プロパティ：適用するスタイル(色を、文字サイズを、背景を)
- 値：適用の仕方(赤に、16pxに、画像に)
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
大きさの単位について
CSSにおける大きさの単位は複数あります。
px(ピクセル)
画面を構成する最小単位のこと。
パソコンの画面などは拡大すると小さな点の集合で成り立っており、その点1つをpxという。
大きさの単位にpxを使用する場合、
- 画面サイズやデバイスに関係なく、指定したサイズで固定される
- ↑の為、レスポンシブデザイン(画面の大きさに応じて表示が最適化される)には不向き
上記、2点に気を付けなければならない。
em(エム)
親要素のフォントサイズを基準とする単位のこと。
親要素のフォントサイズが16pxだとしたら、1em=16px・0.5em＝8pxとなる。
大きさの単位にemを使用する場合、
- サイズが相対的に変化するので、レスポンシブデザインにおすすめ
- 入れ子構造の各要素にemを使用すると、計算が難しい
上記を理解して使用する必要がある。
rem(レム)
root要素のフォントサイズを基準とする単位のこと。
root＝根本＝HTML要素のことで、特に指定していない場合16pxが初期値になっている。
1rem=16px・0.5rem＝8pxとなる。
親要素の影響を受けない為、emより使用しやすいのが特徴です。
％(パーセント)
親要素の大きさを基準として、割合を指定するための単位のこと。
親要素が16pxのとき、50%を指定すれば、フォントサイズは8pxになります。
大きさの単位にemを使用する場合、
- サイズが相対的に変化するので、レスポンシブデザインにおすすめ
- 入れ子構造の各要素に％を使用すると、計算が難しい
上記を理解して使用する必要がある。
vw(ビューボートウィドゥス)
Viewport Widthの略で、ビューポート＝Webサイトの表示領域の横幅を基準とする単位のこと。
表示されているWEBサイトの横幅が1200pxならば、100vw＝1200px・1vw=120pxとなります。
親要素の影響を受けない為計算がしやすいのが特徴です。
vh(ビューポートハイト)
Viewport Heightの略で、ビューポート＝Webサイトの表示領域の高さを基準とする単位のこと。
表示されているWEBサイトの縦幅が1200pxならば、100vw＝1200px・1vw=120pxとなります。
親要素の影響を受けない為計算がしやすいのが特徴です。
ただし、スマートフォンにおける高さは考慮されない。
文字を装飾してみる
CSSを使用して、文字のサイズや色を変えたり、下線や飾りなどをつけられます。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
font-size
pxやemなど、大きさを指定する単位を使用し、フォントサイズを変更できます。
color
redやwhiteなど、もともと定義されている色の名前でも指定できますが、カラーコードやrgbやrgbaなどを記述して、文字の色を変更できます。
font-weight
normalやboldなど、文字の太さを変更できます。
font-style
文字を斜体に変更できます。
line-height
文字の行間隔を指定できます。
letter-spacing
文字間隔を指定できます。
text-decoration
下線や上線、打消し線など、文字に線を付けられます。
border
文字の周りを線で囲めます。
topやleftなど指定の位置だけに線を残して装飾することも可能。
background-color
背景色を指定できます。
text-shadow
文字に影を付けられます。
text-align
left、right、centerの3つから文字の位置を指定できます。
今日の積み上げ
- CSS基礎
