見出しデザインをHTMLで書くには? CSSコードから変換するやり方も

ブログパーツ

 

411436

あ~、このコードに見出しをつけたーい。とか、ページごとに見出しを違う色にしたーい。とかいうことありません?

ほんとは、CSSがいじれたら楽なんでしょうけど、そこまでスキルのない場合、考えたのがHTML丸ごと打ち。これだと、まんまテキストページに書いてしまえば事足りちゃう。

そんなんでよければ、どうぞおすすみください。

 

見出しのCSSデザインとそれをHTMLで書く方法ーリボン風も浮いたのもあるよ。

 

見出しCSSをHTMLに変換しよう♪

サンプルとして、上↑の見出しを例にとってみよう。
次↓のようなCSSコードを例にとる。

あ、サンプルコードは、たくさん拾えますし、後ほどおすすめをご紹介しますので、ご心配なく。

.menuLine {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 5px 0;
border-color: #E5EC87;
border-style:solid;
background:#CBDA10;
color:#666600;
line-height:140%;
font-weight:bold;
}

こんなCSSのサンプルがあるとすれば、大事なのは、{}の中だけである。
なので、pink文字を除いたところだけがあればよい。

少し長く感じるが、間を抜くと下記のようになる。

<h● style=”margin:0 0 10px 0;padding:2px 8px;border-width:0 5px;border-color:#CBDA10;border-style:solid;background:#E5EC87;color:#8A950B;line-height:140%;font-weight:bold;text-align:left;>ここにテキストをいれる</h●>

 

書き換え方

  1.  h●のところに、希望する見出し数字(h1~h6)を入れる。
  2.  #ではじまる色番号をお好きな色に変更。

border-color:#CBDA10; ←ボーダーの色
background:#E5EC87; ←背景色
color:#8A950B; ←文字の色

392455

シンプルな見出しのHTML

上記だと、ちょっとコードが長すぎるし、そこまで色を付けなくてもというシンプルな見出し、例えば上↑くらいでよいのなら、この↓のコードをお使いください。

変更するところは、次のマーカーの箇所だけです。

<h3 style=”border-left: #00CCCC 8px solid; border-bottom: #00CCCC 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>

書き換えは、最初と同じで次の3つだけ。

  1. h●の変更
  2. #から始まる色コードの変更
  3. テキスト挿入。

見出しのHTMLの基本形

それでは、わかりやすいようにおまとめします。
好きな見出しのCSSを拾ってきます。多くのサンプルが拾えるのはこちらのNAVERまとめを


<h● style=”▲▼▲▼▲▼▲▼”>◆テキスト◆</h●>

●見出しの大きさ
▲CSSから拾ったコード
◆テキスト文字

HTML見出しのシンプル系

プロや得意な人は、CSSで簡単に作っていくのでしょうけど、
ページごとに見出しの色を変えるには、さらなるプログラムが必要でしょうし、
そこまでなくても、HTMLをコピペするくらいなら、該当箇所をテキストモードで書き出せばいいことだから、そんなに敷居は高くないと思いました。

まあ、長いコードが多くなるのは、デメリットですが、
CSSが分かるようになるまでは、こちらでもよいかなと思います。

また、この長いコードですが、色ごとにテキストファイルに作っておいてもいいですし、私は、シンプルな見出しをグーグル日本語入力に登録しておきました。

おれんじ → <h3 style=”border-left: #FF9933 8px solid; border-bottom: #FF9933 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>

あお → <h3 style=”border-left: #00CCCC 8px solid; border-bottom: #00CCCC 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>

きいろ → <h3 style=”border-left: #FFFF33 8px solid; border-bottom: #FFFF33 2px solid; padding: 0px 0px 1px 5px; font-size: 1.2em; font-weight: bold;”>テキストが入ります</h3>

などです。しかし、Windows10は、グーグル日本語は使えても登録できなくなりました。さらにMicrosoft IMEでは、半分の長さくらいまでしか登録できないので、あきらめてテキストにまとめてあります。

Tips:テキストが入ります

特に見出しのh1-h6を書かなくても h●のところを 『a』とすれば、このように文字を強調したりもできます。

 

それでは、HTMLを使って、いろいろな見出しを楽しんでみてください♪

 

 

コメント

タイトルとURLをコピーしました