2003年12月18日

CSSについてその6

本日は、cdontent(ブログの記事の箇所)についてです。

どのようなセレクタを使用しているかは、下記画像をご確認下さい。
(今日の手抜きですね。。。)

同じ日に、複数の記事を投稿する場合は、blogbodyがその日の記事数分表示されることになります。

また、この中には入っていないのですが、記事を書く際にHTMLタグを使用する場合(例えば引用のタグ<BLOCKQUOTE>)は、CSSファイルに新たにセレクタ名を追加するようにして下さい。
例:
blockquote {
margin:10px;
border-left:solid 2px #CCCCCC;
padding:5px;
width:auto;
}
posted by スタッフ2号 at 20:22| 沖縄 ☀| Comment(16) | TrackBack(8) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2003年12月17日

CSSについてその5

今回からは、実際Seesaaブログで使っているCSSのセレクタ名を説明したいと思います。
(種類が多いので何回かに分けてやりたいと思います。)

基本的には、3つの構成要素から成り立っています。
1.ヘッダー箇所になる「banner」
2.記事を表示する「content」
3.カレンダー、カテゴリ等を表示する「links」

その中から、今回はbannerについてどのようなセレクタを使っているか説明します。
というか、参考画像を見てみてください。
(手抜きになってしまい、もうしわけありません。。)
posted by スタッフ2号 at 20:27| 沖縄 ☀| Comment(16) | TrackBack(36) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2003年12月15日

CSSについてその4

前回から引き続き、seesaaブログで使っている属性の説明です。
(更新が遅れてすいません。。。)

■文章系
・text-align
文章の配置位置を設定します。
tezt-align:center;
属性値は
left 左寄せ
center 中央揃え
right 右寄せ
justify 両端揃え(IE5・NN6以上、safariに対応)
になります。
・text-decoration
文字の装飾設定を行います。
text-decoration:none;
属性値は
none 文字飾りなし
inderline 下線
overline 上線
line-through 取消線
になります。

・line-height
行間隔の設定を行います。
line-height:120%;

■背景系
・background
背景の設定を行います。
background:#000000;
ただし、属性値については、設定の方法がいくつかあります。
1.#000000(色を16進数で2桁ずつ指定)
2.#000(色を16進数で1桁ずつ指定)
3.black(色を定義されている色名で指定)

・background-image
背景画像の設定を行います。
backround-image:url(http://blog.seesaa.jp/hoge.gif)
url( )に、設定したい背景の置き場所を指定します。
・background-repeat
背景画像の繰り返し設定を行います。
background-repeat:no-repeat;
この属性で使用する属性値は、以下の通りとなります。
repeat 指定された画像を繰り返し表示する
no-repeat 指定された画像の繰り返しを行わない
repeat-x 指定された画像を横方向に繰り返す
repeat-y 指定された画像を縦方向に繰り返す

もちろん、現在Seesaaブログで使っていない属性も使用できます。

なので、その他の属性については、スタイルシートの本やWEBサイトを参考にしてみて下さい。
posted by スタッフ2号 at 16:51| 沖縄 ☀| Comment(8) | TrackBack(7) | スタイルシート | このブログの読者になる | 更新情報をチェックする

2003年12月03日

CSSについてその3

今回は、seesaaブログで使っている属性を簡単に説明します。
(とりあえず、一部紹介させて頂きます。)

■段落系
・margin
段落と段落との間隔を設定します。
margin:5px;
この場合は、上下左右均等に5pxと設定しています。
それぞれ異なる値を設定する場合は、
margin:1px 2px 3px 4px;
のように、上、右、下、左の設定を行います。
ちなみに、
margin-topって、設定で個々に行うのもOKです。
・padding
段落の枠線と段落の内容との間隔を設定します。
padding:5px;
この場合は、上下左右均等に5pxと設定しています。
それぞれ異なる値を設定する場合は、
padding:1px 2px 3px 4px;
のように、上、右、下、左の設定を行います。
ちなみに、
paddingtopって、属性名で個々に行うのもOKです。
・width
段落の横幅の設定を行っています。
wodth:560px;
ちなみに、
・border
段落の枠線を設定するのに使用しています。
一括で指定する場合は、
border:2px dotted #000000;
こんな感じで、線の太さ、線種、線の色を指定します。
上下左右の設定を個別にする場合は、
border-top、border-bottom、border-left、border-right
で個別に設定します。
・position
段落の表示位置を設定しています。
Seesaaブログでは、absoluteという値を使って、絶対位置で配置するようにしています。
position:absolute;left:10px;top:5px;
ただし、この属性を使うと、IEで文章のコピーができないってバグがあります。
※現在変更を検討中です。

■文字系
・font-weight
文字の太さの設定を行っています。
font-weight:normal;
・font-size
文字の大きさの設定を行っています。
font-size:100%;
・font-family
フォントの指定を行っています。
font-family: Arial, Helvetica, sans-serif;
・color
文字の色を設定しています。
color:#FF9966;


posted by スタッフ2号 at 21:29| 沖縄 ☀| Comment(10) | TrackBack(35) | スタイルシート | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。