記事の文字をHTMLとCSSを使って大きく、太く、色を変えて、下線を引く方法

次は、記事の文字をHTMLとCSSを使って大きく、太く、色を変えて、下線を引く方法をします。

記事の文字をHTMLとCSSを使って大きく、太く、色を変えて、下線を引く方法

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

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

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

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

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

テキストのところにコードを貼り付けます。

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

<span class="matome1">パターン1</span>
<span class="red"><span class="shitasen"><span class="mozisize"><span class="futozi">パターン2</span></span></span></span>

貼り付けました。

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

「OK」を押します。

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

「パターン１」、「パターン２」の文字が同じ表示になっていることを確認します。

HTMLとCSSの説明

パターン１の場合

.matome1{
  font-weight: bold;
  font-size: 1.5em;
  color: red;
  text-decoration: underline;
}

<span class="matome1">パターン１</span>

パターン１の文字では、１つのCSSコードの中に「font-weight、font-size、color、text-decoration」の４つをまとめて記入しました。

CSSコードに４つまとめて記入したので、HTMLコードは<span class="matome1">の１つだけで大丈夫です。

パターン２の場合

/*太字*/
.futozi{
  font-weight: bold;
}

/*文字サイズ変更*/
.mozisize{
  font-size: 1.5em;
}
/*文字色*/
.red{
  color: red;
}
/*下線*/
.shitasen{
  text-decoration: underline;
}

<span class="red"><span class="shitasen"><span class="mozisize"><span class="futozi">パターン2</span></span></span></span>

パターン２の文字では、「font-weight、font-size、color、text-decoration」のCSSコードを４つにわけて記入しました。

CSSコードを４つにわけて記入したので、HTMLコードも「<span class="">タグ」を４つも記入しないといけません。

パターン１とパターン２のやり方どちらがいいのか？

パターン１も、パターン２も、記事のプレビュー表示では、どちらも同じ表示になります。

でも、パターン１のやりかたのほうがいいです。

なぜなら、あとから記事を変更しようとしたときに、パターン２のやり方だと記事内にHTMLコードがたくさん書いてあって見にくいので、変更するとき大変になります。

なるべくCSSコードは、まとめて記入するようにしましょう。