記事の文字に下線をHTMLとCSSを使って引く方法

2019年03月14日 2021年04月11日

Jo Masafumi

次は、記事の文字に下線をHTMLとCSSを使って引く方法をします。

記事の文字に下線をHTMLとCSSを使って引く方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事の文字に下線をHTMLとCSSを使って引く方法」と入力します。

右側の「テキスト」を押します。

ここにコードを貼り付けます。

テキストのところに、下記コードをコピーして貼り付けます。

記事の文字に下線を<span class="shitasen">HTMLとCSSを使って引く方法</span>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「HTMLとCSSを使って引く方法」の文字に下線が引かれていることを確認します。

学習状況をツイッターでつぶやく

↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

.shitasen{
  text-decoration: underline;
}

HTML

<span class="shitasen">サンプル表示</span>

CSSは、「ドット（点）」のあとの「shitasen」という文字の部分は好きな文字を入れても大丈夫です。

例えば、下記のように「kurosen」と入れても問題ありません。

CSS

.kurosen{
  text-decoration: underline;
}

HTML

<span class="kurosen">サンプル表示</span>

CSSを「kurosen」にしたら、HTMLのほうの「shitasen」も上記のように「kurosen」にしないといけません。

{}←このカッコの中の記入の仕方は、決まっているので「text-decoration: underline;」と必ず記入してください。

text-decoration説明

今回、文字に下線を引くために使ったtext-decorationの説明をします。

文字に線を引くために使うCSSコードです。

text-decorationの記入方法は、５種類あります。

text-decoration一覧表

none	何もしない。
unerline	文字に下線を引く。
overline	文字に上線を引く。
line-through	文字に取り消し線を引く。
blink	文字を点滅させる。使っているインターネットブラウザによっては、表示が変わらない場合があります。

text-decoration記入例

CSS

.shitasen1{
  text-decoration: none;
}
.shitasen2{
  text-decoration: underline;
}
.shitasen3{
  text-decoration: overline;
}
.shitasen4{
  text-decoration: line-through;
}
.shitasen5{
  text-decoration: blink;
}

HTML

<span class="shitasen1">サンプル表示none</span>
<span class="shitasen2">サンプル表示underline</span>
<span class="shitasen3">サンプル表示overline</span>
<span class="shitasen4">サンプル表示line-through</span>
<span class="shitasen5">サンプル表示blink</span>