HTML入門編（７）（最強の技 class を使う）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！

第７回では、class 属性を使って style 属性を共用する方法を解説します。

1 <span> ＋ style 属性で行う特殊な表現
2 記事内で何度も同じ表現を使いたい！ときに便利な class 属性
3 まとめ
- 3.1 ■　次の記事に進む
- 3.2 ■　最初から読む

<span> ＋ style 属性で行う特殊な表現

<span> タグの style 属性で、WordPress のボタンには無い [太字]＋[背景ピンク]＋[アンダーライン] を書いてみます。

次のサンプルを使います。

こんにちは、

<span style="font-weight:bold; background-color: Pink; text-decoration: underline;">■ここが span の範囲です■</span>

こんばんは。

「font-weight:bold; 」で太字に、

「background-color: Pink; 」で背景色をピンクに、

「text-decoration: underline;」でアンダーラインを引いています。

すでに想像のとおりですが、こちらを表示すると、■～■ の間が [太字]＋[背景ピンク]＋[アンダーライン] になりますね。

ポイント

こんにちは、 ■ここが span の範囲です■ こんばんは。

<span> は「改行を伴わないひとくくりのブロック」の指定ですので、改行しないで１文で表示していますね。

記事内で何度も同じ表現を使いたい！ときに便利な class 属性

この [太字]＋[背景ピンク]＋[アンダーライン] を記事内で何度も使いたいときに毎回同じ内容を書くのは面倒ですね。

このときに、style 属性の内容を使いまわせるのが class 属性です。

使いまわす？

実際にサンプルを見てみましょう。

こんにちは、

こんにちは、

こんにちは、

こんばんは。

いままでは、<span> タグに style 属性を付けて、効果（どのように装飾するか）を指定していました。

今回 <span> タグには class="classname1" （class 属性）を使って、"classname1" という名前（自分でつけてOK）の種類分けをしています。

種類分け（クラス名）を使うと、<style> タグを使って、まとめて装飾内容を指定することが可能です。

サンプルを表示してみましょう。

ポイント

こんにちは、 ■ここが span の範囲①です■ こんにちは、 ■ここが span の範囲②です■ こんにちは、 ■ここが span の範囲③です■ こんばんは。

同じクラス名で指定した span については、同じ装飾をしています。

■ class を使うイメージ

同じ記事の中で装飾を使いまわす場合に、class 属性で「クラス名（種別わけ）」をしておき、一つの場所でまとめて装飾を指定します。

■ class の名前の付け方

クラス名の名前については、わかりやすい名前を付けるなどのマナーは別にして、どんな名前にしても動きますが、一部命名規則（使えない文字など）があります。

ポイント

半角の英数字（ "A" ～ "Z"、"a" ～ "z"、"1" ～ "9"）
ハイフン（ "-" ）
アンダーバー（ "_" ）

ポイント

先頭の文字はアルファベット（ "A" ～ "Z"、"a" ～ "z" ）限定です
アルファベットは主文字と小文字を区別します

命名規則に沿って、あとから見てもわかりやすい名前を付けるといいですね。

■ <style> タグの書き方

全体を <style> ～ </style> で括ります
クラス名は先頭に "." （ピリオド）を付けます
クラス名の中の装飾は、”｛”　～　”｝”　「うにょうにょカッコ」で括ります
装飾は "〇〇：〇〇；" で１行として書く

まとめ

一つの記事のなかで、同じ装飾を複数使う場合は、クラス名でまとめると便利です。

class 属性を使って style 属性を共用することで実現できます。

■　次の記事に進む

: HTML / CSS入門編（８）（WordPress で CSSを使う）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！第８回では、複数の記事（ブログ全体）で同じ装飾を使いまわす方法を紹介します。

続きを見る

■　最初から読む

: HTML入門編（１）（WordPress で HTML を使ってみよう！）

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る