CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  見出しタグに使えるcssパーツ集

<h1>から<h2><h3>あたりの見出しタグに使えるcssパーツ集です。
CSSファイルの該当の部分にそのまま張り替えてご使用ください。
便宜上、全てh2に適用させてますが、別の属性で使用する場合は書き換えて使って下さい。
パーツを元にカスタマイズする際は上記のメニューバーの各項目をご参照ください。

 

  見出しにスタイルを適用する

コピペ用パーツサンプル

赤系 黒系 紫系 緑系 青系
茶系 ピンク系 灰色系 紺系 オレンジ系

上記いずれかのパーツサンプルをクリックして開きます。
お気に入りのパーツがありましたらパーツを全て選択してコピーします。
パーツをコピーします
お持ちのホームページのスタイルシートをエディターで開きh2やh3などスタイルを適用する箇所に上書きで貼り付けます。 更新して変更を確認してみましょう! なお、元の設定に戻せるよう初めから記載されていたスタイルはバックアップをとっておくことをおすすめします。

文字の大きさを変えたい!

このパーツはデフォルトでは文字の大きさを16pxにしてあります。もう少し小さくしたり大きくしたりしたい場合はfont-size: 16px; の部分の数字を変えて調整してください。
こちらにサイズと単位については記載してありますので参考にしてください。

関連項目:文字の設定 

文字の色を変えたい!

文字の色を変更したい場合はcolor: #222222; の部分の#222222を変えて調整してください。
こちらに色の変更方法については記載してありますので参考にしてください。

関連項目:文字の設定 

線の色を変えたい!

線の色を変更したい場合はborderと記載された箇所の#000000の部分を変更します。
border-left:;が左側の線、border-right:;が右側の線、border-top:;が上側の線、border-bottom:;が下側の線になります。 border:;のみだと文字を四角く囲みます。 こちらに色の変更方法については記載してありますので参考にしてください。

関連項目:枠線の設定 

線の太さ・種類を変えたい!

線の太さを変更したい場合はborderと記載された箇所の数値の部分を変更します。
線の種類を変更したい場合はborderと記載された箇所の solidなどの部分を別の線種に変更します。
solid→実線(一本の線) dotted→点線 dashed→破線 double→二重線など

関連項目:枠線の設定 

文字の上下左右の余白を変えたい!

余白を変更したい場合は padding: と記載された箇所の数値の部分を変更します。
上下左右一度にまとめて指定する場合は次のようになります。

 
padding:5px; 上下左右5pxの空白
padding:5px 10px; 上下5px 左右10pxの空白
padding:5px; 10px 2px; 上5px 左右10px 下2pxの空白
padding:5px 10px 2px 3px; 上5px 右10px 下2px 左3px空白

スタイル適用箇所の外の間隔を変えたい

サイト上の他の文章などとの間隔を変更したい場合は margin: と記載された箇所の数値の部分を変更します。 一度にまとめて指定する場合、上記のpaddingの設定と同じでpaddingをmarginに入れ替えて設定します。


領域の設定 *マージン(margin)、パディング(padding)、ボーダー(border)は左のような配置の関係になります。

背景の色を変えたい!

背景の色を変更したい場合は background-color:#d4d4d4; の部分の #d4d4d4 を変えて調整してください。
こちらに色の変更方法については記載してありますので参考にしてください。

関連項目:背景の設定 


Copyright © 2009 CSSパーツテンプレート All rights reserved.