● CSSいろいろﾘﾌｧﾚﾝｽ
ホームページをデザインする上で、よく使うと思う設定項目をまとめました。
(プロパティと値の枠をコピーして使うと便利かと思います)
CSSのプロパティは細かくデザインできる代わりに、設定項目が多いので慣れないと混乱しそうですね。
プロパティをざっと見てどんなことが出来るのかだいたい分かったら、
自分の作りたいページを紙に書くなどしてイメージを固めた後に、HTMLとCSSのﾘﾌｧﾚﾝｽを見て作っていく方法が良いと思います。
1. 色の設定
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | 色の設定 | color: | #0000ff; | 色の値
|
色の値の詳細はこちら 《CSS(ｽﾀｲﾙｼｰﾄ)基本 2. 色の指定》
2. ﾌｫﾝﾄの設定
<div>、<p>、<span>、<h1>などのタグで指定したテキストを装飾するプロパティです。
| プロパティ説明 | プロパティ
| 値 | 値の説明
| | | | |
| 字の太さ |
| font-weight: | light; | 細い |
| font-weight: | normal; | デフォルト |
| font-weight: | bold; | 太い |
| font-weight: | 300; | 太さを数値で設定(100刻み) |
| 字の大きさ |
| font-size: | xx-small; | 最小 |
| font-size: | x-small; | 小さい |
| font-size: | small; | 小さめ |
| font-size: | medium; | デフォルト |
| font-size: | large; | 大きめ |
| font-size: | x-large; | 大きい |
| font-size: | xx-large; | 最大 |
| font-size: | 10pt; | 単位 (pt,px,mm,cm ..etc) |
| 段落の間隔 |
| line-height: | 20pt; | 単位 (pt,px,mm,cm ..等) |
| line-height: | normal; | デフォルト |
| フォント指定 |
| font-family: | 'ＭＳ 明朝'; | フォント名(ＭＳ ゴシック,ＭＳ 明朝 等) |
| font-family: | fantasy; | フォント名(serif,sans-serif,cursive,
fantasy,monospace ..等) |
また、フォントは一括指定できます。(font-size と font-family 以外は省略できる)
style=" font: 字の太さ 字の大きさ 段落の間隔 フォント指定 "
3. ボックスの設定
<div>、<p>、<span>、<h1>などのタグで指定した範囲に枠を作るプロパティです。
枠、ボックス、BOX、ブロック、などと呼びます。
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | ボックスの幅
| | width: | 100px; | 単位 (pt,px,mm,cm,% ..等)
| | なし | なし | 自動調整
| | ボックスの高さ
| | height: | 25px; | 単位 (pt,px,mm,cm,% ..等)
| | なし | なし | 自動調整
| 指定したボックスの
幅と高さから、
文章がはみ出したとき
の処理
| | overflow: | scroll; | 常にスクロールバーを表示
| | overflow: | hidden; | はみ出した部分は非表示
| | overflow: | visible; | 範囲を広げて表示(ﾃﾞﾌｫﾙﾄ)
| | overflow: | auto; | はみ出した時はスクロールバーを表示
| ボックス枠線の線種
top,bottom,left,right
で上,下,左,右の枠を
選ぶことが出来ます
|
border-style:
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
| | solid; | 直線
| | groove; | 溝線
| | ridge; | 稜線
| | double; | 二重線
| | inset; | 凹枠風な線
| | outset; | 凸枠風な線
| | none; | 線無し(ﾃﾞﾌｫﾙﾄ)
| ボックス枠線の線の太さ
top,bottom,left,right
で上,下,左,右の枠を
選ぶことが出来ます
|
border-width:
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:
| | medium; | (ﾃﾞﾌｫﾙﾄ)
| | thin; | 細い
| | thick; | 太い
| | 10px; | 単位 (px,pt,mm,cm ..等)
| ボックス枠線の線の色
top,bottom,left,right
で上,下,左,右の枠を
選ぶことが出来ます
| | border-color: | #00f; | 色の値
| | border-top-color: | #00f; | 色の値
| | border-bottom-color: | #00f; | 色の値
| | border-left-color: | #00f; | 色の値
| | border-right-color: | #00f; | 色の値
| ボックス外側の余白
top, bottom, left, right
で上,下,左,右の余白を 選ぶことが出来ます
margin:
margin-top:
margin-bottom:
margin-left:
margin-right:
| | 10pt; | 単位(pt,px ..等)
| | auto; | 自動調整
| ボックス内側の余白
top, bottom, left, right
で上,下,左,右の余白を 選ぶことが出来ます
padding:
padding-top:
padding-bottom:
padding-left:
padding-right:
| | 10pt; | 単位(pt,px ..等)
| | auto; | 自動調整
| | |
○応用編1 次のプロパティは4辺まとめて設定することが出来ます。
①border-style: 上 右 下 左; (枠線の線種)
例：
border-style: solid groove ridge double;
border-style: double none double none;
border-style: none solid none solid;
②border-width: 上 右 下 左; (枠線の太さ)
例：
border-width: 5px 200px 2px 40px;
③border-color: 上 右 下 左; (枠線の色)
例：
border-color: #f00 #0f0 #00f #888;
④margin: 上 右 下 左; (枠の外側の余白)
⑤padding: 上 右 下 左; (枠の内側の余白)
○応用編2 次のプロパティは4辺または1辺について、線種、線の太さ、線の色をまとめて設定することが出来ます。
①border: 線種 線の太さ 線の色; (4辺に対応)
例：
border: double 2px #00f;
①border-**: 線種 線の太さ 線の色;
(**は上[up]、下[bottom]、左[left]、右[right]の1辺ずつに対応)
(同じタグに4辺まで記述が可能)
例：
border-top: outset 5px #88f;
border-bottom: outset 5px #88f;
border-left: outset 5px #88f;
border-right: outset 5px #88f;
4. テキスト装飾
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | テキストの位置
| | text-align: | left; | 左左左
| | text-align: | center; | 中央中央
| | text-align: | right; | 右右右
| | テキスト装飾
| | text-decoration: | underline; | 下線
| | text-decoration: | overline; | 上線
| | text-decoration: | line-through; | 取消線
| | text-decoration: | none; | なし(デフォルト)
| | インデント | text-indent: | 7pt; | 下げる単位(pt,px,mm,cm 等)
| | 文字間隔
| | letter-spacing: | 10px; | 広げる 単位(pt,
px,mm,cm 等)
| | letter-spacing: | -2px; | 狭める 単位(pt,px,mm,cm 等)
| | letter-spacing: | normal; | デフォルト
|
インデント：段落の１行目を指定数下げること。
5. 背景の設定
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | 背景色
| | background-color: | #fAA; | 色の値 <TD>タグ内の場合
| | background-color: | #fAA; | 色の値 <DIV>タグ内の場合
| | background-color: | transparent; | なし(デフォルト)
|
| 背景画像
| | background-image: | url(img\inu2.jpg); | 画像 <TD>の場合
| | background-image: | url(img\inu2.jpg); | 画像 <DIV>の場合
| | background-image: | none; | 画像なし
|
背景画像の
貼付け方法
| | background-repeat: | no-repeat; | 1つだけ貼付け
| | background-repeat: | repeat-x; | 横に並べて貼付け
| | background-repeat: | repeat-y; | 縦に並べて貼付け
| | background-repeat: | repeat; | 範囲いっぱいに並べて貼付け
(デフォルト)
|
背景画像の
表示方法
| | background-attachment: | scroll; | ﾍﾟｰｼﾞのｽｸﾛｰﾙと共にｽｸﾛｰﾙ
(デフォルト)
| | background-attachment: | fixed; | ﾍﾟｰｼﾞがｽｸﾛｰﾙしても画像は
動かない
|
背景画像の
表示位置 | background-position: | left; | left：左 center：中央 right：右
top：上 middle：中段 bottom：下
単位(pt,px,mm,cm,% ..等)
|
また、背景は一括設定できます。
style=" background: 背景色 背景画像 貼付け方法 表示方法 表示位置"
6. 位置の設定
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | 位置指定方法の設定
| | position: | absolute; | 絶対位置(デフォルト)
(ページ左右上下の端っこ4辺をゼロ位置とする)
| | position: | relative; | 相対位置
(タグ設置位置をゼロ位置としする)
| 絶対位置の指定
値の説明を見てください。
| | top: | 100px; | 頂点から下へ、目標点までの距離
| | bottom: | 500px; | 最下から上へ、目標点までの距離
| | left: | 10px; | 左端から右へ、目標点までの距離
| | right: | 300px; | 右端から左へ、目標点までの距離
| 相対位置の指定
値の説明を見てください。
| | top: | 100px; | タグから下へ、目標点までの距離
| | bottom: | 500px; | タグから上へ、目標点までの距離
| | left: | 10px; | タグから右へ、目標点までの距離
| | right: | 300px; | タグから左へ、目標点までの距離
|
距離を指定する単位は px,pt,mm,cm,% ..等です。
反対方向への距離は -(マイナス符号)であらわします。
重なるタグの前面・後面の順位付けは z-index で設定します。
の大きいほうがより前面となります。
例：
style=" z-index: ; "
style=" z-index: ; "
7. スクロールバーの色
ページ全体を動かすスクロールバーの設定は <body> に記述します。
その他は、ボックス設定で表示したスクロールバーに対して設定します。
下のプロパティに行くほど変更点がわかりずらくなります。(^^;
好みの色を試してみてください。
テスト前のスクロールバー
| | | |
プロパティ説明 | プロパティ
| 値 | 値の説明
| | スクロールバーの色設定
| scrollbar-base-color: | 00f; | スクロールバー構成要素の色系統を設定する
| | スクロールバー構成要素の色設定
| | scrollbar-track-color: | f00; | レールの色
| scrollbar-face-color: | f00; | 操作部分の色
| scrollbar-shadow-color: | f00; | 横ｽｸﾛｰﾙﾊﾞｰの影の色
| scrollbar-darkshadow-color: | f00; | 濃い影の色
| scrollbar-highlight-color: | f00; | ハイライトの色
| scrollbar-3dlight-color: | f00; | 明るい(光の当たっている)部分の色
| scrollbar-arrow-color: | f00; | 矢印の色
| | | | | | |
|
