5分でわかる!ブログで使えるhtml講座 ~文字装飾編~
はてなブログを書いてて思ったんですけど、htmlを知らないと文字のサイズとか微調整できないんですよね。
ということで、文字装飾に関する初心者向けhtml講座です。
緑文字で書かれた部分は少し難しい内容なので、興味があったら軽く読む程度でOKです。ある程度知識がついてきたら読み返すと幸せになれるかもしれません。
※SEO対策をするならセマンティックを考慮したほうがいいのですが、あくまでも見た目の変化と覚えやすさ、汎用性を重視した内容になっています。難しい話は別記事でやりたいと思います。
- 基本
- 文字色( color )
- 文字の背景色( background-color )
- 文字の大きさ( font-size )
- 文字の太さ( font-weight )
- 斜体( font-style: oblique )
- 打消し( text-decoration: line-through)
- 下線( text-decoration: underline )
- リンク( aタグ href属性 )
基本
<span>文字列</span>
↑こんな感じでタグで文字を囲って装飾していきます。
タグとは<>で囲われるもので、
<開始タグ>装飾したい文字</終了タグ>
というように、「開始タグ」と「終了タグ」で「装飾したい文字列」を囲うように使います。
タグにはいろいろな種類がありますが、とりあえずspanタグを使っておけばいいです。また開始タグには以下のように「属性」を追加してその値(パラメータ)を設定することができます。デザインを変える場合はstyleという属性を主に使います。
<開始タグ 属性="値">文字</終了タグ>
まとめると以下の2ステップになります。
- 装飾したい文字を<span>タグで囲う
例)文字 ⇒ <span>文字</span> - タグのstyle属性に変更したい内容を追加する
例)<span>文字</span> ⇒ <span style="color: red;">文字</span>
style属性の値は、"プロパティ: 値"で指定していきます(後述)
※style属性を追加していますが、これをCSSのインラインスタイルといいます。
インラインスタイルのプロパティは複数の種類を指定することができます。
文字色 ( color )
<span style="color: purple;">紫の文字列</span> ⇒ 紫の文字列
インラインスタイルに"color: カラーコード"を指定します。
カラーコードにはいくつか書き方があります。使いやすいやつを使えばいいです。
例)
<span style="color: red">赤</span> ⇒ 赤
<span style="color: #0000ff">青</span> ⇒ 青
<span style="color: rgb(0, 255, 0)">緑</span> ⇒ 緑
文字の背景色 ( background-color )
<span style="background-color: red;">文字列</span> ⇒ 文字列
インラインスタイルに"background-color: カラーコード"を指定します。
カラーコードは文字色と同じものが指定できます。
文字色と組み合わせると見やすくなります
<span style="color: white; background-color: red;">文字列</span> ⇒ 文字列
文字の大きさ ( font-size )
<span style="font-size: 18px;">18pxの文字列</span> ⇒ 18pxの文字列
インラインスタイルに"background-color: カラーコード"を指定します。
px以外の単位も使えますが、とりあえずpxだけ使ってればいいかと思います。
<span style="font-size: 16pt;">14ptの文字列</span> ⇒ 16ptの文字列
<span style="font-size: 2em;">2emの文字列</span> ⇒ 2emの文字列
文字の太さ ( font-weight )
<span style="font-weight: bold;">太い文字列</span> ⇒ 太い文字列
インラインスタイルに"font-weight: サイズ"を指定します。
サイズは数値で指定することもできますがほとんど使いませんね。
boldだけで十分です。
※bタグで囲うとboldと同じ効果になります。<b>太い文字列</b>
斜体 ( font-style: oblique )
<span style="font-style: oblique">斜体</span> ⇒ 斜体
インラインスタイルに"font-style: oblique"を指定します。
※emタグで囲うとobliqueと同じ効果になります。<em>斜体</em>
打消し ( text-decoration: line-through)
<span style="text-decoration: line-through;">打ち消し</span> ⇒ 打ち消し
インラインスタイルに"text-decoration: line-through;"を指定します。
下線 ( text-decoration: underline )
<span style="text-decoration: underline;">下線</span> ⇒ 下線
インラインスタイルに"text-decoration: underline;"を指定します。
リンク ( aタグ href属性 )
- aタグで囲って、href属性に遷移したいページのURLを指定します。
<a href="https://www.google.co.jp">Google</a> ⇒ Google - target属性に_blankを指定しておくと、リンク先を新しいウインドウで開くようになります。
<a href="https://www.google.co.jp" target="_blank">Google</a> ⇒ Google - ページ内リンクはhrefに飛びたい場所のタグのid属性を#をつけて指定すればOKです。
<a href="#jump_to">ページ内ジャンプ</a> ⇒ ページ内ジャンプ
<span id="jump_to">ここを表示</span> ⇒ ここを表示
おわり