CSS

導入方法

CSS スタイルファイルには二つの導入方法があります。HTML ファイル内に書くことも、.css で終わる独立ファイルとして作ることもできます。

方法一：独立した CSS ファイルを使う

CSS スタイルを別ファイルにする場合、HTML ファイルの <head> タグ内で link タグを使い、その CSS ファイルを読み込みます。

たとえば styles.css という CSS ファイルを HTML ファイルに読み込む場合、<head> タグ内に次の link タグを追加します。

html

<link rel="stylesheet" href="styles.css">

上のコードでは：
- rel="stylesheet" は、リンク先のファイルがスタイルシートであることをブラウザに知らせます。
- href 属性は CSS ファイルの具体的なパスを指定します。パスは相対パスでも絶対パスでも使えます。

方法二：HTML ファイル内に CSS スタイルを書く

CSS スタイルを HTML ファイル内に直接書く場合、通常は <head> タグ内で <style> タグを使います。例：

html

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
    </style>
</head>

CSS セレクタ

1. 要素セレクタ

HTML 要素のタグ名で要素を選択します。例：p、h1、div など。

css

p {
  font - family: Arial, sans - serif;
  line - height: 1.6;
}

2. クラスセレクタ

ドット（.）で始まり、その後ろにクラス名を書きます。HTML 要素の class 属性で要素を選択します。例：.header、.content など。

html

<button class="button">ログイン</button>
<input type="submit" class="button" value="登録"/>

css

. button {
    background - color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border - radius: 5px;
}

3. ID セレクタ

シャープ（#）で始まり、その後ろに ID 名を書きます。HTML 要素の id 属性で要素を選択します。例：#main - content、#navbar など。HTML 文書内で ID は一意であるべきです。

html

<div id="sidebar">
  <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
  </ul>
</div>

css

# sidebar {
  width: 200px;
  background - color: #F4F4F4;
  padding: 10px;
}

よく使う CSS 設定項目

よく使う CSS 設定項目（完全版は W3school を参照）

共通

CSS の形式：セレクタ {プロパティ1:値;プロパティ2:値} CSS のコメント：/* コメント内容 */

テキスト

プロパティ	説明
color	テキスト色を設定します
font-size	テキストサイズを設定します
text-align	要素内のテキストを揃えます。値：left right center
vertical-align	要素の垂直方向の揃え方を設定します。値：top middle bottom

インライン要素のテキストを自動改行する設定：word-wrap: break-word

要素

プロパティ	説明
width	幅
height	高さ
line-height	行の高さ
color	フォント色
font-size	フォントサイズ

背景

プロパティ	説明
background-color	背景色を設定します
background-image	背景画像を設定します
background-size	背景画像のサイズを設定します
background-repeat	背景画像を繰り返すかどうか、または繰り返し方を設定します
background-position	背景画像の開始位置を設定します

要素共通

プロパティ	説明
width,height,line-height	幅、高さ、行の高さ
color，font-size	要素内のフォント
background-color，background-image	背景
position，relative	インライン要素を上下に移動できるようにします
overflow，hidden，scroll	スクロール表示

ボックスモデル（Box Model）

一つのボックスは、Margin 外側の余白、Border 枠線、Padding 内側の余白、Content 内容で構成されます。

構成

一、Border（枠線）

ピクセル値、実線・破線、枠線色のほか、border-style 属性で具体的な枠線スタイルを設定できます。例：dotted（点線）、dashed（破線）、double（二重線）など。
特定の辺だけに枠線を設定できます。例：border-top、border-right、border-bottom、border-left。各辺には、ピクセル値、スタイル、色を個別に設定できます。

二、Margin（外側の余白）

上、右、下、左の余白を別々に設定できるほか、margin:auto で要素を自動的に中央寄せできます。通常は要素の幅と組み合わせて使います。
margin:0 auto を使うと水平方向の中央寄せができます。0 は上下の余白が 0、auto は左右の余白を自動配分するという意味です。

三、Padding（内側の余白）

padding-top、padding-right、padding-bottom、padding-left のように、一つの辺だけに内側の余白を設定できます。
内側の余白は要素の総サイズを増やします。レイアウト時には、Padding が要素サイズに与える影響を考える必要があります。

四、boxShadow（要素の影効果）

box-shadow 属性は複数のパラメータを受け取れます。例：box-shadow: h-shadow v-shadow blur spread color inset;。順に、水平位置、垂直位置、ぼかし半径、広がり半径、影の色、内側影かどうかを表します。inset は内側影で、デフォルトは外側影です。
例：box-shadow: 5px 5px 10px #888888; は、要素の右側と下側に 5px の影を作り、ぼかし半径を 10px、影の色をグレーにします。

五、border-radius（外枠の角丸）

四つの角に別々の角丸半径を設定できます。例：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
省略形も使えます。例：border-radius: 10px 20px 30px 40px; は、左上、右上、右下、左下の順に角丸半径を指定します。四つの値が同じ場合は border-radius: 20px; のように一つの値で書けます。

flex レイアウト

フレキシブルボックスレイアウトは、float や position を使わずに、柔軟なレスポンシブレイアウトを設計しやすくする仕組みです。すべての現代ブラウザは flexbox プロパティをサポートしています。

Flexbox モデルを使うには、まず Flex コンテナを定義します。 display 属性を flex に設定すると、コンテナが Flex コンテナになります。

html

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<style>
.flex-container {
  display: flex;
}
</style>

コンテナ属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 属性

flex-direction 属性は、Flex アイテムをどの方向に並べるかを定義します。 CSS 内のテキストを自動改行する設定：word-wrap:break-word;

css

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

選択できる値：

row（デフォルト）：主軸は水平方向で、開始点は左端です。
row-reverse：主軸は水平方向で、開始点は右端です。
column：主軸は垂直方向で、開始点は上端です。
column-reverse：主軸は垂直方向で、開始点は下端です。

flex-wrap 属性

デフォルトでは、アイテムは一つの線、つまり軸線上に並びます。 flex-wrap 属性は、軸線に収まりきらない場合に折り返すかどうかを定義します。

css

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

選択できる値：

nowrap（デフォルト）：折り返しません。
wrap：折り返します。最初の行は上にあります。
wrap-reverse：折り返します。最初の行は下にあります。

flex-flow

flex-flow 属性は、flex-direction 属性と flex-wrap 属性の省略形です。デフォルト値は row nowrap です。

css

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content 属性

justify-content 属性は、主軸上でのアイテムの揃え方を定義します。

css

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

選択できる値：

flex-start（デフォルト）：左揃え
flex-end：右揃え
center：中央揃え
space-between：両端揃えで、アイテム間の間隔は同じです。
space-around：各アイテムの両側の間隔が同じです。そのため、アイテム間の間隔は、アイテムと枠の間隔の 2 倍になります。

align-items 属性

align-items 属性は、交差軸上でアイテムをどう揃えるかを定義します。

css

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

選択できる値：

flex-start：交差軸の開始点に揃えます。
flex-end：交差軸の終点に揃えます。
center：交差軸の中央に揃えます。
baseline：アイテムの最初の行の文字の下端に揃えます。
stretch（デフォルト）：アイテムに高さが設定されていない、または auto の場合、コンテナの高さ全体を占めます。

CSS ​

導入方法 ​

方法一：独立した CSS ファイルを使う ​

方法二：HTML ファイル内に CSS スタイルを書く ​

CSS セレクタ ​

1. 要素セレクタ ​

2. クラスセレクタ ​

3. ID セレクタ ​

よく使う CSS 設定項目 ​

共通 ​

テキスト ​

要素 ​

背景 ​

要素共通 ​

ボックスモデル（Box Model） ​

構成 ​

一、Border（枠線） ​

二、Margin（外側の余白） ​

三、Padding（内側の余白） ​

四、boxShadow（要素の影効果） ​

五、border-radius（外枠の角丸） ​

flex レイアウト ​

コンテナ属性 ​

flex-direction 属性 ​

flex-wrap 属性 ​

flex-flow ​

justify-content 属性 ​

align-items 属性 ​

CSS

導入方法

方法一：独立した CSS ファイルを使う

方法二：HTML ファイル内に CSS スタイルを書く

CSS セレクタ

1. 要素セレクタ

2. クラスセレクタ

3. ID セレクタ

よく使う CSS 設定項目

共通

テキスト

要素

背景

要素共通

ボックスモデル（Box Model）

構成

一、Border（枠線）

二、Margin（外側の余白）

三、Padding（内側の余白）

四、boxShadow（要素の影効果）

五、border-radius（外枠の角丸）

flex レイアウト

コンテナ属性

flex-direction 属性

flex-wrap 属性

flex-flow

justify-content 属性

align-items 属性