はじめに

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ファイルダウンロードするか、CDN使うか
公式CDN
GoogleのCDN使うほうが良い（らしい）
ここから

jQuery使わない

DOM操作

クラス付与や削除は良く使うので下記にコード

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
- 上下左右中央寄せ