文字の装飾について知ろう
( ；∀；) ＜ かなしいときー
「面白そうな作品が見つかったけどブクマし忘れて、もう一度探してみたけど見つからなかったときー」
( ；∀；) ＜ かなしいときー
「久しぶりにレビューした作品を読んでみようと思ったら削除されてたときー」
( ；∀；) ＜ かなしいときー
「書いた感想に誤字があって修正する前に返信が来たときー」
( ；∀；) ＜ かなしいときー
「気合を入れて作った作品よりも、気晴らしに作った作品の方がよく見られたときー」
こんにちは。レビュー貰ったりバナーロゴ貰ったりして調子に乗ったので更新頻度が高くなった夕月です。
圧倒的感謝です！
突然ですけど、お笑いの世界って大変ですね。
すごくブレイクした芸人さんでもすぐに消えていきますね。( ；∀；)
小説家になろうの世界も継続的に活動しないと埋もれてしまうので同じなのかもしれませんね。
うぅ、悲しい。
はい、そんなわけで、とある割烹芸人のテンプレート、6回目です。
今回は『文字の装飾』について説明していきますよ。
ここの項目を乗り越えればたいていのことはできると思います。
ちょっと難しいので頑張っていきましょう。
■ ■ ■ ■
■文字装飾の注意点
まず注意点から、文字の装飾をする際にはfontタグを使っている人が多いようです。
私もそうでしたが、よくよく調べてみると今は使用を推奨されていないようですね。
理由としては、<font>タグはHTML5では廃止され、ブラウザによってはきちんと動作しないこともあるそうです。
以前テンプレ作った時に、PCでは反映されるけど、スマホだと反映されないということもありました。文字の装飾はStyleによる指定が望ましいようですね。
なので、ここでは<font>タグではなくStyleパラメータを指定して装飾していきましょう。
■ ■ ■ ■
ということで、説明に入ります。
文字装飾として指定できる項目はいくつかありますが、よく使う物をとりあげていきます。
■まずは基本
・文字色：color
・背景色：background-color
・文字サイズ：font-size
例：<span style="color:#000000;background-color: #f1cc00;font-size:18px;">すごーい、色とサイズが変わるよ！</span>
■位置とか
・そろえ位置：text-align
・文字間隔：letter-spacing
例：<p style="text-align:center;letter-spacing:10px;background-color:#f1cc00;">すごーい、位置と文字間隔がかわるよ！</p>
■ボックス設定
・枠：border
・枠外間隔：margin
・枠内間隔：padding
なお、それぞれのブロックの設定値の反映はこんな感じになります。
・マージン、パッドなし
<div style="border:double 10px #0000ff;background-color: #f1f1f1;">すごーい、なんだか箱ができちゃった！
なにこれー。へんなのー
</div>
・マージン、パッドあり
<div style="border:double 10px #0000ff;margin:10px 10px 10px 10px;padding:20px 20px 20px 20px;background-color: #f1f1f1">すごーい、なんだか箱ができちゃった！
なにこれー。へんなのー
</div>
margin、paddingの4つの数値はそれぞれ[上][右][下][左]を表しています。それぞれ別々の数値を設定することができます。なお同じであれば値を1つ指定するといいでしょう。
またfont-size、margin、padding、width, height等を設定するときにのサイズ指定にはいくつかあります。
・px指定：絶対値指定
・em指定：相対値指定 基準フォントサイズの相対値
・％指定：相対値指定 親要素（割烹では枠幅）の相対値
<div style="border:dashed 16px #000000;margin:16px;padding:16px;background-color: #f1f1f1">pxは絶対値のことなんだよー
</div>
<div style="border:dashed 1em #000000;margin:1em;padding:1em;background-color: #f1f1f1">emは基準のフォントサイズの相対値なんだよー</div>
<div style="border:dashed 1% #000000;margin:5%;padding:5%;background-color: #f1f1f1">％は親要素を基準とした相対値なんだよー</div>
<div style="width: 25%;border:dashed 5px #000000;margin:1%;padding:1%;background-color: #f1f1f1">25%だよー</div>
<div style="width: 50%;border:dashed 5px #000000;margin:1%;padding:1%;background-color: #f1f1f1">50％だよー</div>
<div style="width: 75%;border:dashed 5px #000000;margin:1%;padding:1%;background-color: #f1f1f1">75％だよー</div>
<div style="width: 100%;border:dashed 5px #000000;margin:1%;padding:1%;background-color: #f1f1f1">100％だ！</div>
使い分けとしては、文字なんかはemかpx,横幅なんかは％で指定するといいかなぁと思います。
■p, span, divの違い
また、文字を装飾する際にはp, div, spaを使っていますが、それぞれの使い分けです。
pとdivとspanの違いはざっくり説明すると以下のようになります。
・p 段落を指定する時に使います。
・div 前後に改行が入ります。
・span 前後に改行が入りません。
並べてみるとよくわかります。
<p style="border:dashed 1px #000000;background-color:#f1f1f1;">p1</p>
<p style="border:dashed 1px #000000;background-color:#f1f1f1;">p2</p>
<p style="border:dashed 1px #000000;background-color:#f1f1f1;">p3</p>
<div style="border:dashed 1px #000000;background-color:#f1f1f1;">div1</div>
<div style="border:dashed 1px #000000;background-color:#f1f1f1;">div2</div>
<div style="border:dashed 1px #000000;background-color:#f1f1f1;">div3</div>
<span style="border:dashed 1px #000000;background-color:#f1f1f1;">span1</span>
<span style="border:dashed 1px #000000;background-color:#f1f1f1;">span2</span>
<span style="border:dashed 1px #000000;background-color:#f1f1f1;">span3</span>
まぁ、本格的なブログならともかく、活動報告では適当に使っても大丈夫です。
気分でどうぞ。
私も結構適当です。
というわけで今回の説明は以上。
以下、テンプレートです。活動報告にコピペして感触を確かめてください。
■基本的な指定
<span style="color:#000000;background-color: #F7F2E0;font-size:18px;">すごーい、色とサイズが変わるよ！</span>
<span style="color:#ff0000;background-color: #EFFBEF;font-size:24px;">すごーい、色とサイズが変わるよ！</span>
color:で文字色を変える
background-color:で背景色を変える
font-size:で文字の大きさを変える
■位置とか
<p style="text-align:center;letter-spacing:10px;background-color:#F7F2E0;">すごーい、位置と文字間隔がかわるよ！</p>
<p style="text-align:right;letter-spacing:5px;background-color:#F7F2E0;">すごーい、位置と文字間隔がかわるよ！</p>
text-align:で配置を変える
letter-spacing:で文字間隔を変える
■ボックス設定
<div style="width:25%;border:double 10px #0000ff;margin:10px;padding:20px;background-color:#f1f1f1">すごーい、なんだか箱ができちゃった！
なにこれー。へんなのー
</div>
<div style="width:75%;border:dashed 5px #000000;margin:2px;padding:25px;background-color:#f1f1f1">すごーい、なんだか箱ができちゃった！
なにこれー。へんなのー
</div>
width:で箱サイズを変える
border:で枠を変える
margin:で枠外間隔を変える
padding:で枠内間隔を変える
■p, div, span
<p style="border:dashed 1px #000000;background-color:#f1f1f1;">p1</p>
<div style="border:dashed 1px #000000;background-color:#f1f1f1;">div1</div>
<span style="border:dashed 1px #000000;background-color:#f1f1f1;">span1</span>
・p 段落を指定する時に使います。
・div 前後に改行が入ります。
・span 前後に改行が入りません。
割烹サンプル4がテンプレ例です。
