CSSの基本
制作者 : HiLo*t_ ＆ yuki
Copyright © 雛見沢症候群
Copyright © yuki
画面から見切れ防止
overflow:★
hidden はみ出た部分は消す
scroll スクロールバーを出す
行の高さを指定する
line-height:★
★:normal,実数値+単位、実数値、パーセント値+％
文字修飾と背景画像
フォントの指定１
font-family:★
★
serif: 明朝系のフォント
sans-serif: ゴシック系のフォント
cursive: 筆記体・草書体系のフォント
fantasy: 装飾がメインとなっているフォント
monospace: 等幅のフォント
フォントサイズの指定
font-size:★
★：% or キーワード
キーワード
xx-small: 非常に小さい
x-small: 小さい
small: やや小さい
medium: 普通のサイズ
large: やや大きい
x-large: 大きい
xx-large: 非常に大きい
larger: 親要素に対して一段階大きく
smaller: 親要素に対して一段階小さく
フォントへの斜体設定
font-style:★
★：キーワード
italic: イタリック
oblique: 斜体
normal: 通常の状態で表示
フォントの太さの指定１
font-weight:★
★：キーワード 数値
normal 標準
bold 太字
bolder 一段階太く
lighter 一段階細く
フォント一括指定のルール
font-style
font-variant
font-weight
font-size
font-height
font-family
背景色の設定
background-color:★
★：キーワード、色指定値
背景画像の設定
background-image:★
★：URL,none
背景画像の繰り返し方法の指定
backgrond-repeat:★
★：キーワード
repeat:画面一杯に敷き詰めて表示
repeat-x:横方向にのみ繰り返して表示
repeat-y:縦方向にのみ繰り返して表示
no-repeat:繰り返さずに、１点だけ表示
背景画像のサイズの指定
background-size:★
★:% キーワード 実数値+単位
contain 幅と高さの比率を保持したまま、画像全体が表示領域に収まる最大サイズ
cover 幅と高さの比率を保持したまま、その画像一つだけで表示領域を覆える最小サイズ
auto 画像本来の大きさで表示する
背景画像の固定
background-attachment:★
★：scroll, fixed
画像表示位置を指定
background-position:★
★：実数値+単位 ％ left center right top bottom
ライン(線)の導入
マージンの個別指定
margin-top:★ 上側
margin-right:★ 右側
margin-bottom:★ 下側
margin-left:★ 左側
margin:★ 全部
★：％
枠線の種類の設定
border-top-style:★ 上側
border-right-style:★ 右側
border-bottom-style;★ 下側
border-left-style：★ 左側
border-style:★ 全部
枠線の種類
none: 枠線を表示しない
hidden: 枠線を表示しない
dotted: 点線
dashed: 破線
solid: 実践
double: 二重線
groove: 線がへこんだように見える枠線
ridge: 線が浮き上がったように見える枠線
inset: 線より内側がへこんだように見える枠線
outset: 線より内側が浮き上がったように見える枠線
枠線の幅の個別の設定
border-top-width:★ 上側
border-right-width:★ 右側
border-bottom-width:★ 下側
border-left-width:★ 左側
border-width:★ 全部
★：サイズを表す数値+単位 キーワード
thin: 細い線
medium: 中くらいの線
thick: 太い線
枠線の色の個別設定
border-top-color:★ 上側
border-right-color:★ 右側
border-bottom-color:★ 下側
border-left-color:★ 左側
border-color:★ 全部
★：RGB値、キーワード、transparent(透明)
内容領域の幅と高さの指定
width:★ 幅
height:★ 高さ
角を丸くする
border-top-left-radius:★ 左上
border-top-right-radius:★ 右上
border-bottom-right-radius:★ 右下
border-bottom-left-radius:★ 左下
border-radius:★ 全部
★：実数値+単位 ％
ボックスに影をつける
box-shadow:★☆▲〇
★：none
☆：色
▲：実数値+単位
〇：inset
線形グラデーションの設定 <body>
★:linear-gradient(☆,▲,…,〇)
★：画像を扱えるプロパティ
☆：方向（角度、toキーワード）
▲：開始点のカラーストップ（色 位置）
〇：終了点のカラーストップ（色 位置）
テキストに影をつける
text-shadow:★
★：none 色 実数値+単位