LP よく使うスタイル設定

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

要素の中央揃え

中央揃えにしたい要素に注目した、

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

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

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

`margin:0 auto`

ブロック要素のみ有効
幅を設定する必要がある

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それぞれ等幅に配置します。

`max-width`

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

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

`max-width: 800px;`

「この要素の幅は、どんなに広くても800pxまでにする」という指示です。

`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・max-widthは例外あり。後述で解説。 */
width: 100%;     
max-width: 100%;  
height: auto;

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

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: 任意の数字;`

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

インライン要素に発生する余白を削除する

h2などのタグで囲っている場合はfont-size: 0;
汎用的なのはdisplay:block

リスト表示をリセット

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

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;

必ず設定しておくリセットCSS

body {
  margin: 0;
  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;
}

LP制作では必ず、
各要素にwidthかmax-widthをつける癖をつけましょう。
imgの大きさを変更したい場合は、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;
}

要素に下線を設定する

border-bottom: 2px dotted var(--yellow);
width: fit-content;

border-bottom: 下線設定
width: fit-content;: ブロック要素だと、親要素いっぱいに下線が広がってしまうが、指定することで、要素の幅を、そのコンテンツが占める幅に合わせるようにブラウザに指示できる

LP作成チェックリスト

見出しは順番に使用されているか
imgタグは、別の要素で囲まれているか
ロゴはh1タグで囲まれているか
リンク箇所はヘッダーロゴ以外ホバーアクションがついているか
- 通常はホバーで色味を明るく変更する

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

LP よく使うスタイル設定

要素の中央揃え

margin:0 auto

text-align:center