Private リセットCSSテンプレ / CSS圧縮Link

CSS

目次一覧

 状態:結論(後で見返す用)  閲覧数:581  投稿日:2017-05-01  更新日:2020-02-14
リセットCSS / CSS圧縮

リセットCSS / CSS圧縮

 閲覧数:77 投稿日:2020-02-14 更新日:2020-02-14 

リセット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 を軽量化(圧縮)するぞう君
・//(間違ったコメントアウト)があってもおかしくならない
・そのまま出力する


CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ

レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定



週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新