LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@latte00

CSS スタイリング

Last updated at Posted at 2025-09-21

名称

/* h1は　セレクター、　　　 {}の中は　宣言ブロック */
h1 {
 font-weight: bold;  /* この行は宣言 */
 /* プロパティ　 値  */
}

CSSを書く場所

優先順位は1が一番強く３が一番弱い（上に行くほど優先される）

1. インラインスタイル（inline style)

タグの中に直接CSSを記述。

<p style="background-color: pink;">xxxx</p>

2.内部スタイルシート（style タグ内に記述）

  <head>
    <style>
        p{
            background-color: blue;
        }
    </style>
  </head>

3.外部スタイルシート（CSSファイルを別に用意）

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>

style.css

@charset "utf-8";
/* このファイルの文字コードを指定する宣言 */
/* シングルクオーテーションではなくダブルクオーテーションにする必要がある */

p {
  background-color: blue;
}

CSS

上下左右の指定
padding

         /* 全方向 */
  padding: 16px;
         /* 上下 左右 */
  padding: 16px 8px;
         /* 上  左右 下 */
  padding: 16px 8px 4px;
         /* 上 右 下 左 */
  padding: 16px 8px 4px 2px;

marginでautoの指定
margin に auto を指定すると、ブラウザは「利用可能な余白を自動的に割り当てる」という動きをします。

特に横方向（left / right）で auto を使うと、要素の幅を固定したときに「余ったスペースを自動で分配する」という計算がされます。

  /* 左にmargin */
  margin: 0 0 0 16px;
  /* 左に利用可能な余白を自動割あて　→ 右寄せ */
  margin: 0 0 0 auto;
  /* 右に利用可能な余白を自動割あて　→ 左寄せ */
  margin: 0 auto 0 0;
  /* 左右均等にmargin割り当て → 中央寄せ */
  margin: 0 auto;

最大値・最小値

  /* 最大の大きさ （これより大きくならない）*/
  max-width: 400px;
  /* 最小の大きさ （これより小さくならない）*/
  min-width: 400px;

width: fit-content
対象: width, height, grid-template-columns, flex-basis など
意味:
要素の中身のサイズに合わせてちょうどよくフィットさせる指定です。
ただし、max-content や min-content のようなコンテンツサイズ計算ルールをベースにしており、
「必要なだけ広がるけど、指定した最大値を超えない」といった動作をします。

div {
 width: fit-content;
 max-width: 300px;
}

calc()
最大幅は800pxで画面幅狭い時には左右に16px余白が入る

section {
  background: green;
  max-width: 800px;
  margin: 0 auto;
  width: calc(100% - 16px);
}

border

  /* 一つずつ指定 */
  border-width: 8px;
  border-style: solid;
  border-color: blue;

  border-top-width: 8px;
  border-top-style: dashed;
  border-top-color: blue;

  border-bottom-width: 8px;
  border-bottom-style: double;
  border-bottom-color: blue;

    /* 一括指定プロパティ  必ず3つ指定しなければならない */
  border: 8px solid blue;
  border-top: 8px double orangered;
  border-bottom: 8px dashed orangered;

box-sizing
box-sizing: border-box; と指定することで、
borderとpaddingを含めてboxのサイズに収めてくれる。
width や height に padding と border を含めて計算 する。
　つまり、指定した幅からはみ出さずに収まる。

  background-color: pink;
  margin: 16px 0 0;
  width: 400px;
  height: 80px;
  border: 8px solid blue;
  padding: 8px;
  box-sizing: border-box; /* ここ */

ちなみに初期値はこれ
デフォルト（content-box）

box-sizing: content-box;  /* 初期値 */

width や height で指定するサイズは「内容（content）のみ」を対象とする。
padding や border を追加すると、要素の実サイズは指定した値より大きくなる。

vertical-align
インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定。
「インライン要素やインラインブロック要素同士を、行の中で縦方向に揃える」ときに使う。
baselineの下にスペースがあるので、 vertical-align: baseline; では下にスペースができる。
下のスペースをなくし、一番下に配置したいときは vertical-align: bottom;　を使う。
vertical-align: baseline;
vertival-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: sub;
vertical-align: text-top;
例１）

img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  vertical-align: bottom;
}

例２）

<p>
  <img src="icon.png" alt="アイコン" style="vertical-align: middle;">
  テキストとアイコンを縦の中央に揃える
</p>

上の例のように、画像と文字のベースラインのズレを調整するときに役立ちます。
この場合は vertical-align: middle; がよく使われます。

例えば、ブロック要素の中でinline要素を垂直方向で中央揃えにしたい時は下記の方法がある

  • display-inline-block; line-heightを要素と同じ高さにする
  • display: flex; align-items: center; を使う
a {
  display: flex;
  align-items: center;      /* ← 縦方向（上下）に中央揃え */
  justify-content: center;  /* ← 横方向（左右）に中央揃え */
}

position 相対位置指定
何も指定していない場合
何も指定しないと position: static となる。
image.png

<body>
  <div class="container">
    <div class="box-1">Item1</div>
    <div class="box-2">Item2</div>
    <div class="box-3">Item3</div>
    <div class="box-3">Item3</div>
    <div class="box-3">Item3</div>
    <div class="box-3">Item3</div>
    <div class="box-3">Item3</div>

@charset "utf-8";

body {
  margin: 0;
}
.container {
  width: 400px;
  margin: 32px auto 0;
  border: 8px solid #133bc9;
}
.box-1 {
  width: 100px;
  height: 100px;
  background-color: #e4007f;
}
.box-2 {
  width: 100px;
  height: 50px;
  background-color: #e9eb7b;
}
.box-3 {
  width: 100px;
  height: 100px;
  background-color: rgb(0, 145, 255);
}

position: relative
position: staticの位置を基準に指定している
position: relative の場合、後に続く要素に何も影響を与えない。
image.png

.box-2 {
  width: 100px;
  height: 50px;
  background-color: #e9eb7b;
  position: relative;  /* 追加 */
  top: 16px;
  left: 16px;
}

背景画像

デフォルトでは画像のサイズのまま左から敷き詰められる

header {
  height: 300px;
  background-image: url(logo.png);
}

画像サイズを指定するとそのサイズで敷き詰める

header {
  height: 300px;
  background-image: url(logo.png);
  background-size: 50px 50px; 
}

画像がはみ出さない最大の大きさで敷き詰める

header {
  height: 300px;
  background-image: url(logo.png);
  background-size: contain;
}

画像の縦横比を保ったまま要素内で可能な限り大きくする

header {
  height: 300px;
  background-image: url(logo.png);
  background-size: cover; 
  background-position: center; /* centerは２つ目の値が省略の場合、centerとみなされる */
  background-color: green;   
}

background-position: X軸 Y軸

  background-size: cover center;
  background-position: center;

background 一括指定

header {
  height: 300px;
  background: url(logo.png) center/cover green;
}

inherit

🔸 inherit は「親要素の値に合わせたい」ときに使うもので、
「もともと継承される／されない」は関係なく使える

a {
  color: inherit;   /* 親要素から文字色（colorプロパティ）を継承する。*/
}

CSS変数

@charset "utf-8";

:root {
  /* --brand-color: pink; */
  --brand-color: green;
}

h1 {
  color: var(--brand-color);
  border-bottom: 1px solid var(--brand-color);
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?