目次一覧
状態:結論(後で見返す用)
閲覧数:1,888
投稿日:2017-05-01
更新日:2020-02-14
リセットCSS ／ CSS圧縮
リセットCSS ／ CSS圧縮
リセットCSS
従来
<link href="//fonts.googleapis.com/earlyaccess/notosansjp.css" rel="stylesheet">
▼common.css
/*---------- リセットCSS ----------*/
a {
text-decoration: none
}
html,body,ul{
margin: 0;
padding: 0;
}
ul {
list-style: none
}
fieldset {
border: 0;
}
input[type="text"]{
box-sizing: border-box;
width: 100%;
padding: 0.5rem;
}
textarea {
box-sizing: border-box;
width: 100%;
}
/* フォント書体 */
body {
font-family:Verdana, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
h1,h2,h3,h4,h5.h6 {
font-family: 'Noto Sans JP', sans-serif;
}
/* フォントサイズ */
h1{
font-size: 1.5rem;
}
h2{
font-size: 1.4rem;
}
h3{
font-size: 1.3rem;
}
h4{
font-size: 1.2rem;
}
h5{
font-size: 1.1rem;
}
h6{
font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal; /* font-family適用 */
line-height: 1.1; /* 見出し2行 */
}
body{
word-wrap: break-word; /* 単語の途中でも改行 */
}
/*---------- リセットCSS ----------*/
2020/2/14以降
下記追加
input[type="url"] {
box-sizing: border-box;
width: 100%;
padding: .5rem;
}・font-family設定
・font-size
・レスポンシブWebサイトにおけるブレイクポイント
・横スクロール発生する原因
以前は設定していたが、現在は削除
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}button,fieldset,select,textarea,input{
margin: 0;
padding: 0;
}CSS圧縮
Refresh-SF - Online JavaScript and CSS Compressor
・//(間違ったコメントアウト)があるとおかしくなる
CSS と JavaScript を軽量化（圧縮）するぞう君
・//(間違ったコメントアウト)があってもおかしくならない
・そのまま出力する