4-9　見出しを修飾する

<hn> 要素はCSSで見た目を変更する事が出来ます。

【　記述見本　】

<head> ～ </head> 内に記述して下さい。

[ 関連事項 ： HP-TIPS > CSS > スタイルシートの書式 ]

<style type="text/css">
<!--
h1 {
margin: 30px auto 30px; /* マージンの間隔 */　--- （1）
padding: 10px 10px 10px 10px; /* パディングの間隔 */　--- （2）
font-size: 10pt; /* 文字の大きさ */　--- （3）
font-family: "ＭＳ Ｐゴシック","Verdana","Chicago","Arial","Helvetica", "Osaka" ; /* 文字の種類 */　--- （4）
font-weight: bold; /* 文字の太さ */　--- （5）
border: 1px dashed #660000; /* 線の種類と線の色（赤で点線） */　--- （6）
background-color: #ffcccc; /* 背景色（薄いピンク） */　--- （7）
color: #000000; /* 文字の色（黒） */　--- （8）
text-align: left; /* h1内で書かれた文字の位置（左寄せ） */　--- （9）
} -->
</style>

まとめて書くと上記のようになります。各説明は下記のコーナーで致します。（/* 文字列 */　のリンクをクリックすると説明文に飛びます）

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

pagetop

4-9-3　文字の大きさを設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
font-size: 10pt; /* 文字の大きさ */
} -->
</style>

文字を大きくしたい方は、「10pt」を「12pt」等に数字を大きくして行って下さい。

文字の大きさを指定しない場合は、前のページの見本にあるような大きさの字が表示されます。

[ 関連事項 ： HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 文字の大きさ ]

pagetop

4-9-4　文字の種類の設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
font-family: "ＭＳ Ｐゴシック","Verdana","Chicago","Arial","Helvetica", "Osaka" ; /* 文字の種類 */
} -->
</style>

文字の種類を決める項目です。指定したフォントが表示されなかった時用に、必ずカンマ（,）で区切って複数指定しておいて下さい。（優先順位は左が一番高く、右へ行くほど順位は低くなります）

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 文字の種類 ]

pagetop

4-9-5　文字の太さを設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
font-weight: bold; /* 文字の太さ */
} -->
</style>

文字の太さを指定しております。太字にしなくても良い方は記述しないで下さい。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 文字の太さ ]

pagetop

4-9-6　線の種類と色を設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
border: 1px dashed #660000; /* 線の種類と線の色（赤で点線） */
} -->
</style>

枠線を引きたい場合に使用する項目です。（引きたくない方はこの記述をしなければOKです）。上記では線を一括で赤色の点線に指定しておりますが、個別に指定する事も出来ます。


  1. 線を個別に引きたい方は
    「border-top」 --- 線が上部にのみ引かれます。
    「border-bottom」 --- 線が下部にのみ引かれます。
    「border-left」 --- 線が左側にのみ引かれます。
    「border-right」 --- 線が右側にのみ引かれます。
    （上記の「border」は 線を一括で指定したい場合に使用致します）
  2. 線を太くしたい方
    「1px」を「2px」等に数字を増やして行って下さい。
  3. 線の種類を変更したい方
    「dashed」を「solid」等に変更して下さい。枠線の種類はこちら（HP-TIPS > CSS > 枠線の種類） をご覧下さいませ。
  4. 色を変更したい方
    「#660000」（赤）を「#000000」（黒）等に変更して下さい。
  5. おまけ
    当サイトのリンクページ のｈ1のように太さと色を個別に指定したい場合は、ここの項目が
    border-left: solid 8px #000000;
    border-bottom: solid 1px #000000;　になります。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

pagetop

4-9-7　背景の色を設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
background-color: #ffcccc; /* 背景色（薄いピンク） */
} -->
</style>

背景の色を指定している項目です。色を変更したい方は、「#ffcccc」（薄いピンク）を「#ffffff」（白）等に変更して下さい。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 背景の色 ]

pagetop

4-9-8　文字の色を設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
color: #000000; /* 文字の色（黒） */
} -->
</style>

文字の色を指定している項目です。色を変更したい方は、「#000000」（黒）を「#cc0000」（赤）等に変更して下さい。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 文字の色 ]

pagetop

4-9-9　文字の位置を設定

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
h1 {
text-align: left; /* h1内で書かれた文字の位置（左寄せ） */　--- （9）
} -->
</style>

文字の位置を指定している項目です。

左寄せ --- 「left」
右寄せ --- 「right」
真ん中寄せ --- 「center」と記述して下さい。
（通常何も指定していなければ、自動的に左寄せ［left］されます）

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 文字に関して > 文字の位置 ]

pagetop