小見出し；HTML

背景色付きサブタイトルのHTMLタグについての「まとめ」

Link:有村架純オフィシャルブログ Powered by Ameba

道路工事きもまろことワンタンです^^;こんにちワ(^∇^)

いままで４回にわたり、このブログに、CSSを使わずにHTMLタグコードのみで「背景色の付いた見出し」を設置する方法を御案内して来ましたが、今回それを一記事にまとめてみました。
繰り返しますが、「CSSを使わずにHTMLタグのみを使った方法」です。HTMLが使える、すべてのウェブサイトで利用できると思います。

見出しをHTMLタグだけを使って設置；まとめ

【A】他の文字と同じ
記事欄の他の文字と同じ大きさの「背景色つき小見出し」を設置するタグコードです。

～～文章、文章～～

上の「見出し」のHTMLタグコードは、下のようになります。

<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; background:#ffffcc; font-weight:bold;">～～文章、文章～～</div>

上の各コードの意味を順番に説明します。
（１）border-left:10px
左端のちょこんと立ってる柱の幅です。数字を多くすると太くなります。
（２）solid #000099
その柱の線の種類（上の場合は実線）と色コードです。
（３）border-bottom:2px solid #000099
下線の太さと種類（この場合は実線）と色です。
（４）padding-left:10px
左の柱と文字の間の余白を指定するコードです。数字を多くすると余白が多くなります。
（５）background:#ffffcc
小見出しの枠線の内側（文章を書く欄）の色です。
（６）font-weight:bold
文章を太字にする為のコードです。

例：数字と色を変えたものを作ってみました。

「１」左の柱と下線を色違い
左の柱と下線の色を変えてみました（↓）。

～～文章、文章～～

この見出し（↑）のコードは、このようになります（↓）。

<div style="border-left:8px solid #00cc00; border-bottom:1px solid #999999; padding-left:10px; background:#ffffcc; font-weight:bold;">～～文章、文章～～</div>

「２」白抜き文字の小見出し（背景色：黒）
文字色を白にして背景色を黒、枠をグレーにしてみました。

～～文章、文章～～

上のコードはこうなってます（↓）。

<div style="border-left:8px solid #999999; border-bottom:2px solid #999999; padding-left:10px; background:#000000; font-weight:bold;"> <font color="#FFFFFF">～～文章、文章～～ </font> </div>

「３」白抜き文字の小見出し（背景色：赤）
枠線を青にして背景色を赤にしてみました（↓）。

～～文章、文章～～

上のコードはこうなってます（↓）。

<div style="border-left:8px solid #0000ff; border-bottom:2px solid #0000ff; padding-left:10px; background:#ff0000; font-weight:bold;"><font color="#FFFFFF">～～文章、文章～～</font></div>

「４」ピンクの枠の小見出し（背景色：薄い黄色）
文字色を黒、枠線をピンク、背景色を薄い黄色にしてみました。

～～文章、文章～～

上のコードはこうなってます（↓）。

<div style="border-left:8px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; background:#ffff99; font-weight:bold;"><font color="#000000">～～文章、文章～～</font></div>

【B】他の文字より大きく
見出しの文字を記事欄の他の文字より大きくします。
これは「～～文章～～」を文字の大きさを指定するコード<font size="6">～～文章～～</font>で囲うことで、見出し全体も大きくする事ができます。（↓）

～～文章、文章～～

上の「見出し」のコードです（↓）。

<div style="border-left:8px solid #0000ff; border-bottom:2px solid #0000ff; padding-left:10px; background:#ff0000; font-weight:bold;"><font color="#FFFFFF"><font size="6">～～文章、文章～～</font></font></div>

※なお、赤字の文字の大きさを指定する数字6は、1から7まで指定できます。数字を大きくすると、見出しの文章、それと「見出し自体」も大きくなります。

【C】文字に立体感
立体的に見せる為の、影を付けるコードtext-shadow: 1px 1px 0px #ffffff, 3px 3px 0px #cccccc;を追記してみました。

～～文章、文章～～

コードは、こうなってます（↓）。

<div style="border-left:8px solid #0000ff; border-bottom:2px solid #0000ff; padding-left:10px; background:#ffffcc; font-weight:bold;text-shadow: 1px 1px 0px #ffffff, 3px 3px 0px #cccccc;"><font color="#000000"><font size="6">～～文章、文章～～</font></font></div>

■見出しが入り乱れてしまい、ちと見ずらくなってしまいました・・汗

○思うこと
普通、こういった小見出しってCSSに要素を指定するコードを記述してから、記事欄の見出しにしたい文章を<h1>から <h6>までのタグで囲う方法が使われることが多いと思います。
ただ理由がよく分からないのですが、自分のスマホ（iPhone6）で見ると、その方法だと、まったく反映されませんでした。
また、CSSを使う方法だと、見出しは６種類しか設定できず、そのうえ使う順番にも気をつけないとならないみたいです。
この記事で御案内したHTMLコードだけを使う方法であれば何種類もの見出しを制限なく、また、使う順番を気にせず使用する事ができます。
SEOには、もしかして良く無い方法なのかもしれませんが、自分は気に入ってる方法です。
良かったら、御自由にお使い下さい。また、時間が空いた時にでも御自身の気に入った見出しを作ってみるのも楽しいかと思います。

☆ブィブィ  ('-^*)/