今回はHTMLの文字装飾方法の基礎9つについてまとめてみました。
HTMLの文字装飾方法の基礎9つ
文字の装飾は、基本的にはCSSでの記述で行いますのでそれぞれのCSSの書き方を解説していきます。
文字色を変更したい
文字色の指定は「color」プロパティを使用します。
セレクタ { color : 色; }
【例】pタグの文字色を赤色にする場合の指定方法
p { color : red; }
また、色の指定方法は4つあります。
色名で指定
「red」「blue」「green」などの色の英語表記で指定ができます。
英語表記での指定可能なのは140種類あります。
カラーコードで指定
「#」と6桁の16進数の組み合わせで各色に与えられたコードで指定します。
カラーコードが一目でわかるWEB色見本
RGBで指定
赤、緑、青の3色を0〜255の数字で組み合わせて指定することができます。
RGBと16進数カラーコードの相互変換ツール
RGBAで指定
RGBの指定方法に、さらに透過度を加えて指定することができます。
カラーコードを指定すると10種の透過度のRGBA形式に変換するジェネレーター
文字サイズを変更したい
文字色の指定は「font-size」プロパティを使用します。
セレクタ { font-size : 大きさ; }
【例】pタグの文字の大きさを24pxにする場合の指定方法
p { font-size : 24px; )
文字の大きさの指定方法を4つご紹介します。
pxで指定
pxとは1ピクセルを1とする単位で指定することができます。
%で指定
親要素のfont-sizeに対して何%かで指定することができます。
emで指定
%と同じく親要素に対して相対的な大きさで指定することができます。
1em = 100%
remで指定
emと同じく相対的な大きさで指定できるが、親要素ではなくルート（html）に対して相対的な大きさで指定することができる。
基本的にhtmlは16pxなので、1rem=16px となります。
html要素のサイズを変更すると1remの大きさも相対的に変わる。
フォントを変更したい
文字の太さの指定は「font-family」プロパティを使用します。
セレクタ { font-family : フォントの種類; }
【例】pタグのフォントをserifにする場合の指定方法
p { font-family : serif; )
フォントは複数指定する
OSによって表示可能かどうかが異なるため、フォントは複数設定するのが一般的です。
また、複数設定した場合、前に書いたものが優先されます。
セレクタ { font-family : フォントA , フォントB , フォントC; }
フォント間は「,」で区切ります。
「フォントA」がインストールされていたら「フォントA」で表示。
→ なければ、次に「フォントB」がインストールされていたら「フォントB」で表示。
→ それもなければ、次に「フォントC」がインストールされていたら「フォントC」で表示。
【例】実際の例です。前から優先されます。
p { font-family : "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif"; )
最後に「総称ファミリー」を入れる
最後には必ず「総称ファミリー」を入れるようにしてください。
「総称ファミリー」とは、指定したフォントがいずれもインストールされていない場合に、どの系統のフォントで表示するかを指定してくれるフォントファミリーです。
- serif ：明朝体系フォント
- sans-serif ：ゴシック体系フォント
- cursive ：筆記体系フォント
- fantasy ：装飾体系フォント
- monospace ： 等幅系フォント
太字にしたい
文字の太さの指定は「font-weight」プロパティを使用します。
セレクタ { font-weight : 太さ; }
【例】pタグの文字の太さを太字にする場合の指定方法
p { font-weight : bold; )
文字の太さの指定方法も数値指定などの方法がいくつかありますが、細かく指定してもブラウザが対応していないこともあるためあまり使いません。
よく使われるのは以下の2つです。
bold
font-weight : bold; で太文字になります。
normal
font-weight : normal; で普通の太さになります。
斜体にしたい
文字の斜体指定は「font-style」プロパティを使用します。
セレクタ { font-style : italic; }
【例】pタグの文字を斜体にする場合の指定方法
p { font-style : italic; }
字間を変更したい
文字の間隔の指定は「letter-spacing」プロパティを使用します。
セレクタ { letter-spacing : 大きさ; }
【例】pタグの文字の間隔を10pxにする場合の指定方法
p { letter-spacing : 10px; }
ここも大きさ指定は文字の大きさと同じくpx、em、remが使えます。
また、「-2px」のようにマイナスの数字を使うことで文字の間隔を狭めることも可能です。
下線を引きたい
文字に下線を引くには「text-decoration」プロパティを使用します。
セレクタ { text-decoration : underline; }
【例】pタグの文字に下線を引く場合の指定方法
p { text-decoration : underline; }
この方法は基本的な下線の引き方ですので、下線の色は文字色と同じになります。
もし下線の色を変えたり、太さを変えたりしたい場合はborder-bottomプロパティを使うことで、そういった装飾が可能です。
取り消し線を引きたい
文字に取り消し線を引くには、同じく「text-decoration」プロパティを使用します。
セレクタ { text-decoration : line-through; }
【例】pタグの文字に取り消し線を引く場合の指定方法
p { text-decoration : line-through; }
線で囲みたい
文字に取り消し線を引くには「border」プロパティを使用します。
セレクタ { border : 線の太さ 線の種類 線の色; }
【例】pタグの文字に赤色で太さが3pxの実線で囲む場合の指定方法
p { border : 3px solid red; }
線の種類の中から、よく使われる4つをご紹介します。
・solid
1本の実線で表示されます。
・double
2本の実線で表示されます。
・dashed
破線で表示されます。
・dotted
点線で表示されます。
まとめ
HTMLの文字装飾方法の基礎9つはHTML・CSSの学び始めでよく使いますので是非マスターしてください。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/