Edited at

【CSS, JS】フロントデザインの備忘録


はじめに

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: #000000;
}
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


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;使うほうが良い


height: 100%の設定


  • 画面の高さと要素高さを等しくしたい場合、htmlbodyheight: 100%;にする。

html, body{

height: 100%;
}

/* 高さを画面の高さにしたい要素 */
.hoge{
height: 100%;
}


参考サイト