シリウスで利用しているCSS一覧
|
文字に関係する記述 |
意味 |
|---|---|
|
font-family: |
利用するフォントスタイルの指定。複数設定可能 |
|
font-family: sans-serif |
ゴシック系のフォント |
|
font-family: serif |
明朝系のフォント |
|
font-family: cursive |
筆記体・草書体のフォント |
|
font-family: fantasy |
装飾的なフォント |
|
font-weight:normal |
線の太さ。通常 |
|
font-weight:bold |
太字 |
|
font-weight:lighter |
細字 |
|
font-weight:bolder |
最大太字 |
|
font-size:○px |
文字サイズ。ピクセル単位で指定 |
|
font-size:○em |
em単位で指定※1emが標準 |
|
font-size:○％ |
％単位で指定※100％が標準 |
|
color:#○○○○○ |
文字の色：※HTMLカラーコード参照 |
|
background-color:#○○○○○ |
背景の色：※HTMLカラーコード参照 |
|
text-align:center |
テキストの位置：中央寄せ |
|
text-align:left |
テキストの位置：左寄せ |
|
text-align:right |
テキストの位置：右寄せ |
|
text-decoration: none |
テキストに線がつかない普通の状態 |
|
text-decoration: underline |
テキストに下線がつく |
|
text-decoration: overline |
テキストに上線がつく |
|
text-decoration: line-through |
テキストに打ち消し線がつく |
|
text-decoration:blink |
テキストが点滅する |
|
line-height: |
行間の幅、文字の隙間の広さ。em・px・％で数値指定可能 |
|
リンクに関する記述 |
意味 |
|
a visited |
通常状態のリンク色 |
|
a hover |
カーソルを重ねた時のリンク色 |
|
a img |
画像リンクの時の条件 |
|
枠線に関する記述 |
意味 |
|
border: none |
枠線なし |
|
border: hidden |
枠線隠し |
|
border: solid |
枠線で囲む※指定の数値 |
|
border:double |
二重線の枠線で囲む |
|
border:groove |
立体的にくぼんだ線で囲む |
|
border:ridge |
立体的に盛り上がった線で囲む |
|
border:inset |
左上がくぼみ、右下が盛り上がる枠で囲む |
|
border:outset |
左上が盛り上がり、右下がくぼむ線で囲む |
|
border:dashed |
破線で囲む |
|
border:dotted |
点線で囲む |
|
備考 |
borderは位置、スタイル、色まで指定できる |
|
border-bottom-width: ○px; |
下枠線を○pxの太さに |
|
border-top-style: double; |
上線を二重の枠線に |
|
border-left-color: #CCCCCC; |
左の線の色を変更 |
|
位置に関する記述 |
意味 |
|
margin |
上右下左に外側に余白をあける |
|
margin-left |
左に外側に余白をあける |
|
margin-right |
右に外側に余白をあける |
|
margin-top |
上に外側に余白をあける |
|
margin-bottom |
下に外側に余白をあける |
|
padding |
上右下左に内側に余白をあける |
|
padding-left |
左に内側に余白をあける |
|
padding-right |
右に内側に余白をあける |
|
padding-top |
上に内側に余白をあける |
|
padding-bottom |
下に内側に余白をあける |
|
ブロックに関する記述 |
意味 |
|
display: block |
ブロックボックスを作成する |
|
display: list-item |
ブロック内のリストを作成する |
|
display: inline |
文章内で利用できるブロックを作成 |
|
list-style-type: none |
リストのマーカーを指定しない |
|
list-style-type: disc |
リストのマーカーが黒丸 |
|
list-style-type: circle |
リストのマーカーが白丸 |
|
list-style-type: square |
リストのマーカーが四画 |
|
list-style-image: url |
リストのマーカーに画像を指定 |
|
レイアウトに関する記述 |
意味 |
|
width: ○px |
横幅※px単位で指定 |
|
width: ○％ |
（表示領域の）0〜100％で指定 |
|
width:auto |
（表示幅）に自動調整 |
|
height：○px |
高さ※px単位で指定 |
|
height：○％ |
（表示領域の）0〜100％で指定 |
|
height：auto |
（表示幅）に自動調整 |
|
background-image: url |
背景画像を指定して読み込む |
|
background-repeat: no-repeat |
背景画像を呼び出すのは一度だけ |
|
background-repeat: repeat-x |
横方向に繰り返し表示 |
|
background-repeat: repeat-y |
縦方向に繰り返し呼び出し |
|
background-position: left top; |
画像呼び出しの基点を左上に |
|
background-position: right top; |
画像呼び出しの基点を右上に |
|
background-position: center top; |
画像呼び出しの基点を上中央に |
|
備考 |
同様にmiddle（中心）、bottom（下） |
|
overflow:hidden; |
はみ出した部分を隠す |
|
overflow:scroll |
はみ出した部分はスクロールで表示 |
|
overflow:auto |
はみ出した部分はスクロールで表示 |
|
回り込みに関する記述 |
意味 |
|
float:left; |
左回りこみさせる |
|
float:right; |
右回り込みさせる |
|
設定クリアに関する記述 |
意味 |
|
clear: both; |
回り込みを左右解除します |
|
clear: left; |
左回りこみを解除します |
|
clear: right; |
右回り込みを解除します |
|
clear: all; |
全ての回り込み要素を解除します |
補足
margin・paddingの考え方
- marginは指定したコンテンツそのものを動かし、外からの余白を確保する方法
- paddingはコンテンツの中身に指定した文字・画像等を内側の余白を確保する方法
margin・paddingの記載方法の色々
|
margin：10px; |
上・右・下・左、全て均等に余白を取る |
|---|---|
|
margin：10px;padding:10px; |
外余白均等に10px 内側余白均等に10px |
|
margin: 10px 20px; |
上下10px 左右20pxの余白を取る |
|
margin: 10px 20px 30px; |
上10px 左右20px 下30pxの余白を取る |
|
margin: 10px 20px 30px 40px; |
上10px 右20px 下30px 左40pxの余白を取る |
このように省略形式で記載されることもあるので、位置関係を覚えておく
