HTML・CSS よく使うスタイル設定

Last updated at 2025-07-13Posted at 2025-06-10

要素の中央揃え

場合分けをして、きちんと使用するようにしましょう。
中央揃えにしたい要素に注目した場合、

ブロック要素だったら、幅を設定したうえでmargin:0を使用する。
テキストや、画像などのインラインボックス要素だったらそれを囲っているブロック要素にtext-algin:centerをつける。

`margin:0`

ブロック要素のみ有効
ブロック要素にさらに幅が設定されて、横方向に余白ができた時に左右のautoキーワードを有効にすることによって要素自体が中央揃えになる

margin: 0 auto;

例を見ていきましょう。

1:<section>はブロックレベル要素なので、デフォルトでは親（<body>など）の幅いっぱいに広がろうとします。
2:width: 400px;によって、<section>の幅が強制的に400pxになります。これにより、親要素の幅から400pxを引いた分の「余り」のスペースが生まれます。
3:margin: 0 auto;によって、その「余り」のスペースが <section>の左右のmarginに均等に分配されます。

<section>
        <img src="work-1.png" alt="" width="400" height="240" />
        <h3>すごいゲーム1</h3>
        <p>すごいゲームです。</p>
</section>

section {
  width: 400px;
  margin: 0 auto;
}

`text-align:center`

ブロック要素のみ有効
ブロック要素の中にあるテキストや、画像などのインラインボックスが中央揃えになる

下記のポイントを最低限おさえましょう。

margin: 0 auto も text-align: center もブロックボックスにつける
margin: 0 auto はそのブロックボックス自体を中央揃えにする
text-align: center はそのブロックボックスのなかにあるテキストや画像を中央揃えにする

余白の付け方

余白のサイズですが、Web デザインでは 16px の倍数が良く使われる

色味設定

`hsl()`

色を「色相（Hue）・彩度（Saturation）・明度（Lightness）」で指定する方法です。

hsl(色相, 彩度%, 明度%)

色相：0〜360度の円。色の種類を決める（赤〜緑〜青など）
彩度：色の鮮やかさ（0%はグレー、100%でハッキリ）
明度：明るさ（0%は黒、100%は白）

画像の縦横比を保つ`width`に応じた`height`の設定

  width: 100%;
  height: auto;

height: auto; は「画像の縦横比を保ちながら、widthの値に合わせて高さを自動で計算する」というブラウザへの指示です。

フレックスアイテムとの組み合わせ

このwidth/heightの設定は上記の画像のように、画像と説明を等幅に配置したい時、よくフレックスアイテムと組み合わせて使用します。

<section class="product">
<!-- フレックスアイテム1 -->
  <div>
    <h2>すごい家具</h2>
    <p>
      すごい家具です。
    </p>
  </div>
<!-- フレックスアイテム2 -->
  <div>
    <img src="product-1.png" width="400" height="400" alt="すごい家具" />
  </div>
</section>

フレックスコンテナのなかに、2つのdiv要素があるとします。
等幅に配置したい時、下記のようにCSS設定をします。

.product div {
  flex: 1; 
}

.product img {
  width: 100%;
  height: auto; 
}

{ flex: 1; }でdivそれぞれ等幅に配置します。
上記の設定により、画像が入っている2つ目のdivの幅が、親の利用可能なスペースの半分に設定されました。
- 次に、このdivの中にある<img>要素に width: 100%;が適用されます。
  これは「親要素（この場合は画像を囲むdiv）の幅いっぱいに広がりなさい」という意味です。
  つまり、画像は、flex: 1;で幅が決まったそのdivの幅にぴったりと合わせられます。
- height: auto;があるため、画像は元の縦横比を保ったまま、divの幅に合わせて高さが自動調整されます。

コンテンツの最大値設定

画面が広すぎても、コンテンツが横に無限に伸びて読みにくくなるのを防ぐため、最大値を設定することが一般的です。
要素の親要素としてラップされることが一般的です。

max-width: 800px;
margin: 0 auto;
width: calc(100% - 32px);
box-sizing: border-box;

`max-width: 800px;`

「この要素の幅は、どんなに広くても800pxまでにする」という指示です。
一般的にmax-widthで指定するのはpx指定が多いです。
- もし max-width: 80%; のような指定をした場合、その要素の最終的な幅は、親要素の幅によって常に変動します。これは、多くの場合「最大値は特定の絶対的なピクセル値にしたい」という意図とズレる可能性があります。

`width: calc(100% - 32px);`

「この要素の幅は、親要素（通常は画面全体）の幅から32ピクセルを引いた値にする」という指示です。
左右の余白をあけるために、使用されることが多いです。
下記のようにpaddingでも設定されることがあります。

padding: 0 20px;

`margin: 0 auto;`

要素を水平方向の中央に配置するという指示です。

`box-sizing: border-box;`

「要素のwidthとheightの計算に、paddingとborderも含める」という指示です。

リセットCSS

body

margin: 8px;が初期値として設定されている。
そのため、margin: 0; を設定。

h1,h2,h3,pなど

上下にmargin: 8pxが設定されている。
そのため、margin: 0; を設定。

img

verticla-algin: bottom;
width: 100%;     
max-width: 100%;  
height: auto; 
/* width・max-widthは例外あり。後述で解説。 */

上記を設定しておきましょう。

1.`verticla-algin: bottom;`

画像を設定するときに起こりうる問題として、インライン要素ではテキストのベースラインに沿って配置されるためしっぽとして下に余白が設定されています。
解決するために、verticla-algin: bottom;というような、baselineを下に合わせ余白をなくす設定をします。

2.`width`の設定

下記のどちらかを設定しておきましょう。

width: 100%;+ max-width: 100%;
max-width: 任意の数字;

`width: 100%;`+ `max-width: 100%;`

width: 100%;と設定しておくことで、親コンテンツから画像がはみ出すのを防ぐことができます。
そして、ビューポート以上に画像幅が伸縮することはありません。
max-width: 100%;と設定しておくことで、画像が元のサイズより大きくならないように伸縮してくれます。

`max-width: 任意の数字;`

他のグループ画像よりやや小さく見せたい、または特定のデザイン上のサイズ制限があるときに設定しておきましょう。

インライン要素をテキスト系のブロック要素で囲った時に発生する余白を削除する

インライン要素をブロック要素で囲んでいるときなどに、画像の上下などに余白ができることがあります。
これは、テキストが設定されていなくても、ブロック要素はテキストのフォントサイズ分の余白を空けようとしてしまうからです。
そのような時は、font-size: 0;と設定し、テキストの行の高さをなくすことで解決できます。

h1でlogo画像を表示させる時

<h1 class="logo">
    <a href="index.html">
        <img src="img/logo.svg" alt="logo" />
    </a>
</h1>

header .logo {
  font-size: 0;
}

リスト表示をリセット

リストには、下記のデフォルトスタイルがあります。

ulの上下にmargin
左側に padding
li 要素の先頭に、箇条書きリストに見えるように黒丸が付く

上記をリセットするCSSは、下記の設定です。

list-styleは継承できるので、すべてulに設定することが多いです。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

見出し（`h1`など）太字解除

font-weight: normal;

リンク関連

リンク下線削除

text-decoration: none;

リンク文字色変更

color: 任意のカラー;

または

color: inherit;

ブラウザは、<a>タグに対して「color: blue;」のようなスタイルを適用しています。
color: inherit;を指定することで、このブラウザのデフォルトスタイルよりも優先され、リンクが親要素の文字色を継承するようになります。

必ず設定しておくCSS

/* common */

body {
  font-family: 'YuGothic', 'Yu Gothic', sans-serif;
  margin: 0;
  background-color: #fdf8f8;
  color: #333;
  font-size: 100%;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

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

a {
  display: block;
}

a:hover {
  opacity: 0.7;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

imgの大きさを変更したい場合は、max-widthの指定を上書きするとよいです。

LP制作では必ず、
各要素にもwidthかmax-widthをつける癖をつけましょう。

内側の余白開け

画像のように、背景色を画面幅いっぱいに広げ、中にボックスを配置するデザインをしたい時があります。
そのような時は下記のコードを参照しましょう。

<section class="online-store">
      <div class="box">
        <h2 class="title">HOW TO CHOOSE</h2>
        <a class="link" href="index.html">ONLINE STORE</a>
      </div>
</section>

  .online-store {
    /* 背景画像は常に幅いっぱいに指定*/
    width: 100%;
    /* 高さはauto */
    height: auto;
    /* 内側に余白を見せるため、padding設定 */
    padding: 20px;
    /* paddingは通常widthに計算されないのではみ出してしまうが、paddingまで入れることで防ぐ */
    box-sizing: border-box;
  }

`clip-path`

要素の表示領域を任意の図形に切り抜くことができる機能です。
写真や画像を四角形だけでなく、円形や多角形、あるいはもっと複雑な形に切り抜いて表示したい場合に非常に便利です。

#main {
    background-color: #ffed58;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 
}

この例では、#main要素の背景（background-color: #ffed58;）が、指定された多角形の形で切り抜かれて表示されます。

(0 0): 左上
(100% 0): 右上
(100% 80%): 右下（高さの80%の位置）
(0 100%): 左下
この4点を結ぶことで、右下部分が斜めに切り上がったような下記の台形の形状が作成されます。

フレックスアイテムで要素同士の高さを揃えたい時

フレックスアイテムのデフォルトの高さの挙動は、親コンテナの交差軸の高さに合わせて引き伸ばされようとします。
ただし、上記のimgのようなアスペクト比を保持しようとする要素は、影響を受けずにその高さに制限されます。

他にも下記の場合、親要素いっぱいまで高さは広がらず、コンテンツの高さに合わせて自身の高さを決定します。

height などで明示的に高さが指定されている要素
align-itemsをデフォルト以外の値に設定した場合

左の画像と右のテキストの高さを揃えたいときは、imgにheight:100%を指定して、明示的に親いっぱいに高さを広げる必要があります

<div class="container">
    <div class="img">
        <img src="img/top/service.png" alt="" />
    </div>
    <div class="text">
        <p class="en-title">SERVISE</p>
        <p class="ja-title">サービス</p>
        <p class="description">
        将来プログラミングを仕事にしたい方向けの実践的なプログラム講座です。
        </p>
        <a href="service.html" class="btn">詳細を見る ></a>
    </div>
</div>

.container {
 /*フレックスアイテムを設定*/
  display: flex;
  padding: 120px 10px;
}

 /*2つの要素幅を均等に設定*/
#service .container div {
  flex: 1;
}

 /*親いっぱいに高さが広がるように指定*/
#service .container .img img {
  height: 100%;
}

マーカー

下記で、「文字の下半分にだけ黄色マーカーが引かれたような背景」になります。

<p>
    HOGEHOGE
    <span class="highlight">マーカー</span>
    FUGAFUGA
</p>

background: linear-gradient(transparent 50%, #fff390 50%);
font-weight: 700;

linear-gradient(): 線形グラデーションを作成する関数です。
transparent 50%: グラデーションの開始から50%までは完全に透明です。
#fff390 50%: 50%の位置から、指定された色（#fff390）に変わります。
font-weight: 700;: マーカーが引かれた部分の文字を太字に設定しています

`hover`したときふわっと下線を表示させる

#g-nav a::after {
    position: absolute;
    bottom: max(calc(-10vw / 3.9), -10px);
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 30%;
    height: min(calc(2vw / 3.9), 2px);
    background: var(--yellow);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
}

#g-nav a:hover::after {
    bottom: max(calc(-6vw / 3.9), -6px);
    opacity: 1;
    visibility: visible;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

HTML・CSS よく使うスタイル設定

要素の中央揃え

margin:0

text-align:center