超基本のhtmlタグ＜h2＞の使い方をずっと間違えてたぞ･･･

2012/08/29 2015/06/12

このむねさだブログを書き始めて後数日で半年が経とうとしています。

前のブログから引っ越してきた3月4日から、毎日更新し続けてきました。

むねさだブログに移転しました | むねさだブログ

そんな僕が、先日のブログ合宿でみんなに教えてもらった、

知らないとチョット恥ずかしいぞ･･･レベルなことを、

htmlとかの知識が全くなくブログを書いている人の参考になればと思い、ご紹介します。

<ｈ２>タグって文字サイズが大きくなるだけだと思ってた

いきなりですが、＜h2＞っていうタグがあるのですよ。

これを使うと文字が大きくなるんです。

なので、僕の中では

＜ｈ２＞タグ＝文字が大きくなるタグ

という認識でいて、結構多用してたんです。

例えば、

とかね。

当たり前のことが当たり前じゃなかった

そんな感じでブログを書いていたわけで、

そして誰にも突っ込まれて来なかったので疑問にも思わなかったんです。

それが、先日のブログ合宿でdelaymania.comに寄稿した際、

初めて判明したんです。

何度か説明を受けないと僕も頭で理解できなかったけど、

どうやらWEBの世界では、＜ｈ２＞は”見出し２”として使うものらしい。

見出しって何だ？

↑これが見出しです･･･。

これまた全く知らなかったのですが、

style.ｃｓｓというものをいじくることによって、＜ｈ２＞タグで文字を囲むと

自動的に上のような見出しになってくれるんだと。

そんな貴重な情報、どうして誰も教えてくれなかったのかね･･･。

ってことで、その場にいた切り抜きジャックのタムカイや、

delaymania.comの大ちゃんに教えてもらいながら、CSSと言うものをいじってみました。

とりあえず、＜ｈ２＞タグはこれまで多用していたので、

これをこのまま見だしとして運用始めるとどえらいことになる･･･。

というのは僕でも分かるので、ソレを回避する方法も教えてもらう。

クラスというものを使って見出しをつくる
h2.mds {
font-size: 150%;
font-weight:bold;
padding:3px 6px;
margin:0 0 10px 0;
border-left:10px solid #7ee028;
border-bottom:1px solid #7ee028;
}

もうね、呪文のようだけどとりあえずｃｓｓに上記を追記して、

普段のブログ書いているｈｔｍｌの中に、

＜h2 class=”mds”＞見だし＜/h2＞

と入れるだけで、見出しデザインになるらしい！

そして、文字サイズを変えれるようにこれまたCSSをいじる。

style.ｃｓｓで文字サイズを変えれるように追記
/* mu_ne3 original style */
.fontLL{
font-size:200%;
}
.fontL{
font-size:175%;
}
.fontM{
font-size:125%;
}
.fontS{
font-size:81.3%;
}

一応4種類のサイズを容易しておきました。

何を書いているのかほとんど分からないけど、これで文字のサイズが変えられるようになったようだ。

ちなみに、文字サイズを変えるときはこういう記述。