スタイルシート（CSS）を使わずにサブタイトルを表示させる
こんにちワ。
普通、ブログに小見出しや囲み枠を設置するのにCSS（スタイルシート）を使う場合が多いと思います。
ただ、このブログ（アメブロ）の場合は、自分のスマホ（iPhone）のSafari表示で見た場合に動かない（動作しない）事が多いです!w
なぁ～～んにも反映されなくてガックリなことが良くあります。
だもんで自分の場合はCSSを使わずに、編集画面をHTMLが使える状態であれば動作するHTMLだけを使った方法が好きなんであります^^;
そして何よりなのは、この方法だとHTMLモードにできる全てのブログ、Webページで使えるのが気に入ってます。
以下のような小見出しをHTMLだけで設置する基本的なことをメモしておきたいと思います。
小見出しをHTMLだけで設置する基本
この直上の「小見出し」のHTMLコードは以下のようになってます。
<div style="border-left:2px solid #00ffff; border-bottom:1px solid #bbbbbb; padding:5px;font-size: 1.1em;background:#f9fff4">小見出しをHTMLだけで設置する基本</div>
【１】赤字の数字とカラーコードが小見出しの文章の左の縦棒の太さと色です。（※上の場合は薄い水色）
【２】左の縦棒を太くして色を変えてみます（↓）。
小見出しをHTMLだけで設置する基本
*直上の「小見出し」のコードは以下のようになってます。
<div style="border-left:10px solid #ff0000; border-bottom:1px solid #bbbbbb; padding:5px;font-size: 1.1em;background:#f9fff4">小見出しをHTMLだけで設置する基本</div>
【３】今度は「小見出し」の中の文字のサイズを大きくしてみます（↓）。
小見出しをHTMLだけで設置する基本
*直上のコードは以下のようになってます。
<div style="border-left:10px solid #ff0000; border-bottom:1px solid #bbbbbb; padding:5px;font-size: 1.5em;background:#f9fff4">小見出しをHTMLだけで設置する基本</div>
*赤字の1.5emというのは、他の記事の文字より５０％大きくするという意味です。（※1.1emならば１０％大きくなります。）
【４】背景色を薄い黄色にしてみました（↓）。
小見出しをHTMLだけで設置する基本
*直上のコードは以下のようになってます。
<div style="border-left:10px solid #ff0000; border-bottom:1px solid #bbbbbb; padding:5px;font-size: 1.5em;background:#ffffc1">小見出しをHTMLだけで設置する基本</div>
*赤字の箇所のコードが、この「小見出し」の背景色のカラーコードです。
※こちらのカラーコードのサイトが使いやすいかと思います。
⇨WEB色見本 原色大辞典 - HTMLカラーコード
◯思うこと
時間が空いちゃった時に、こんな自分だけの「小見出し」を作るのも楽しいかと思います^^;
時間が空いちゃった時に、こんな自分だけの「小見出し」を作るのも楽しいかと思います^^;
☆ブィブィ ('-^*)/
*追記：「上下を線で囲まれたサブタイトル」を設置する方法をこちらに書きました。参考にして下さい。⇨HTMLだけで「小見出し」（サブタイトル）を作る基本:part2
