CSS勉強中スタッフです
いまはお昼だよ～
今日は前回の記事「CSSの「class（クラス）」ってなんのこと」で勉強した方法を使って、
実際に自分のデザインしたい箇所をデザインしてみるよ
前回の記事を確認してない人は、
確認してみてね今日も上級編だから、内容が難しい人は、自分にあった記事から始めてみてね
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ
例えば、記事の見出しの左にある灰色の線の色を変えてみたいとする
前回勉強した方法で、その箇所のclassを調べる
そのclassを使ってCSSを書く※CSSは一番下に追加してね
今回は、線の色を変えたいから border-color を使ったよ
.skinArticleHeader{
border-color: skyblue ;
}
※classの前に . を
忘れないでねというわけで、↑こんな感じの流れで自分がデザインしたい箇所をデザインできるよ
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ
上で試したこの組み合わせは、他にもいろいろ試せるよ
ブログの箇所(class).skinArticleHeader
どのデザイン部分かborder-color
どうデザインするかskyblue
組み合わせられるパターンの主なものを挙げてみる
ブログの箇所(class).skinBody3（ブログ全体）
.skinMessageBoard（メッセージボード全体）
.skinArticle（記事全体）
.skinArticleHeader（記事の見出し）
.skinMenu（サイドメニュー）
.skinMenuHeader（サイドメニューの見出し）
.skinSimpleBtn（次のページボタン、前のページボタン）
.blogComment（コメント）
.ownerComment （ブログ主のコメント）
などなど
どのデザイン部分かbackground-color（背景色）
border-color（線の色）
color（文字色）
font-size（文字の大きさ）
border-size（線の太さ）
border-style（線の形）
background-image（背景画像）
などなど
どうデザインするか色の指定（background-color、border-color、colorなど）
skyblue
red
pink
#000000
#333333
などなど
サイズの指定（font-sizeなど）
5px
1.5em
100%
などなど
特別な指定の例
background-image
↓
url(xxxxxxxxxxxxx.jpg)
border-style
↓
none（なし）
solid（普通の線）
dotted（点線）
などなど
上の
をいろいろ組み合わせて、CSSが書けるよ { : ; : ;}
サンプル
.skinArticleHeader{
border-color : skyblue ;
}
.skinArticleHeader{
background-color : pink ;
}
.skinArticleHeader{
background : #000000 ;
color : white ;
}
.blogComment{
border-color : skyblue ;
border-size: 1px ;
border-style: dotted ;
}
※下記を忘れやすいから注意してね
classの前の .
デザインの指定を囲う { や }
デザインの指定の間の :
デザインの行の最後の ;
｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ
自分でclassを調べたり、
デザインの指定のパターンがわかってくると、
無限の組み合わせを作ることができる
いろいろな組み合わせでCSSを書いて、ブログを自由にデザインできるよ
CSSでどういうデザインができるかは、いろいろな本もでているから勉強してみてね
もちろんこのブログでもすこしずつ紹介していくから、一緒に勉強していこうね
今日も上級編だったけど、できたかな
もしも難しいな感じた人は、自分にあった記事から始めてみてね
