はじめに
Webアプリケーションのフロントデザイン時に毎回調べている内容をまとめた。
随時更新していく。
CSS初期化
normalize.cssなどもあるが、自分で指定したほうが確認しやすい
/* 初期化 */
body, header, main, footer, section, div, nav, p, a, h1, h2, h3, h4, ul, ol, li, form, input, span{
padding: 0;
margin: 0;
border: none;
}
body {
font-size: 62.5%;
}
a, a:visited, a:hover{
text-decoration: none;
color: inherit;
font-size: inherit;
font-family: inherit;
}
main{
display: block;
}
ul, ol{
list-style: none;
}
レスポンシブ対応
- viewport設定
<head>タグ内に記述
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- ブレークポイント
- PC：1024px
- タブレット：896px
- スマホ：480px
@media screen and (max-width: 481px) {}
- フォントサイズ
ベースサイズを10pxに。
1em = 10px
body{
font-size: 62.5%;
}
jQuery使う
jQuery使わない
クラス付与や削除は良く使うので下記にコード
document.getElementById("myid").classList.add("new-class");
document.getElementById("myid").classList.remove("new-class");
document.getElementById("myid").classList.togle("new-class");
- CSSアニメーション
CSSアニメーションでjQueryみたいなことだいぶできる
ハンバーガーメニュー
- スマホページによく使われるメニュー
Flexbox
- 左寄せに
float: left;を使わないほうがデザインしやすいので、display: flex-box;使うほうが良い
display: flex;
/*子要素の横幅が勝手に縮小されないようにするため*/
flex-shrink: 0;
height: 100%の設定
- 画面の高さと要素高さを等しくしたい場合、
htmlとbodyもheight: 100%;にする。
html, body{
height: 100%;
}
/* 高さを画面の高さにしたい要素 */
.hoge{
height: 100%;
}
aタグ
- aタグの外（親要素）からフォント指定しても反映されない
<div>
<a href="html/huga.html">hogehoge</a>
</div>
このときCSSでdiv{color: red;}と指定しても、hogehogeという文字列は赤色にならない。
そこで、a{color: inherit}として親要素の文字色を継承するようにすれば解決。
（CSSの初期化の部分ですでに対応しているが、メモとして残したいので記載）
上下左右中央寄せ
Flexboxを使うのが手っ取り早い。ただし、対応していなブラウザに注意。
<div class="outer">
<div>
これを中央寄せしたい
</div>
</div>
.outer{
display: flex;
justify-content: center;
align-items: center;
}
参考サイト
-
https://www.seojuku.com/blog/responsive-mediaquery.html
- レスポンシブデザインのブレークポイント
-
https://www.okuni.me/entry/css-slide-animation-keyframes
- CSSアニメーション
-
https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
- ハンバーガーメニュー
-
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
- Flexbox
-
https://www.granfairs.com/blog/staff/centering-by-css
- 上下左右中央寄せ