CSS │ 大きな文字の表示を最速で実現する

CSS │ 大きな文字の表示を最速で実現する

こちらの記事で、

当blogで初めて、「大きな文字」の表現をしたんですけど、フツーにWordPressの機能ではこの「大きな文字」を入力できません(入力をサポートするようなテーマはあるかもしれません)。

テーマ等を導入せずに、カンタンに「大きな文字」を入力する方法を紹介します。

HTMLとCSSによる「構造」と「見た目」の分離

「大きな文字」というのは文字の装飾にあたります。

ウェブサイト上の文章では、HTMLとCSSで「文の構造」と「見た目(装飾)」を分離するのが良いとされていてます。というか、そのためにCSSが(HTMLから切り離される形で)誕生したわけです。

なので、例えば、HTMLの中で<font color="red">赤い文字</font>というような書き方をして、赤い文字←とするのは、HTMLとCSSの使い方としてはよろしくない。文の構造を定義するはずのHTMLで見た目を定義しちゃってるので。

したがって、HTMLの文の構造として使えるタグ(<b>とか<strong>強調や、<i>とか<em>斜体)の「スタイルとして大きな文字になるような定義」を当てるのが本来なら正しかろう、と思うわけです。でもそうすると、強調や斜体すべてが「大きな文字」になっちゃって、使い勝手が悪い。あと、強調とか斜体は見た目だし、これをHTMLで記述できるのは分離できてない証拠では?というのはその通りです…。

ということで、パラグラフ(段落)全体にスタイルを当てるか、spanを使って文章の一部にスタイルを当てるか、の二通りが使い勝手が良いのでは、と思っています。

使用するスタイル

文字のサイズを指定するCSSのスタイルには、font-sizeプロパティを使用します。

font-size: 大きさの値

上記の大きさの値には、例えば2倍の文字の大きさにしたければ、2emと指定します。

emは文字のサイズの単位で、1文字分のサイズを1emとして計算してくれます。したがって、1文字分のサイズがピクセルでfont-size:16pxならば、2emとすればfont-size:32pxとして計算してくれる、ということになります。

適用例

<p>(パラグラフ)要素でスタイルを適用する

段落全体を大きな文字にする場合は<p style="font-size:2em;">大きな文字にしたい段落</p>のように記載します。

このように表現されます。

<span>要素でスタイルを適用する

文書の一部を大きな文字にする場合は、<span style="font-size:2em;">大きな文字にしたい文章の一部<span>のように記載します。

このように表現されます。

classのスタイルにする

毎回、style="font-size:2em;"って記載するのも、抽象化されていなくて、ちょっと残念な気がします。

ということで、下記のように<p><span>classfont-sizeを指定すれば、少しは格好良いでしょうか。

p.large, span.large {
    font-size: 2em;
}

上記をWordPressなら[外観]→[カスタマイズ]→[追加CSS]で、テーマ全体に適用するCSSに記載しておけば、<p class="large"></p>

このように表現されるし

<span class="large"></span>で、このように表現されます。

まとめ

本来、大きな文字で表現するというのは、(WordPressの標準の文字装飾に無いように)文章の構造とは別物である、ということはでも述べました。

しかし、文章力が弱く、凡人であるところ我々。たまにはインパクトを表現するために、大きな文字を使ってみても良いのでは?と思っています。

多用は厳禁ですけどね。