CSSパーツテンプレート

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

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

  divとspanとは

タグに囲まれていない文字列にスタイルを適用する(文字の色や大きさを変更する)ときに使います。
<div>はブロック要素として<span>はインライン要素として働きます。
ブロック要素とは文字列が単体の場面で、<h>タグや<p>タグと同じように前後は自動的に改行されます。 インライン要素とは文章中の任意の文字列を変更するときに使います。

 

どちらもHTMLではたいした意味のないタグです。それゆえにどんな意味でも持たせることの出来る万能なタグといえるかもしれません。
この辺は理屈で覚えるよりも感覚的なものなので使っているうちにわかってきますので特に気にする必要はないかもしれません。
困ったときのdivとspanという風に覚えておきましょう!

 

なお、こちらのパーツはスタイルシートではなくHTMLファイルに直接記述します。現在外部ファイルでスタイルシートを適用している場合でも、このページに記載のパーツをコピペすれば 同じ箇所にスタイルの指定が重なってしまってもこちらのスタイルが優先されますので問題ありません。 (外部ファイルに指定してあるスタイルは削除する必要はありません)

 

パーツを元にカスタマイズする際は上記のメニューバーの各項目をご参照ください。

 

  文中にある文字にスタイルを適用する

コピペ用パーツサンプル


コピペ用パーツサンプルの文字をクリックして開きます。
お気に入りのパーツがありましたらパーツを全て選択してコピーします。
パーツをコピーします

お持ちのホームページのスタイルを適用したい箇所に上書きで貼り付けます。 「CSSパーツテンプレート」と言う文字は削除して、その部分にスタイルを適用したい箇所を当てはめるという形です。 更新して変更を確認してみましょう!

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

このパーツはデフォルトでは文字の大きさを変更していません。小さくしたり大きくしたりしたい場合は font-size:16px; などと属性と値を追加してください。
こちらにサイズと単位については記載してありますので参考にしてください。

関連項目:文字の設定 

文字の色を変えたい!

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

関連項目:文字の設定 

文字を斜体に変えたい!

文字を斜体に変更したい場合は font-style:italic; と設定します。

関連項目:文字の設定 

文字の太さを変えたい!

文字を太く変更するには font-weight:bold; と設定します。

関連項目:文字の設定 

線の色を変えたい!

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

関連項目:枠線の設定 

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

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

関連項目:枠線の設定 

背景の色を変えたい!

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

関連項目:背景の設定 


文字の余白に関しては見出しのスタイルのページをご参照ください。


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