|
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（スタイル編） 第８回 いろんな場所の線のデザインをいじってみよう♪ ◆デザイン指定 （線幅、線色、線種）を一括で行う場合 上下左右全てに線を引く （線幅：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（スタイル編） 第１１回 余白を指定する♪『マージンとパディング』 ◆ マージン [ 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: 'ＭＳ 明朝'; 装飾 [ text-decoration ] テキストの装飾を指定します。 指定しない（表示しない） text-decoration: none; 下線 text-decoration: underline; 上線 text-decoration: overline; 打ち消し線 text-decoration: line-through; リンク付文字 リンクのついた文字（使用の仕方によっては画像）のデザインを指定します。 関連記事 CSS（フォント編） 第３回 リンクの付いているフォント♪ 【再編集】 例：上から未訪問（青）、訪問済み（黄緑・下線無し）、ポインタを置いた時（赤・下線付） 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♪ |彡 ｻｯ  CSS編集や小技でブログをコーディネート♪ デザイン変更のための記事をいろいろまとめたページです。 ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 |
| << 前記事（2008/06/09） | トップへ | 後記事（2008/06/10）>> |
| タイトル （本文） | ブログ名／日時 |
|---|
| 内 容 | ニックネーム／日時 |
|---|
| << 前記事（2008/06/09） | トップへ | 後記事（2008/06/10）>> |
ノ
