その他のCSS
状態
| a | ブロック（改行あり）にする | a{display:block;} |
| p | ブロック（改行なし）にする | p{display:inline-block;} |
| p | インライン（改行なし）にする | p{display:inline;} |
imgやaは最初はインライン 他はほとんどがブロック
インラインでは余白のmarginとpaddingが使えない
はみ出し
| div | はみ出しを非表示にする | div{overflow:hidden;} |
| div | はみ出しをスクロールにする | div{overflow:scroll;} |
ポジション
| pを | 画面に対して固定配置 （サイズ判定なし） | p{position:fixed; top:0; left :0;} |
| pを | 今の位置に対して固定配置 (移動前の位置にサイズ判定が残る) | p{position:relative; top:300px;} |
| pを | relativeのついた親に対して固定配置 (サイズ判定なし) | p{position:absolute; top:300px;} |
動き
| pにカーソルを乗せたとき | 移動「-20px,0」 | p:hover{transform:translate(-20px;0);} |
| pにカーソルを乗せたとき | 拡大「1.05倍」 | p:hover{transform:scale(1.05);} |
| pにカーソルを乗せたとき | 傾く「20度,0度」 | p:hover{transform:skew(20deg,0);} |
| pにカーソルを乗せたとき | 回転「90度,0度」 中心「左上」 | p:hover{transform:rotate(90deg,0);} transform-origin:top left; |
| pに(カーソルを乗せたとき) | 移動時間「0.5秒」 | p{transition:transform 0.5s ease-in-out}; |
画面サイズが小さいとき
| 画面が700pxより小さいとき | @media(max-width:700px){□□□□□□□} |
□□□□□□□にはp{clolor:red;}などCSSを入れる。
&size(12){パソコンサイズとスマホサイズではレイアウトが変わる。画面が「700pxより小さいとき」を後の方に書くことで、スマホサイズの時に設定を上書きしスマホサイズのレイアウトにできる。}
最重要
| .全体 {display: block !important;} |
通常、直接styleに書きこんだ内容ががclassの内容より優先される。
!importantをつけることでstyleより優先したclassの内容にできる。
アニメーション
| 2秒ごとに繰り返す | animation: 動きプログラム 2s infinite; |
| @keyframes 動きプログラム { | |
| 最初の位置 | 0% { top: -100%; left : -50%; } |
| 最後の位置 | 100% { top: 100%; left : 150%; } |
| } |
@keyframesを使ってアニメーションが作れる。
入れられるのは位置、色、透明度、拡大率、回転などいろいろ。
例
0% { background-color: #3498db; color: white; }
100% { background-color: #3498db; color: red; }
0% { opacity: 0; }
100% { opacity: 1; }
0% { transform: scale(1); }
100% { transform: scale(2); }
0% { transform: rotate(0deg) translateX(100px); }
100% { transform: rotate(90deg) translateX(200px); }
animation: キーフレーム名 2s ease-in-out 1s infinite alternate;
ease-in-out 最初と最後を遅くし滑らかにする
1s １秒間動かずに待機する
infinite 繰り返す
alternate 通常は0→１００%だが、0→１００%→０％にする。