CSSスタイルシートとウェブレイアウト完全ガイド

CSSスタイルシート（カスケーディングスタイルシート）

CSSの適用方法には主に3つの形式があります。

インラインスタイル

<p style="color: red; font-size: 16px;">
  この要素にはインラインスタイルが適用されています
</p>

埋め込みスタイル

<style>
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>

外部スタイルシート

<link rel="stylesheet" type="text/css" href="styles.css">

rel属性は、現在のドキュメントとリンク先ドキュメント/リソースの関係を指定します。

優先順位：インライン > 埋め込み > 外部スタイルシート

CSSセレクタ

要素セレクタ

p {
  color: blue;
  font-size: 14px;
}

div {
  margin: 10px;
}

クラスセレクタ

.highlight {
  background-color: yellow;
}

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

IDセレクタ

#main-header {
  padding: 20px;
  background-color: #333;
}

#navigation {
  list-style: none;
}

擬似クラスセレクタ

/* 一組の兄弟要素の中の最初の要素を対象 */
selector:first-child

/* 一組の兄弟要素の中の最後の要素を対象 */
selector:last-child

/* 一組の兄弟要素の中のn番目の要素を対象 */
selector:nth-child(n)

/* 一組の兄弟要素を逆順に数えてn番目の要素を対象 */
selector:nth-last-child(n)

/* 同じタイプの兄弟要素の中の最初の要素を対象 */
selector:first-of-type

/* 同じタイプの兄弟要素の中の最後の要素を対象 */
selector:last-of-type

/* 同じタイプの兄弟要素の中のn番目の要素を対象 */
selector:nth-of-type(n)

/* 同じタイプの兄弟要素を逆順に数えてn番目の要素を対象 */
selector:nth-last-of-type(n)

否定擬似クラス

/* 指定されたセレクタに一致しない要素を選択 */
selector:not(selector)

グローバルスタイルの設定

body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  color: #333;
}

CSSポジショニングとレイアウト

positionプロパティには5つの値があります：

  • static
  • relative
  • fixed
  • absolute
  • sticky

要素をポジショニングするには、まずpositionプロパティを設定する必要があります。

static（デフォルト）

要素のデフォルト値で、ポジショニングは適用されず、通常のドキュメントフローに従います。staticでポジショニングされた要素はtop、bottom、left、rightの影響を受けません。

fixed（固定）

要素の位置はブラウザウィンドウに対して固定されます。ウィンドウをスクロールしても移動しません。

注意点：

  • IE7とIE8ではfixedポジショニングをサポートするためにはDOCTYPE宣言が必要です。
  • fixedポジショニングは要素の位置をドキュメントフローから分離させるため、スペースを占有しません。
  • fixedポジショニングされた要素は他の要素と重なる可能性があります。

relative（相対）

相対ポジショニングされた要素は、その通常の位置に対して相対的に配置されます。要素を移動させることができますが、元々占めていたスペースは変わりません。相対ポジショニングされた要素は、絶対ポジショニングされた要素のコンテナブロックとして頻繁に使用されます。

absolute（絶対）

絶対ポジショニングされた要素の位置は、最も近いポジショニングされた親要素に対して相対的です。要素にポジショニングされた親要素がない場合、その位置は<html>に対して相対的になります。

注意点：

  • absoluteポジショニングは要素の位置をドキュメントフローから分離させるため、スペースを占有しません。
  • absoluteポジショニングされた要素は他の要素と重なる可能性があります。

sticky（粘着）

stickyポジショニングは、ユーザーのスクロール位置に基づいて要素を配置します。粘着ポジショニングされた要素はユーザーのスクロールに依存し、position:relativeとposition:fixedの間で切り替わります。

その挙動はposition:relativeのように振る舞い、ページが特定の閾値を越えてスクロールすると、position:fixedのように振る舞い、特定の位置に固定されます。

注意点：

  • Internet Explorer、Edge 15およびそれ以前のバージョンはstickyポジショニングをサポートしていません。
  • Safariでは-webkit-プレフィックスを使用する必要があります。

重なる要素

z-index

要素のポジショニングはドキュメントフローから独立しているため、ページ上の他の要素を覆うことができます。z-indexプロパティは要素の重なり順序（どの要素を前面または背面に配置するか）を指定します。

注意点：

  • 2つのポジショニングされた要素が重なり合い、z-indexが指定されていない場合、HTMLコードで最後にポジショニングされた要素が最前面に表示されます。

CSSボーダー

border-styleの値

  • none: デフォルトでボーダーなし
  • dotted: 点線ボーダー
  • dashed: 破線ボーダー
  • solid: 実線ボーダー
  • double: 2つのボーダー。2つのボーダーの幅はborder-widthの値と同じ
  • groove: 3D溝ボーダー（凹みボーダー）。効果はボーダーの色の値に依存
  • ridge: 3D稜線ボーダー（隆起ボーダー）。効果はボーダーの色の値に依存
  • inset: 3D埋め込みボーダー。効果はボーダーの色の値に依存
  • outset: 3D突出ボーダー。効果はボーダーの色の値に依存
  • hidden: ボーダーを非表示

ボーダーの幅

border-widthプロパティはボーダーの幅を指定します。幅を指定する方法は2つあります：長さ値（2pxや0.1emなど、単位はpx、pt、cm、emなど）またはキーワードthick、medium（デフォルト）、thinを使用します。

注意点：

  • "border-width"プロパティは単独で使用しても効果がありません。まず"border-style"プロパティを使用してボーダーを設定する必要があります。
  • CSSは3つのキーワードの具体的な幅を定義していないため、ユーザーによってthick、medium、thinの値が異なる場合があります。

ボーダーの色

border-colorプロパティはボーダーの色を設定します。

色の指定方法：

  • 名前 - "red"のような色の名前
  • RGB - "rgb(255,0,0)"のようなRGB値
  • 16進数 - "#ff0000"のような16進値

また、ボーダーの色を"transparent"（透明）に設定することもできます。

注意点：border-colorは単独で使用しても効果がありません。まずborder-styleを使用してボーダーを設定する必要があります。

各辺のボーダー個別設定

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

border-styleプロパティには1〜4つの値を指定できます：

  • border-style: dotted solid double dashed;
    • 上ボーダーはdotted
    • 右ボーダーはsolid
    • 下ボーダーはdouble
    • 左ボーダーはdashed
  • border-style: dotted solid double;
    • 上ボーダーはdotted
    • 左右ボーダーはsolid
    • 下ボーダーはdouble
  • border-style: dotted solid;
    • 上下ボーダーはdotted
    • 左右ボーダーはsolid
  • border-style: dotted;
    • 4つのボーダーすべてがdotted

ボーダーの省略記法

border: 5px solid red;

CSS背景

HTML要素の背景を定義します。

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景色

background-colorプロパティは背景色を定義します。色値の定義方法：

  • 16進数 - 例："#ff0000"
  • RGB - 例："rgb(255,0,0)"
  • 色名 - 例："red"

背景画像

background-imageプロパティは背景画像を設定します。デフォルトでは画像は繰り返し表示され、要素全体を覆います。

背景画像の繰り返し設定

background-repeatプロパティは背景画像の繰り返し方法を制御します。

背景画像の位置

background-positionプロパティは背景画像の位置を指定します。

背景の省略記法

background: #ffffff url('img_tree.png') no-repeat right top;

プロパティ値の順序は以下の通りです：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

これらのプロパティをすべて使用する必要はなく、ページの実際のニーズに応じて使用します。

テキストとフォントのプロパティ

テキストの色

colorプロパティはテキストの色を設定します。

テキストの配置

text-alignプロパティ：

  • left - 左寄せ
  • right - 右寄せ
  • center - 中央揃え
  • justify - 両端揃え（雑誌や新聞のように）

テキストの装飾

text-decorationプロパティ：

  • text-decoration: none - テキスト装飾を削除
  • text-decoration: overline - 上線
  • text-decoration: line-through - 取り消し線
  • text-decoration: underline - 下線

テキストの変換

text-transformプロパティ：

  • text-transform: uppercase - テキストをすべて大文字に
  • text-transform: lowercase - テキストをすべて小文字に
  • text-transform: capitalize - テキストの最初の文字を大文字に

テキストのインデント

text-indentプロパティはテキストの最初の行のインデントを設定します。例：text-indent: 10px;

行の高さ

line-heightプロパティは行の高さを設定します。

文字間隔

word-spacingプロパティは単語間の間隔を設定します。
letter-spacingプロパティは文字間の間隔を設定します。

フォントの設定

font-familyプロパティは複数のフォントを設定でき、ユーザーが使用しているブラウザが認識可能なフォントを優先順位に従って選択します。

注意点：フォント名が1文字を超える場合は、引用符で囲む必要があります。

font-family: "Times New Roman", Times, serif;

フォントのスタイル

  • font-style: normal - 通常のスタイル
  • font-style: italic - イタリック体

フォントのサイズ

font-sizeプロパティはフォントのサイズを設定します。

CSSリスト

異なるリスト項目マーカー

list-style-typeプロパティ：

  • circle - 中空の円
  • disc - 実心の円
  • square - 四角
  • decimal - 10進数
  • decimal-leading-zero - 先頭に0をつけた10進数
  • greek - ギリシャ文字
  • armenian - アルメニア数字
  • cjk-ideographic - 中国語の大数字
  • georgian - グルジア数字
  • hebrew - ヘブライ語
  • hiragana - 日本語（ひらがな）
  • katakana-iroha - 日本語（カタカナ）
  • lower-alpha - 小文字アルファベット
  • upper-alpha - 大文字アルファベット
  • lower-roman - 小文字ローマ数字
  • upper-roman - 大文字ローマ数字
  • lower-greek - 小文字ギリシャ文字
  • latin - ラテン文字
  • upper-latin - 大文字ラテン文字
  • lower-latin - 小文字ラテン文字
  • none - なし

画像をリスト項目マーカーとして使用

list-style-image: url("sqpurple.gif");

省略記法

list-style: square url("sqpurple.gif");

以下のプロパティを指定します：

  • list-style-type
  • list-style-position
  • list-style-image

これらの値のいくつかが欠けていても、指定された順序に残っていれば問題ありません。

CSSテーブル

テーブルボーダー

borderプロパティはテーブルのボーダーを設定します。

ボーダーの折りたたみ

border-collapseプロパティはテーブルのボーダーを折りたたむかどうかを指定します。

テーブルの幅と高さ

table {
  width: 100%;
}

th, td {
  height: 50px;
}

テーブル内のテキスト配置

text-alignプロパティはテキストの水平配置を設定します。
vertical-alignプロパティはテキストの垂直配置を設定します。

テーブルのパディング

paddingプロパティはテーブルセルの内側の余白を設定します。

テーブルの色

テーブルの色は背景色やテキスト色のプロパティを使用して設定します。

擬似クラス（Pseudo-classes）

アンカー擬似クラス

a:link {color: #FF0000;} /* 未訪問のリンク */
a:visited {color: #00FF00;} /* 訪問済みのリンク */
a:hover {color: #FF00FF;} /* マウスがリンク上にある場合 */
a:active {color: #0000FF;} /* 選択中のリンク */

注意点：

  • CSS定義では、a:hoverはa:linkとa:visitedの後に配置する必要があります。
  • CSS定義では、a:activeはa:hoverの後に配置する必要があります。
  • 擬似クラスの名前は大文字と小文字を区別しません。

first-child擬似クラス

first-child擬似クラスは親要素の最初の子要素を選択します。

p:first-child {color: blue;}

注意点：IE8以前のバージョンではfirst-childを有効にするためにDOCTYPE宣言が必要です。

すべての<p>要素内の最初の<i>要素に一致

p > i:first-child {color: blue;}

最初の子要素としてのすべての<p>要素内のすべての<i>要素に一致

p:first-child i {color: blue;}

:lang擬似クラス

:lang擬似クラスは、異なる言語に対して特別なルールを定義します。

注意点：IE8では:lang擬似クラスをサポートするためにDOCTYPE宣言が必要です。

:langクラスは属性値がnoであるq要素の引用符のタイプを定義します：
q:lang(no) {quotes: "~" "~";}

CSS displayプロパティ

displayプロパティは要素が生成するボックスのタイプを指定します。

値 説明
none この要素は表示されません。
block この要素はブロックレベル要素として表示され、前後に改行が含まれます。
inline デフォルト。この要素はインライン要素として表示され、前後に改行がありません。
inline-block インラインブロック要素（CSS2.1で追加）。
list-item この要素はリストとして表示されます。
table この要素はブロックレベルのテーブルとして表示されます（<table>に類似）。
inline-table この要素はインラインテーブルとして表示されます（<table>に類似）。
table-row-group この要素は1つ以上の行のグループとして表示されます（<tbody>に類似）。
table-header-group この要素は1つ以上の行のグループとして表示されます（<thead>に類似）。
table-footer-group この要素は1つ以上の行のグループとして表示されます（<tfoot>に類似）。
table-row この要素はテーブル行として表示されます（<tr>に類似）。
table-column-group この要素は1つ以上の列のグループとして表示されます（<colgroup>に類似）。
table-column この要素はセル列として表示されます（<col>に類似）。
table-cell この要素はテーブルセルとして表示されます（<td>と<th>に類似）。
table-caption この要素はテーブルキャプションとして表示されます（<caption>に類似）。
inherit 親要素からdisplayプロパティの値を継承することを規定します。

特殊効果

@keyframesでアニメーションを作成

@keyframes animationname {
  keyframes-selector {
    css-styles;
  }
}

アニメーションは、CSSスタイルを段階的に変更することで作成されます。アニメーションプロセス中に、CSSスタイルを複数回変更できます。変更はfrom、toまたは%を使用して指定します。0%はアニメーションの開始、100%はアニメーションの完了です。

注意点：アニメーションの外観を制御するにはanimationプロパティを使用し、セレクタでアニメーションをバインドします。最適なブラウザサポートのために、常に0%と100%のセレクタを定義する必要があります。

/* 汎用 */
@keyframes name {
  from {top: 0px;}
  to {top: 200px;}
}

/* Firefox */
@-moz-keyframes name {
  from {top: 0px;}
  to {top: 200px;}
}

/* SafariとChrome */
@-webkit-keyframes name {
  from {top: 0px;}
  to {top: 200px;}
}

/* Opera */
@-o-keyframes name {
  from {top: 0px;}
  to {top: 200px;}
}

要素での呼び出し：

element {
  animation: name 5s infinite;
  -moz-animation: name 5s infinite; /* Firefox */
  -webkit-animation: name 5s infinite; /* SafariとChrome */
  -o-animation: name 5s infinite; /* Opera */
}

transform要素の変形

none 変換なしを定義します。
matrix(n,n,n,n,n,n) 6つの値の行列を使用して2D変換を定義します。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16つの値の4x4行列を使用して3D変換を定義します。
translate(x,y) 2D変換を定義します。
translate3d(x,y,z) 3D変換を定義します。
translateX(x) X軸の値のみを使用して変換を定義します。
translateY(y) Y軸の値のみを使用して変換を定義します。
translateZ(z) Z軸の値のみを使用して3D変換を定義します。
scale(x,[y]?) 2Dスケール変換を定義します。
scale3d(x,y,z) 3Dスケール変換を定義します。
scaleX(x) X軸の値を設定してスケール変換を定義します。
scaleY(y) Y軸の値を設定してスケール変換を定義します。
scaleZ(z) Z軸の値を設定して3Dスケール変換を定義します。
rotate(angle) パラメータで角度を指定して2D回転を定義します。
rotate3d(x,y,z,angle) 3D回転を定義します。
rotateX(angle) X軸に沿って3D回転を定義します。
rotateY(angle) Y軸に沿って3D回転を定義します。
rotateZ(angle) Z軸に沿って3D回転を定義します。
skew(x-angle,y-angle) X軸とY軸に沿って2D傾斜変換を定義します。
skewX(angle) X軸に沿って2D傾斜変換を定義します。
skewY(angle) Y軸に沿って2D傾斜変換を定義します。
perspective(n) 3D変換要素に透視図を定義します。

フレームとiframe

フレームセット（frameset）

framesetは一連の行または列を定義します。rows/colsの値は各行または列が画面のどの部分を占めるかを規定します。

  • cols: 列
  • rows: 行
<html>
<head>
  <frameset cols="25%,50%,25%"> 
    <frame src="/example/html/frame_a.html"> 
    <frame src="/example/html/frame_b.html"> 
    <frame src="/example/html/frame_c.html"> 
  </frameset>
</head>
<body>
</body>
</html>

フレームの一般的な属性

  • noresize: フレームのサイズを変更できないように指定
  • frameborder: フレームの周囲にボーダーを表示するかどうかを指定（0: ボーダーなし、1: ボーダーあり）
  • marginheight: フレームの上下の余白を定義
  • marginwidth: フレームの左右の余白を定義
  • scrolling: フレームにスクロールバーを表示するかどうかを指定（yes, no, auto）
  • src: フレームに表示するドキュメントのURLを指定

インラインフレーム（iframe）

iframe要素は、別のドキュメントを含むインラインフレームを作成します。

iframeの一般的な属性：

  • name: iframeの名前を指定
  • width: iframeの幅を指定
  • height: iframeの高さを指定
  • src: iframeに表示するドキュメントのURLを指定
  • frameborder: iframeの周囲にボーダーを表示するかどうかを指定（0: ボーダーなし、1: ボーダーあり）
  • align: iframeを周囲の要素に対してどのように配置するかを指定（left, right, top, middle, bottom）
  • scrolling: iframeにスクロールバーを表示するかどうかを指定（yes, no, auto）

iframeの内容を取得

var iframe = document.getElementById("myiframe"); // iframe要素を取得
var iwindow = iframe.contentWindow; // iframeのwindowオブジェクトを取得
var idoc = iwindow.document; // iframeのdocumentオブジェクトを取得
console.log(idoc.documentElement); // iframeのhtmlを取得

タグ: CSS ウェブデザイン フロントエンド スタイルシート レイアウト

6月28日 19:06 投稿

ホットタグ

©2026 異端開発室