2010年08月16日

ブログ見出しのサンプル紹介

ブログ記事を書く上で、長文だと見出しがないと読みずらい。
ネット上にはきれいで見やすい見出しを使っているサイトがいくつもあるが、その中でも基本的な見出しを紹介する。

CSSで作成するのがスマートなのは分かっているが、初心者には難しいので、HTMLで紹介♪


見出しHTMLサンプル

今回は説明のために、あえて分かりやすい色を使ってHTMLサンプルを作ってみた。
(このまま使ってはかっこ悪い)

HTMLソースは、こちら↓。

<div style = "border-top:2px solid blue;border-left:10px solid red;
border-right:2px solid black;
border-bottom:2px solid yellow;
background-color:#CCFFCC;padding:10px 20px;
width:500px;font-weight:bold;">見出しサンプル</div>

実際に表示したのが、こちら↓

見出しサンプル


HTML解説

以下の図を見ながら説明する。(番号参照)
全体を長四角とみると分かりやすい。





@:上の線。pxで線の太さを指定。solidで色を指定。
A:左の線。    〃
  (帯は実は線の太さでした)
B:右の線。    〃
C:下の線。    〃
D:背景の色。
E:線と文字の間隔。10pxが上下、20pxが左右の空き間隔。
F:widthで全体の長さを指定。font−weight:boldは太字の指定。
※指定が不要な場合は記述しなくてもよい。その他いろいろ指定できるが割愛。

これをサンプルとして、色や太さなどを変えてサイトにあった見出しを作成してもらえればと思います♪




にほんブログ村 サラリーマン日記ブログ 主任(主任クラス)へ
にほんブログ村
人気ブログランキングへ

タグ:ブログ
この記事へのコメント
こんにちは。
めんどくさがりな性格ですので
長文垂れ流しが多く、お恥ずかしい限りです。

本格HPではないし、もっとコンパクトにするよう心がけるのが私には先決かもです(>_<)
Posted by hatenokuni at 2010年08月17日 13:11
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
>