プログラミング学習

リセットCSSは不要?必要?使わない!?(destyle.cssの使い方)

プログラミング学習

CSSの細かいtipsです。覚書をかねています。

体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

リセットCSSは不要?必要?使わない!?

リセットCSSはやっぱ必要ですかね。メジャーなWeb技術サイトをみると必ず記載がありますし、書籍やUdemyをみると、必ずでてきます。

今まで買った本にも記載がありました。詳細はこちらです。

CSS設計のおすすめ本・教材、Udemyの動画、デザインレシピ
ebookbrain.net

リセットCSS、ノーマライズCSS、サニタイズCSS

問題は何を使うかですね。リセットCSSは大別すると3種類あるようです。

  • リセットCSSはすべてリセットします。とにかく1から自分で決めたい人向け(destyle.css)
  • ノーマライズCSSはブラウザ間の差異を調整します。個人的にはリストタグが凹まないのが好みなので、ノーマライズCSSを使うならressが好きですかね。
  • サニタイズはノーマライズを拡張版という位置づけであり、より実用しやすいように設定されているもの。個人的には利用したいとは思いません。

とりえあず、ありものを使っていらないものを省いていくような流れがよさそうです。

リセットCSSを使わないと起こる問題点

先日、ulのリストと自分が作ったボックスの間隔があわないことがありました。ulの初期値があるようです。そういえばリセットCSSおいていなかったなあっと。。

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

自分が作成した新規クラスに同じような初期値を設定するか、CSSをリセットするかになりますかね。

リセット.cssにもいろいろあるらしいです。

参考になりました。ありがとうございます。

スポンサーリンク

destyle.cssのコピペ、使い方、ライセンス

個人的にもdestyle.cssがよさそうな気がしました。

destyle.cssのライセンス

ライセンスはMIT Licenseです。

destyle.cssのコピペ、使い方、カスタマイズ

githubはこちらです。minバージョンもあります。

destyle.css/destyle.css at master · nicolas-cusan/destyle.css
github.com

npmはこちらです。

destyle.css
www.npmjs.com

使わなそうなタグは省きました。省いたコードです。非常にざっくりです。

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
/**
 * Reset to invisible
 */

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}
スポンサーリンク

CSSの:has()で親要素から子要素のclassを取得(擬似クラスの使い方)

.parent:has(> .child)::before {
  background-color: #e5a228;
}

子要素childがあるparentに背景色を指定します。

疑似要素に使えます。+や~も使えます。

notも使えます。

li:not(:has(p, span)) {
  font-weight: 900;
}

Safariなどに続き、2022年9月にChromeも対応してもう使ってもいいんじゃないかなと。とても便利です。

hasでも実装できないhtml上に親子関係がない配置の場合はJavaScriptで呼び出した方がよい気がします。

スポンサーリンク

:first-childと:first-of-typeの違い

この場合、文字は赤くなりません。

<style>
　.container p:first-child{
　　color: red;
　}
</style>
<body>
　<div class="main-container">
　　<h1>H1です。</h1>
　　<p>赤くなりません</p>
  </div>
</body>

first-childはp以外の同階層の要素をみてしまう。この場合、h1が1番目なので効かないです。

解決方法は、:first-of-typeを使うと文字は赤くなります。

:first-childも:first-of-typeも、notは使えます。

h2:not(:first-of-type){
}
スポンサーリンク

スタイルシート(css)のコメントアウトでダブルスラッシュ(//)は使えない

今更なのですが、、スタイルシート(css)のコメントアウトでダブルスラッシュは使えません。

ずっとcssを使っていないと、他の言語のくせでたまに使えるんじゃないか、と勘違いしてしまう…^^;

希望としてはサポートしてほしいのですが…。。

リファレンスサイトなど

w3schoolsやstackoverflowで確認するのが早いでしょう。

CSS Commentsを参考にするとよいでしょう。
CSS Syntax

syntax – Is it bad practice to comment out single lines of css with // – Stack Overflow

web系のコメントアウトはなんかごちゃごちゃしている気がして、あまり好きじゃないですね^^;

//をうっかり使った場合、次のcssの指定が効いていません。

まあ素人のぼやきということで…。

コメント

タイトルとURLをコピーしました