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

CSS

目次一覧

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

リセットCSS / CSS圧縮

 閲覧数:419 投稿日: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を折り返し表示するよう設定



週間人気ページランキング / 5-23 → 5-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 10
2 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 9
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
3 RGB ⇔ Lab | 色変換(色) 8
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
5 16進数カラーコード / 2進数 4
5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
6 Design 0 3
6 効果を打ち消すスタイルシート | CSS 3
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
6 HSV / HSB 3
6 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
6 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 3
6 色モデルイメージ図 | 色変換(色) 3
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
7 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2025/5/30 1:01 更新