きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(活用編) スタイルシートで使用する文字列集

<<   作成日時 : 2008/06/09 21:33   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 4

CSS編集で使用する文字列を集めてみました。
ここに上げたもので簡単なデザイン指定はカバー出来ると思います。
軽く説明書きはしておきますが、使用する際には十分効果を確認してください。

※文字列には全てデザイン指定のために仮の数値等を書きこんであります。

例:背景色を赤 → background-color:#FF0000;

ブログデザインに合わせて任意に数値等(赤色の部分)を変更します。
※既定値としてあるものは記入しなくても同様の効果で表示されます。






◆   スタイル編   ◆



背景 [ background ]


色や画像の貼り付けなどブログ背景のデザインを指定します。


背景色 (色:赤)
background-color:#FF0000;

背景画像の貼り付け 
background-image: url(背景画像のURL);

背景画像を表示しない(※適用中のデザインテンプレートの画像を消すこともできます。)
background-image: none;

背景画像の並べ方
background-repeat: repeat; (※既定値 画像を敷き詰めて表示)
background-repeat: repeat-x; (横方向にのみ繰り返し表示)
background-repeat: repeat-y; (縦方向にのみ繰り返し表示)
background-repeat: no-repeat; (繰り返しはしないでひとつだけ表示)


背景画像の動作
background-attachment: scroll; (※既定値 ウインドウと一緒にスクロール)
background-attachment: fixed; (画像をスクロールしない。 画像を固定して表示します)



罫線 [ border ]


線の幅や色、種類などのデザインを指定して罫線を引きます。
 関連記事  CSS(スタイル編) 第8回 いろんな場所の線のデザインをいじってみよう♪


◆デザイン指定 (線幅、線色、線種)を一括で行う場合

上下左右全てに線を引く (線幅:1px 線色:赤 線種:実線 ※線種の文字列は青色で表示)
border:1px #FFFFFF solid;


単独で線を引く(上から上・右・下・左の順です)
border-top:1px #FFFFFF solid;
border-right:1px #FFFFFF solid;
border-bottom:1px #FFFFFF solid;
border-left:1px #FFFFFF solid;


線を表示しない(※適用中のデザインテンプレートの線を消すことも出来ます。)
border:none;


◆デザイン指定を単独で行う場合

○線幅 (1px)
border-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

○線色 (赤)
border-color: #FFFFFF;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;

○線種 (実線)
border-style: solid;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

※線種は以下のような文字列でデザイン指定をおこないます。
【 実線 solid 】 【 点線 dotted 】 【 破線 dashed 】 【二重線 double
【 谷線 groove 】 【 山線 ridge 】 【 内線 inset 】 【 外線 outset



リスト [ list ]


リストのマーカーに画像を使用したりマーカーの形を変更します。


マーカーに画像を使用する
list-style-image: url(リスト画像のURL);


マーカーの形を変える
list-style-type: disc;

※マーカーの形は以下のような文字列でデザイン指定をおこないます。
【 黒丸 ※既定値 disc 】 【 白丸 circle 】 【 四角 square
【1, 2, 3... decimal 】 【 i, ii, iii... lower-roman 】 【 I, II, III... upper-roman
【 a, b, c... lower-alpha 】 【 A, B, C... upper-alpha

※上記の他にもマーカーの形を指定するものはあります
※ブラウザによっては表示できないものもあります。


マーカーを表示しない
list-style: none;



余白 [ margin ] [ padding ]


画像やフォントなどの周囲に余白を作って配置します。
効果の違いについては関連記事を参照のこと。
 関連記事  CSS(スタイル編) 第11回 余白を指定する♪『マージンとパディング』


◆ マージン [ margin ] 〜 ボーダーの外側の余白

一括でデザイン指定をする場合
マージンの位置指定は、数値を1〜4個指定することで下のように解釈されます。

margin: 1px;        (上右下左にそれぞれ1px )
margin: 1px 2px;      (上下1px 左右2px)
margin: 1px 2px 3px;    (上1px 左右1px 下3px)
margin: 1px 2px 3px 4px;  (上1px 右2px 下3px 左4px)


単独でデザイン指定をする場合(上から上・右・下・左の順です)
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;


※赤色部分の数値を置き換えて余白をしていします。



◆ パディング [ padding ] 〜 ボーダーの内側の余白

一括でデザイン指定をする場合
パディングの位置指定は、数値を1〜4個指定することで下のように解釈されます。

padding: 1px;        (上右下左にそれぞれ1px )
padding: 1px 2px;      (上下1px 左右2px)
padding: 1px 2px 3px;    (上1px 左右1px 下3px)
padding: 1px 2px 3px 4px;  (上1px 右2px 下3px 左4px)


単独でデザイン指定をする場合(上から上・右・下・左の順です)
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;


※赤色部分の数値を置き換えて余白をしていします。



横幅 [ width ] ・ 高さ [ height ]


セルや画像などの大きさを指定します。
横幅 は [ width ] 、 高さが [ height ] です。
指定方法は100pxのような単位付数値や50%のようなパーセント形式を使います。

width: 100px;
height: 100px;












◆   フォント編   ◆



文字を表示しない [ none ]


この指定により文字を表示しないようにします。
display:none;



文字色 [ color ]


フォントの色を指定します (色:赤)
color:#FF0000;



文字のサイズ


フォントの大きさを指定します。
指定方法は数値 : 10px、パーセント形式 : 100% など



font-size:120%;



文字の太さ


フォントの太さを指定します。
指定方法は標準: normal(※既定値) 、太字 : bold など

font-weight:normal;
font-weight:bold;



文字の種類 [ font-family ]


フォントの種類を指定します。
PCにインストールされていないフォントは表示されないので注意が必要です。

font-family: 'MS 明朝';



装飾 [ text-decoration ]


テキストの装飾を指定します。

指定しない(表示しない)
text-decoration: none;

下線
text-decoration: underline;

上線
text-decoration: overline;

打ち消し線
text-decoration: line-through;



リンク付文字


リンクのついた文字(使用の仕方によっては画像)のデザインを指定します。
 関連記事  CSS(フォント編) 第3回 リンクの付いているフォント♪ 【再編集】


例:上から未訪問()、訪問済み(黄緑・下線無し)、ポインタを置いた時(・下線付)
a:link { color: 0000FF; }
a:visited { color: 00CC00; text-decoration: none; }
a:hover { color: FF0000; text-decoration: underline; }

※デフォルトのリンク付文字の装飾はインターネットオプションでの設定に従います。



配置 (水平位置) [ text-align ]


左寄せ、右寄せなど水平位置での配置の指定をします。

左寄せ(※既定値)
text-align: left;

右寄せ
text-align: right;

中央寄せ
text-align: center;



配置 (垂直位置) [ vertical-align ]


文字を垂直位置(セル内)での配置の指定をします。

上付きで配置
vertical-align:top;

下付きで配置
vertical-align:bottom;

中央に配置
vertical-align:middle;









CSS編集で使用できる文字列は上記以外にもあります。
必要と思った文字列については、また追加していく予定です。

今回はこのくらいで(にこ)


|ω・)ノシ See you♪

|彡 サッ





■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
なるほど(納得、参考になった、ヘー)
驚いた

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
画像の幅も広げられるのですか、

僕のより広い人がいるので

2カラムでは無理何でしょうか??

宜しくお願いします。
ミク
URL
2009/05/23 08:05
>ミクさん

画像の幅は記事作成の時に書き込むタグを編集することで調整出来ます。
画像挿入タグを見ていただくと、

width="***" height="***"

このような記述があります。
※ 「***」は任意の数値

「width="***"」→ 画像の横幅
「 height="***"」→ 画像の高さ

「***」の部分を表示したいサイズの数値に置き換えます。
縮小前後の画像の縦横の比率を揃えるようにします。

記事ページの画像サイズはこんな風に調整します。
mairis
2009/05/23 09:55
初めまして(ぺこ)今回ブログのCSSの活用法など詳しく
書かれていたので(すき)とても参考にさせて頂いてます(ぺこ)
これだけの編集が出来るととても楽しくブログが出来上がる
気がします(まじ)

まだまだ参考にさせて頂いてブログのCSS編集を
したいと思っています(にや)

また時々お邪魔するとは思いますけどこれから
よろしくお願い致します(ぺこ)(@ぺこ)
マサ☆彡
2009/06/23 15:13
>マサ☆彡さん

はじめまして、こんにちは(にこ)

CSS編集の記事はうち自身がブログデザインを変えたくて書き始めたのです(ん)
基本的な部分は押さえられるかな〜と(にや)
少しでもカスタマイズのお手伝いが出来るば嬉しいです♪

とは言え、全ての部分をカバーしきれていませんので、
疑問点があればお申し付けください(*・ω・)/
mairis
2009/06/23 16:03

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(活用編) スタイルシートで使用する文字列集 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる