灰色背景がサンプルソース薄緑背景が実際の見た目
文字を斜体にしたい箇所のみspanタグでくくって、スタイルシートで設定したclassを指定します。
ここでは、<span class=”stritalic”>斜体に</span>としています。
.stritalic {font-style:italic;}と記述します。
これは、class=”stritalic”を指定したタグでくくられた箇所の文字を斜体にするという意味です。
なお、font-style:italic;だけでなく、font-style:oblique;でも斜体を表示することができます。
灰色背景がサンプルソース薄緑背景が実際の見た目
文字を太字にしたい箇所のみspanタグでくくって、スタイルシートで設定したclassを指定します。
ここでは、<span class=”strbold”>太字に</span>としています。
.strbold {font-weight:bold;}と記述します。
これは、class=”strbold”を指定したタグでくくられた箇所の文字を太字にするという意味です。
灰色背景がサンプルソース薄緑背景が実際の見た目
強調したい文字をstrongタグで囲みます。
ここでは、<strong>強調</strong>としています。
単に文字が太く見えるだけでなく、Webページ音声読み上げソフト等にもその部分を強調したいんだ！ということを認識させることが出来ます。
単に見た目だけ太文字にしたい時ではなく、強調したい時に使うと良いでしょう。
本項目はHTMLのみで実現できる為、CSSは記述する必要がありません。
灰色背景がサンプルソース薄緑背景が実際の見た目
文字の色を変えたい箇所のみspanタグでくくって、スタイルシートで設定したclassを指定します。
ここでは、<span class=”strred”>赤く</span>としています。
.strred {color:red;}と記述します。
これは、class=”strred”を指定したタグでくくられた箇所の文字色を赤くするという意味です。strblueの方も色が青ということ以外は同じです。
color:redのred部分、color:blueのblue部分を他の色名称やカラーコードに書き換えれば、違う色になります。
ここでは、ホームページ上のリストを装飾する方法を紹介していきます。
リスト左の数字・マークは何も指定しないとulの場合は黒丸●、olの場合は数字が表示されるのですが、そのマーク・数字を別のマークや順序のある文字・数字に変えることが出来ます。
CSSでリスト左の数字・マークを変えるにはlist-style-typeを指定します。
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| disc | 黒丸 | ● | ul標準 |
| circle | 白丸 | ○ | |
| square | 四角 | ■ |
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| decimal | 数字 | 1, 2, 3, … | ol標準 |
| decimal-leading-zero | ゼロ付数字 | 01, 02, 03, … | |
| lower-roman | 小文字ローマ数字 | i, ii, iii, … | |
| upper-roman | 大文字ローマ数字 | I, II, III, … | |
| lower-alpha | 小文字アルファベット | a, b, c, … | |
| upper-alpha | 大文字アルファベット | A, B, C, … | |
| lower-greek | 小文字ギリシャ文字 | α, β, γ, … | |
| upper-greek | 大文字ギリシャ文字 | Α, Β, Γ, … | |
| cjk-ideographic | 漢数字 | 一, 二, 三, … | |
| hiragana | ひらがな | あ, い, う, … | |
| katakana | カタカナ | ア, イ, ウ, … | |
| hiragana-iroh | ひらがないろは順 | い, ろ, は, … | |
| katakana-iroha | カタカナイロハ順 | イ, ロ, ハ, … | |
| lower-latin | 小文字ラテン文字 | ||
| upper-latin | 大文字ラテン文字 | ||
| hebrew | ヘブライ数字 | ||
| armenian | アルメニア数字 | ||
| georgian | グルジア数字 |
| CSS記述 | 表示内容 | 表示例 | 補足 |
|---|---|---|---|
| none | マーク・数字なし | ||
| inherit | 親要素指定を継承 |
通常はリスト要素が2行以上ある時、リスト左の数字・マーク分文章が字下げされます。
ですが、リストマーク分字下げする/しないは選択することが出来ます。
CSSでリスト左の数字・マークを変えるにはlist-style-positionを指定します。
| 指定可能値 | outside(標準, 字下げをする), inside(字下げしない), inherit(親要素指定を継承) |
|---|
[参考]outsideとinsideの見た目の違い具体例
*** outside ***
*** inside ***
リストの左側にあるマーク部分に自分が用意した画像を表示することが出来ます。
CSSでリストマークを画像にするにはlist-style-imageを指定します。
| 指定可能値 | 画像へのパス(URL) |
|---|