HTMLコードを使ってみようー文字装飾(太字、下線、色など)

キーボード

テンプレートを使うと、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個種類の文字を使います。

※色のコードの関連記事

HTMLの色見本
HTMLの色見本
色を変えるときに、HTMLの色番号を知っていると便利な場合があります。 色の種類は、多いのですが、よく使われている色を中心にまとめてみまし...

まとめ

いろいろと文字を装飾できるようになると、ページが見やすくなりますね!

さらに、写真やイラストを入れると、見た目が良くなりますよ。

※ 写真やイラスト素材の関連記事

写真やイラストのおすすめフリー素材サイト
写真やイラストのおすすめフリー素材サイト
読まれるページにするには、質の高い文章がもちろん重要ですが、写真やイラストがあると、より読みやすくなります。 パッと全体を見たときに...

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク