みずー工房

気ままライフを綴るブログです

【HTML】タグでCSSを適用する(styleとclassとid)

ブログをより豊かにデザインするために、CSSを利用してみましょう。
CSSを適用するには、HTMLタグの中(属性)に「style」か「class」または「id」を指定してあげます。
色を変える ことも、 大きさを変える ことも自由自在です。



HTMLは、はてなブログで用意されているツールよりも幅広く装飾を行うことができます。
しかし、しばらく使ってると欲張りな人(私)はHTMLだけでは物足りなくなることでしょう。


CSSを利用してみよう!

CSS(スタイルシート)を利用すれば、幅広い装飾ができて、華やかなページ を作ることが(たぶん)できます!
CSSを利用する代表的な方法を3つ紹介しようと思います。
それが冒頭でもタイトルでも紹介した「style」「class」「id」です。


style属性を使ってみる

style属性は、HTMLの内部に直接埋め込んでしまうタイプ のやり方です。
例を示します。これは、右詰めにする方法です。

HTML
<div style="text-align: right;">style属性で右詰めに!</div>
Result
style属性で右詰めに!


styleの中に注目してみましょう。「text-align: right;」がCSSで記述されている部分です。
中身は「[プロパティ]: [];」の順で指定 していきます。
今回はプロパティに「text-align」、値に「right」を指定しています。
プロパティの種類はたくさんあるのでとても紹介しきれませんが、便利帳みたいな感じで抜粋して記事にしようかなあと思います。


「プロパティ」と「値」の対は複数指定 することができます。
例えば右詰めしながら、文字のサイズを変えてみましょう。

HTML
<div style="text-align: right; font-size: 28px;">style属性で右詰めに!さらに文字を28pxに拡大!</div>
Result
style属性で右詰めに!さらに文字を28pxに拡大!


「font-size」も同時に設定することで、2つのオプションを設定することができました。
このように複数のプロパティを設定することができます。
しかし、たくさんのプロパティを設定すると長くなって見づらくなりそうなのが予想できると思います。
これを解決してくれるのが「class」と「id」です。


classを使ってみる

ざっくり使い方を説明すると、
スタイルを別の場所に定義しておいて、htmlの属性で呼び出す 感じになります。


さっきと同じ設定にすると、このようになります。
上は「記事」に書くべきHTML、下は「デザインCSS」等に書くべきCSSになります。

HTML
<div class="test1">classを使ってみました</div>
CSS
.test1 {
    text-align: right;
    font-size: 28px;
}
Result
classを使ってみました


ちなみにデザインCSSは「デザイン→カスタマイズ→デザインCSS」からアクセスできますよ。
デザインCSSに書く場合は、一番下に追記しましょう。


cssでclassを定義する場合は、名前の前に' . '(ドット)を使います。
もちろん 「test1」って名前は、自分の好きな名前に変更 できます。
一部は、はてな側で定義している名前もあるので使えない場合もありますが。。。


classで定義しておくと、style属性で長く記述しなくてよくなる以外にもいいことがあります。

  • style属性で、長ったらしく書く必要がない
  • 何度も呼び出すことができるので、使い回しできる
  • デザインCSSに登録して呼び出せば、変えたくなったときに一括でデザインを変更できる
    ...などなど


idを使ってみる

使い方はclassと非常に似ていますが、注意すべきことがあります。
使い方の下に注意を書きますね。


同じ設定で行うとこのようになります。
上は「記事」に書くべきHTML、下は「デザインCSS」等に書くべきCSSになります。

HTML
<div id="test-id">今度はidを使ってみました</div>
CSS
#test-id {
    text-align: right;
    font-size: 28px;
}
Result
今度はidを使ってみました


使い方はclassとほぼ同じ です。
HTML部分は「class→id」、CSS部分は「.(ドット)→#(ナンバー)」と書き換えただけです。
名前ももちろん変更できます。


classとidの違い(idの注意すべき点)

classは、CSSで一度定義すればHTMLで何度でも使いたい放題 です。
一方で、 idは1つの定義につき文書内で呼び出せるのは1度だけ です。
つまりidは1対1で対応している必要があるということです。


現在のブラウザ(Chromeとか)では、同じidを複数使っても勝手に補完して表示してくれます。
「じゃあ使っていいじゃん」って思いますけど、ダメだそうです。
ここは、開発・発明してくれた方々に敬意を示して守りましょう。。。


記事にCSSを埋め込む

デザインCSSに埋め込むほど、記事をまたいで何度も使わないということであれば、
はてなブログの場合、記事にCSSを埋め込むことができます。
ただし、この埋め込みには少しテクニックが必要になるので以下の記事を参考にしてください。

関連記事
ただし、markdownだと#は見出しとして認識されてidは記事に埋め込めなさそうです。。。



おわりに

これらのテクニックを使うと、とても記事が書きやすくなります。
特にclassは便利ですので、ぜひ使っていきましょう!