その他のCSS
最終更新日時 :
1人が閲覧中
その他のCSS
状態
| a | ブロック（改行あり）にする | a{display:block;} |
| p | ブロック（改行なし）にする | p{display:inline-block;} |
| p | インライン（改行なし）にする | p{display:inline;} |
imgやaは最初はインライン 他はほとんどがブロック
インラインでは余白のmarginとpaddingが使えない
フレックス
| divの | 子要素を横に並べる (両端) | div{display:flex; justify-content: space-between; align-items: center;} |
| divの | 子要素を横に並べる (均等) | div{display:flex; justify-content: space-around; align-items: center;} |
ポジション
| 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-with:700px){□□□□□□□} |
□□□□□□□にはp{clolor:red;}などCSSを入れる。
パソコンサイズとスマホサイズではレイアウトが変わる。画面が「700pxより小さいとき」を後の方に書くことで、スマホサイズの時に設定を上書きしスマホサイズのレイアウトにできる。
コメント (その他のCSS)
この記事を作った人
編集者紹介
未登録
