知らずに損してる？CSS記述のよくあるミス30選と対処法

問題点

要素１つ対し、同じ方向、同じ場所にmarginとpaddingを同時に指定すると、意図しない余白が重なり、デザインが崩れることがあります。

/*上に20pxの余白を開ける*/
h1 {
  margin-top: 10px;
  padding-top: 10px;
}

解決策

どちらか一方を使用して、余白を明確にしましょう

h1 {
  margin-top: 20px; /* または padding-top: 20px; */
}

問題点

text-alignでセンタリングすると、テキストは中央揃えになりますが、paddingが全方向（上・右・下・左）に適用されるため、左右にも余計な余白が生じます。

p {
  text-align: center;
  padding: 20px;
}

解決策

一見、問題なく見えますが、意図しない余白は、のちのちの難解な不思議コードを避けるために必要です。この場合、必要な方向だけにpaddingを指定することで、無駄な余白を防ぎます。

p {
  text-align: center;
  padding: 20px 0; /* 横方向に余白を出さない */
}

問題点

フォントサイズだけを指定すると、行間がブラウザのデフォルト設定に依存し、見た目が不均一になることがあります。

p {
  font-size: 16px;
}

解決策

line-heightを指定することで、行間を適切に調整し、テキストの可読性を向上させます。

p {
  font-size: 16px;
  line-height: 1.7;
}

問題点

カラーネーム（例: blueやred）を使うと、色の微調整が難しく、デザインの統一感が失われる可能性があります。

h1 {
  color: blue;
}

解決策

CSS変数を使ってカラーパレットを管理すると、一貫性を保ちながら簡単に変更できます。

:root {
  --primary-color: #007bff;
}

h1 {
  color: var(--primary-color);
}

CSS変数とは？下記のページで解説しています。

あわせて読みたい

02 レスポンシブホームページ基本講座 レスポンシブデザインをもっと効率的に レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直...

問題点

インラインCSSとは、HTMLにstyle属性を使い””（ダブルクォート）内に記述するCSSです。この場合、HTMLとCSSが混在し、再利用やメンテナンス性が低下します。

<h1 style="color: red; font-size: 24px;">見出し</h1>

解決策

外部CSSファイルでスタイルを管理すると、コードの再利用を行うのがベストです。

.title {
  color: red;
  font-size: 24px;
}

<h1 class="title">見出し</h1>

問題点

idはユニーク（唯一無二）であるべきですが、詳細度が高いため、他のスタイルが上書きしにくくなります。

#header {
  font-size: 24px;
  color: black;
}

解決策

classを使用することで、再利用性が高く、詳細度が抑えられます。

.header {
  font-size: 24px;
  color: black;
}

問題点

全要素にリセットを適用すると、不要な副作用が発生する場合があります。

* {
  margin: 0;
  padding: 0;
}

解決策

必要な要素ごとにリセットを適用することで、予期しない影響を避けられます。

body {
  margin: 0;
  padding: 0;
}

h1, p {
  margin: 0;
}

問題点

!importantを多用すると、スタイルの管理が複雑化し、意図しないスタイルが適用される場合があります。

.button {
  color: white !important;
}

解決策

!importantの使用を最小限に留めることで、スタイルの競合を防ぎます

.button {
  color: white; /* 必要な場合のみ使う */
}

!importantとは？スタイルの優先順位を強制的に上げる特殊な指定方法です。ただし、通常のスタイルルールを無視して適用されるため、複雑なCSSになる原因となります。必要な場合に限り使用することが推奨されます。

問題点

floatを適用すると、親要素が子要素を包み込まず、高さが崩れることがあります。

.box {
  float: left;
  width: 50%;
}

解決策

clearfixを適用することで、親要素の高さを正常に保てます。

.box::after {
  content: '';
  display: table;
  clear: both;
}

floatの解説はこちらを参照ください

あわせて読みたい

08  ホームページ中級講座 floatを使った周り込み CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照くだ...

問題点

子要素が親要素をはみ出した場合、予期しないデザイン崩れが発生することがあります。

.container {
  height: 200px;
}

解決策

overflowを適切に設定して、はみ出しを防ぎます。

.container {
  height: 200px;
  overflow: hidden;
}

問題点

デフォルトでは、widthにpaddingやborderが加算され、要素が予想以上に大きくなります。

div {
  width: 100px;
  padding: 10px;
  border: 2px solid black;
}
/*実質幅は、100px + 20px + 4px の124pxとなる*/

解決策

box-sizing: border-box;を使用すると、要素の幅にpaddingとborderが含まれるため、意図したサイズを保てます。

div {
  width: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

問題点

絶対数である固定ピクセルで指定すると、デバイス間でフォントサイズが適切にスケールされません。

body {
  font-size: 16px;
}

解決策

相対値を使用することで、デバイスやユーザー設定に適応できます。

body {
  font-size: 1rem;
}

問題点

固定幅を指定すると、スマートフォンなどの狭い画面で要素がはみ出してしまいます。

.container {
  width: 960px;
}

解決策

max-widthを使うことで、デバイスサイズに応じた柔軟なレイアウトが可能になります。

.container {
  max-width: 960px;
  width: 100%;
}

問題点

印刷で使われるptなどの単位はWebデザインでは推奨されていません。

.container {
  margin: 10pt;
}

解決策

pxや相対ユニット（emやrem）を使用しましょう。

.container {
  margin: 10px;
}

問題点

フォーム要素はブラウザのデフォルトスタイルに依存するため、見た目があまりよくなく、デザインが崩れる可能性があります。

input {
  padding: 0;
}

解決策

input には独自のスタイルを適用して、フォーム要素の見た目を統一します。

input[type=text] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

問題点

クリック範囲が狭いと、ユーザーエクスペリエンスが低下します。スマホ画面だとタップしにくい原因になります。

button {
  padding: 5px;
}

解決策

適切なpaddingを設定して、押しやすいボタンを作成します。

button {
  padding: 10px 20px;
}

問題点

グラデーションの方向が明示されていないため、期待したデザインにならない場合があります。

.background {
  background: linear-gradient(blue, red);
}

解決策

グラデーションの方向を指定します。

.background {
  background: linear-gradient(to right, blue, red);
}

問題点

やたらと、要素やclassを並べて指定をすると、詳細度プラスされ、詳細度が高すぎると、後でスタイルの変更が難しくなります。

body div.container > h1.title {
  color: #ff0000;
}

解決策

必要最小限のセレクタで管理しましょう。

.title {
  color: #ff0000;
}

問題点

ホバーなどで、ぱ！と変わるような、突然の動き、突然のスタイル変更は、ユーザーに不自然な印象を与えます。

.button:hover {
  background-color: blue;
}

解決策

トランジションを設定することで、スムーズなアニメーションが実現します。

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: blue;
}

問題点

指定したフォントが使用できない場合、この場合Arialを指定していますが、そのフォントを持っていないPCの場合、意図しないフォントが適用される可能性があります。

body {
  font-family: Arial;
}

解決策

フォールバックフォント（最後に指定するフォント）を指定することで、予期しないデザイン崩れを防ぎます。

body {
  font-family: Arial, sans-serif;
}

問題点

適切なz-indexの設定がされていないと、要素の重なり順が意図と異なる結果になることがあります。

/*modal が下*/
.modal {
  z-index: 10;
}
/*overlayが上に表示するべきもの*/
.overlay {
  z-index: 5;
}

解決策

層構造を考慮してz-indexを計画的に設定することで、意図した重なり順を実現します。

.overlay {
  z-index: 10;
}
.modal {
  z-index: 20;
}

問題点

レスポンシブサイトで画像設定の場合、固定幅を指定すると、デバイスのサイズに応じて画像が適切にスケールされません。

img {
  width: 500px;
}

解決策

max-widthとheightを使って、画像がコンテナに収まるように調整します。そのため横サイズはコンテナ幅で指定するように心がけましょう。

img {
  max-width: 100%;
  height: auto;
}

問題点

下記の設定では、flex: 2により該当要素が他の子要素の2倍の比率で幅を占めますが、いきなり２？というのは、意図が不明確で、全体のレイアウトが崩れる可能性があります。

.container {
  display: flex;
}
.item {
  flex: 2;
}

解決策

すべての子要素に同じ比率（例: flex: 1）を設定することで、均等な幅割り当てが可能になり、レイアウトが安定します。特定の要素だけ異なる比率を持たせる場合は、その理由を明確にしましょう。

.container {
  display: flex;
}
.item {
  flex: 1;
}

問題点

grid-template-rows: auto;は、行の高さが自動で決定される場合、指定する必要がありません。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

解決策

不要なgrid-template-rowsを削除することで、コードがシンプルになり、メンテナンス性が向上します。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

問題点

このコードではleftプロパティを変更しているため、リフローが発生し、パフォーマンスに影響します。

.element {
  animation: move 2s infinite;
}
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

解決策

transformプロパティを使用することで、リフローを回避できます。transformはブラウザがハードウェアアクセラレーションを利用するため、よりスムーズなアニメーションを実現します。

.element {
  animation: move 2s infinite;
}
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

問題点

固定幅でnowrapを指定すると、内容がはみ出す場合があります。特に、テキストが長い場合やコンテンツが予期せず広がる場合、意図しないデザイン崩れを引き起こします。

.container {
  width: 300px;
  white-space: nowrap;
}

解決策

下記のプロパティを組み合わせることで、コンテンツが指定された幅を超える場合に省略記号で表示し、デザイン崩れを防ぎます。white-spaceがテキストの改行を抑制し、text-overflowとoverflowで視覚的な調整を行います

.container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• white-space: nowrap;: テキストが改行されずに1行で表示されます。これにより、コンテンツがコンテナの幅を超える場合があります。
• text-overflow: ellipsis;: コンテンツがオーバーフローした場合、省略記号（…）を表示します。
• overflow: hidden;: コンテンツが幅を超えた部分を非表示にします。

問題点

同じ条件で複数のメディアクエリを記述すると、コードが冗長になります。

@media (max-width: 768px) {
  .container {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .container {
    color: blue;
  }
}

解決策

できるだけメディアクエリをまとめることで、コードを簡潔にし、メンテナンス性を向上させます。

@media (max-width: 768px) {
  .container {
    font-size: 14px;
    color: blue;
  }
}

問題点

buttonの指定内に非常に多くルールが入っています。長いCSSルールは、再利用性が低く、修正が難しくなります。

.button {
  background-color: blue;
  color: white;
  font-size: 16px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px;
}

解決策

common-buttonという共通のクラスを作成し、ボタン全体に適用されるスタイルをまとめます。個別のボタンスタイルは、別のクラス（例: .button, .secondary-button）を追加して適用することで、再利用性を高めつつ、コードを簡潔に保てます。

.common-button {
  font-size: 16px;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px;
}

.button {
  background-color: blue;
  color: white;
  border: 1px solid black;
}

.secondary-button {
  background-color: gray;
  color: black;
  border: 1px solid gray;
}

問題点

カラーコントラストが低いと、視覚的な問題があるユーザーには読みにくい場合があります。

.text {
  color: #888;
  background-color: #eee;
}

解決策

カラーコントラストをチェックツールで確認し、十分な視認性を確保します。

.text {
  color: #333;
  background-color: #fff;
}

問題点

数値が0の場合、単位指定は不要です。単位を省略することで、コードをより簡潔にできます

.container {
  margin: 10px 0px 10px 0px;
  padding: 0px;
}

解決策

単位が不要な部分を省略することで、CSSの可読性と効率が向上します。

.container {
  margin: 10px 0;
  padding: 0;
}