テンプレートを使うと、HTMLやプログラミングの知識がなくてもブログやサイトの形になるのですが、
時々、文字を装飾して強調したり、大きさや色を変えたりしたいときに、どうするのかがわからないこともあるかもしれません。
もちろん、ワードやエクセルのように、範囲を選択して、編集画面のツールバーで大きさや色を変えることもできますが、HTMLのコードの意味を知っていると、いろいろと応用ができて便利です。
今回は、テキスト画面でHTMLコードを使うにはどのようにできるか、まとめていきたいと思います。
HTMLタグ
< > と</ > の間に修飾したい文字や文章を入れます。
もし、</ >で終わらないと、その部分だけに終わらせることができなくて、つづきからすべて適用されてしまいます。
太字、斜体、下線
太字、斜体、下線は、このシンプルなタグではさむことで、装飾できます。
| タグ | 閉じる | |
| 太字（ボールド） | <b> | </b> |
| 斜体（イタリック） | <i> | </i> |
| 下線（アンダーライン） | <u> | </u> |
一定の範囲内の装飾には、次のようなタグを使います。
色、文字の大きさ、囲み文字
| タグ | 閉じる | |
| 文字 | <span> | </span> |
| 段落 | <p> | </p> |
| まとまり | <div> | </div> |
それぞれの範囲内で色や文字の大きなどを変えたい時には、さらに書き加えます。
例えば、<span style> </span>で区切った間を装飾するときには、このようにします。
文字の大きさ以降は、color: #ff0000; と同じ仕方で入れるか、追加していきましょう。
| タグ | 説明 | |
| 色 | <span style=”color: #ff0000;”> | </span>で閉じる |
| 大きさ | font-size: 11px; | |
| 背景色 | background-color: #ff0000; | |
| 囲み | border:1px solid; | HTML囲み装飾の方法 |
複数の条件を入れる時の方法
それぞれの条件が切り替わるところと最後には、;で区切ります。半角文字です。
また、色や大きさの具体的な指定を入れる場面では、:を使います。
よく似ているので注意が必要です。
また、全体を” で始めたら、”で閉じるのを忘れないようにしましょう。
この小さな記号を入れ忘れたり、全角にしてしまうと、成り立たなくなってしまいます。
簡単な色コード
| 赤 | #ff0000 |
| オレンジ | #ff9900 |
| 黄色 | #ffff00 |
| みどり | #00ff00 |
| 青 | #0000ff |
| 黒 | #000000 |
| 白 | #ffffff |
#から始まる6桁の記号で表せます。
0〜9、続いてa〜fまでの16個種類の文字を使います。
※色のコードの関連記事
まとめ
いろいろと文字を装飾できるようになると、ページが見やすくなりますね！
さらに、写真やイラストを入れると、見た目が良くなりますよ。
※ 写真やイラスト素材の関連記事
コメント