だーしゃのCSS講座 線のカスタマイズしよう！
だーしゃのCSS講座
第7回
線のカスタマイズしよう！
みなさまこんにちは。
そろそろちゃんとしたコンテンツを上げないとと思って
今日はCSS講座を開催する事にしました！
もう第7回になりましたので、受講生の皆さんはうまくカスタマイズできているでしょうか？
今日はテンプレートの枠についてさらっとながしますね～
まずは
ブログの構造を理解してみよう！をみていただけるとわかると思いますが、
ブログは色々な要素からなっています。
まずテンプレートがこのようにありますが
それを囲っている枠を指定するスタイルシートがあります。
それが [ border ]です。
これを変更する事でスタイルシート内の
線を色々と変更する事ができます。
まず [ border ]の構造なのですが、
[boederの構造]
ｂorder: 1px solid #00cc00:
この一つ一つが何を表すかというと
1px → 太さ （ｐｘ単位）
solid → 線の種類
#00cc00 → 色
となっています。上の枠はまさしく中に記載されている[ border ]を使っています。
例えば色と太さを変えるなら。
ｂorder: 3px solid #003366:
という感じで色々と変える事ができます。
なのでまず色を変えたい方は上記のr要領で色を変えてみてください。
例えばこちら大外枠の色をを変えたい場合
#00cc00 →
#ff0000
外大枠のクラスは[ #container ]なのでこのクラスを変更しましょう！
ちょっと縮小するとオレンジ色になってしまって申し訳ないのですが、こんな感じ↓
ブログの構造を参照
#container{
font-size :12px;
width :740px;
background-color :#ffffff;
margin :0px auto;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-top-color : #00cc00 ;
border-right-color : #00cc00;
border-bottom-color : #00cc00;
border-left-color : #00cc00;
text-align :left;
}
#container{
font-size :12px;
width :740px;
background-color :#ffffff;
margin :0px auto;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-top-color : #ff0000;
border-right-color : #ff0000;
border-bottom-color : #ff0000;
border-left-color : #ff0000;
text-align :left;
}
color は色なので、そちらを変更すればOKです。
クラス内にある border の ＃～～～～ を変更すれば色が変わるので是非試してみてくださいね。
どれが何のクラスかわからない時は聞いてみてくださいな。
それではまた次回！
▼CSS講座
2006-04-11 だーしゃのCSS講座 写真に自動で白縁をつけたい！
2005-12-29 だーしゃのCSS講座 引用文に色を付けてみよう！
2005-09-02 だーしゃのCSS講座 線のカスタマイズしよう！
2005-07-28 だーしゃのCSS講座 背景画像及び背景色を変更してみよう！
2005-07-21 だーしゃのCSS講座 ブログタイトルの位置を変更してみよう！
2005-07-18 だーしゃのCSS講座 ブログタイトルの色を変えてみよう！
2005-07-17 だーしゃのＣＳＳ講座 ブログの構造を理解してみよう！
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく！
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう！
関連記事