span指定 フォント基本編(大きさ・色・強調・斜体・イタリック)
@tuzura_ori
プライベッターではfontタグが使えますが、こちらは非推奨なので
なるべくならspan styleで指定した方が後々無難かと思います。
指定方法はほぼ変わらないので、この機会に覚えるのも宜しいかと。
※タグの＜＞は反映防止のため全角になってますので、半角に変更して下さい
【ここで使用する主なタグ】
font-size(大きさ)、color(色)、font-weight(太さ)、font-style(斜体・イタリック)
大きさ
文字サイズを指定することができます。
(見え方を特定したいなら、環境に左右されないpx指定がお勧め)
タグ
＜span style="font-size:○○px;"＞文章＜/span＞
表示例
大きさ10px
大きさ13px
大きさ15px
大きさ18px
大きさ22px
大きさ25px
※お気づきかと思いますが、文字を大きくすると行間は詰まります。
例)
大きさ40pxを指定し
そのまま書くとこうなります
※場合によっては重なることもあるので、改行ピッチには注意して下さい。
※逆に小さい文字で書かれると、読む側はイラッとします。
※視覚的効果を考えるならピンポイント使用がお勧め。
応用例
過ぎたるは及ばざるが如し
＜span style="font-size:20px;"＞過＜/span＞ぎたるは及ばざるが如し
色
文字の色を指定します
タグ
＜span style="color:#カラーコード;"＞文章＜/span＞
表示例
#999999で書いてみた
#0066FFで書いてみた
#CC0000で書いてみた
部分毎に指定すれば、こんなこともできます…うざいけど。
※#999999のように同じ数字が続くものは#999と省略する事ができます。
※文字色(薄い・派手…など)によっては、読み手がイラッとします。
※部分毎に指定すれば…とは、spanタグで挟むという意味です。
強調・斜体・イタリック
視覚的効果を狙い、文字を強調したり斜体にしたりという事もできます。
ただ、場合によっては狙いが外れます(見辛いと言う点に於いて)
タグ
＜span style="font-weight: bold"＞強調(太く)なります＜/span＞
＜span style="font-style: oblique"＞斜体になります＜/span＞
＜span style="font-style: italic"＞イタリック体になります＜/span＞
表示例
強調(太く)なります
ABCabcが斜体になります
ABCabcがイタリック体になります
応用
フォントの種類を指定すれば、こんな風にもなります。
ただし、見る側の環境にもそのフォントがインストールされてる事が大前提。
タグ
＜span style="font-family: ＭＳ Ｐ明朝; font-style: italic"＞ABCabcイタリックになります＜/span＞
＜span style="font-family: ＭＳ Ｐゴシック; font-style: italic"＞ABCabcイタリックになります＜/span＞
表示例
ABCabcイタリックになります
ABCabcイタリックになります
※フォントはまとめて指定することもできます。