ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
スタイルシート(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>

【1】赤字の数字とカラーコードが小見出しの文章の左の縦棒の太さと色です。(※上の場合は薄い水色)

【2】左の縦棒を太くして色を変えてみます(↓)。

小見出しをHTMLだけで設置する基本

*直上の「小見出し」のコードは以下のようになってます。
<div style="border-left:10px solid #ff0000; border-bottom:1px solid #bbbbbb; padding:5px;font-size: 1.1em;background:#f9fff4">小見出しをHTMLだけで設置する基本</div>


【3】今度は「小見出し」の中の文字のサイズを大きくしてみます(↓)。
小見出しを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というのは、他の記事の文字より50%大きくするという意味です。(※1.1emならば10%大きくなります。)

【4】背景色を薄い黄色にしてみました(↓)。
小見出しを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

いいね!した人  |  コメント(0)

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。