【初心者向け】CSSリセットでdisplayプロパティを操る！サンプルコード付き

2024-06-26

CSSリセットにおけるdisplayプロパティのデフォルト値へのリセット

CSSリセットは、ブラウザごとに異なるデフォルトスタイルを統一し、デザインの一貫性を保つために役立ちます。その中でも、displayプロパティは、要素の表示方法を決定する重要なプロパティです。適切なリセットにより、意図したデザインを確実に表現することができます。

displayプロパティのデフォルト値

各要素には、ブラウザごとに定められたデフォルトのdisplay値が存在します。代表的な例は以下の通りです。

p要素: block
img要素: inline
li要素: list-item

これらのデフォルト値は、要素の本来の役割や表示方法を反映しています。しかし、デザインによっては意図しない挙動を引き起こす場合もあります。

リセット方法

displayプロパティをデフォルト値にリセットするには、以下のCSS記述を使用します。

* {
  display: none;
}

この記述は、すべての要素のdisplayプロパティをnoneに設定します。noneは、要素を非表示にする値です。

しかし、全ての要素を非表示にしてしまうのは望ましくありません。そこで、以下の記述のように、要素ごとに適切なデフォルト値を設定していきます。

* {
  display: none;
}

p, h1, img, ul, li {
  display: revert;
}

この記述では、まずすべての要素をnoneに設定し、その後、対象となる要素のdisplayプロパティをrevertに設定しています。revertは、各要素の本来のデフォルト値に戻す値です。

注意点

一部のブラウザでは、revertがサポートされていない場合があります。その場合は、個別にデフォルト値を設定する必要があります。
displayプロパティをリセットすると、要素の子要素にも影響を与える可能性があります。必要に応じて、子要素のdisplayプロパティも調整する必要があります。

CSSリセットは、デザインの一貫性を保つために重要です。displayプロパティのリセット方法を理解することで、より意図したデザインを実現することができます。

/* ブラウザデフォルトのリセット */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* 要素ごとのデフォルト値 */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

address, dl, dt, dd, figcaption, figure, form, h1, h2, h3, h4, h5, h6, hr, li, ol, p, pre, ul {
  display: block;
  list-style: none;
}

blockquote, q {
  display: block;
}

img, video {
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* テーブルレイアウト */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 0.25em;
  vertical-align: top;
  text-align: left;
}

/* フォーム要素 */
input, textarea, select, button {
  margin: 0;
  font-size: 100%;
  line-height: 1.15;
  padding: 0.5em 0.75em;
  border: 1px solid #ccc;
  border-radius: 0.25em;
}

/* ボタン */
button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

/* ボタン（ホバー時） */
button:hover {
  background-color: #45a049;
}