CSSとは？　CSSの基本とセレクタ・プロパティ一覧＋使用例

CSSとは？

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページをデザインする為、スタイルを記述する言語です。

CSSは、HTMLと組み合わせて使用します。

HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成する際に使用する言語です。

サイト内の構造を要素で定義し、ウェブページ全体を作ります。

HTMLで定義した構造や要素に対して、その要素の装飾をどのようにするかを指定するのがCSSです。 （文字色、サイズ、位置などなど）

CSSの基本書式

◆セレクタとは？

HTMLで指定した要素（タグ）型のものや、任意のclass名やid名を使ったセレクタなどがあります。

タグ名の場合はそのまま、クラス名は先頭に（.）を、ID名は先頭に（#）をつけて記述します。

サンプル
p{color:#000000;}
.クラス名{color:#000000;}
#ID名{color:#000000;}


セレクタ一覧

よく使うプロパティ一覧

文字装飾・背景

デザインサンプルは以下も参考にして下さい。

• 見出し
• 文字装飾
• HRライン
• リスト
• テーブル
• シンプルなボックス
• 画像枠などのボックス
• アコーデオンメニュー

コピペで簡単！CSSデザイン装飾まとめ

はじめに 当サイトでは、見出し・リスト・テーブル・文字装飾・ボックスなどのデザインを、簡単にコピペでご利用いただけるシンプルなCSSをご紹介しています。 CSSの基本と、よく使うプロパティのまとめは以下をご覧ください。 シンプル装飾 簡単な...

ayaito.net

2021.09.24

文字色・背景

※background-position
表示開始位置を左上からの距離を　%　や　px　で指定
または、left,center,rightや、top,center,bottomで指定

表示される領域の右下
background-position: right bottom
表示される領域の左端から10%、上端から20%
background-position: 10% 20%;

background-color:red

background-image: url("../images/sample.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom

フォント

※font-style
normal　初期値・標準フォント
italic　イタリック体
oblique　斜体

font-size: 24px;
font-weight: bold;
font-style:italic;
font-family: sans-serif;

テキスト

※text-decoration

none　初期値
underline　下線
overline　上線
line-through　行の中央に線
blink　テキスト点滅

※text-decoration-style
solid　実線（初期値）
double　二重線
dotted　点線
dashed　破線
wavy　波線

※text-shadow
スペース区切り　<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>
上記をカンマ区切りで複数指定も可能
text-shadow: 3px 3px 3px blue , -3px -3px 1px red;

text-decoration: underline double red;

上記の結果Sample

text-shadow: 3px 3px 3px blue , -3px -3px 1px red;

上記の結果Sample

配置・位置・表示

幅・高さ

余白

marginとpaddingの違い

※　margin、paddingの指定
値を1つ指定： 指定した値が[上下左右]
値を2つ指定： 記述した順に[上下][左右]
値を3つ指定： 記述した順に[上][左右][下]
値を4つ指定： 記述した順に[上][右][下][左]

【例】margin: 10px 20px;
（上下に10px、左右に20px）

配置・表示

ボーダースタイル

border・border-style

• none初期値・ボーダーなし・太さ0
• hiddenボーダーなし・太さ0
• solid１本線
• double２本線
• groove立体的な窪みライン
• ridge立体的な隆起ライン
• inset上、左の線＝暗く・下、右の線＝明るく
• outset上、左の線＝明るく・下、右の線＝暗く
• dashed破線
• dotted点線

border: 2px solid #ccc;

border: 2px groove #ccc;

border: 1px dashed　#ccc;

影をつける

box-shadow: (offset-x)px (offset-y)px (blur-radius)px (spread-radius)px color inset;

省略できるもの

.box1 {box-shadow: 2px 2px #000;}
.box2 {box-shadow: 2px 2px 4px -2px #000 inset;}

文字に影をつける

text-shadow

構文・値は、上記のbox-shadowと同じです。

テーブル

※table-layout
collapse　隣接セルのラインを重ねる
separate　隣接セルのライン間隔をあける

border-collapse: collapse;

border-collapse: separate;

THタグを使ってスタイルを指定し、見出しのみに適用するデザインなども自在です。

以下も参考にして下さい。

シンプルで綺麗なテーブル装飾CSSデザインをコピペですぐ使える７パターン

シンプルなテーブル装飾デザインです。カラー等はお好みで変えてご利用下さい。 HTML 見出しタグには<th>を使用しています。 横見出し用HTML <table class="クラス名"> <tbody> <tr> <th>見出し１</th...

ayaito.net

2019.04.11

リスト

list-style-type

• noneマーカーなし
• disc黒丸
• circle白丸
• square黒四角
• lower-roman小文字のローマ数字
• upper-roman大文字のローマ数字
• lower-greek小文字のギリシャ文字
• decimal算用数字
• decimal-leading-zero先頭に0をつけた算用数字
• lower-latin小文字のアルファベット
• lower-alpha小文字のアルファベット
• upper-latin大文字のアルファベット
• upper-alpha大文字のアルファベット
• cjk-ideographic漢数字
• hiraganaひらがなのあいうえお順
• katakanaカタカナのアイウエオ順
• hiragana-irohaひらがなのいろはにほへと順
• katakana-irohaカタカナのイロハニホヘト順
• hebrewヘブライ数字
• armenianアルメニア数字
• georgianグルジア数字

条件

全要素

すべての要素に適用されます。

*

使用例

*{
font-size: 16px;
}

指定した要素の中の全要素

指定要素（XXXX）内のすべての要素に適用されます。

XXXX *

使用例

.sample *{
font-size: 16px;
}

子要素

指定要素（XXXX）内の子要素に適用されます。

XXXX > xxxx

使用例
<div class="samle">
<p>サンプル</p>
</div>

.sample > p{
font-size: 16px;
}

後ろの要素

指定要素（XXXX）のすぐ後ろの要素（１つ）に適用されます。

XXXX + xxxx

使用例
<div class="samle">
<p>サンプル</p>適用内
</div>

<p>サンプル</p>適用外

.sample + p{
font-size: 16px;
}

子要素

指定要素（XXXX）の後に続く全要素に適用されます。

XXXX ~ xxxx

使用例

<div class="samle">
<p>サンプル</p>適用内
</div>

<p>サンプル</p>適用内

.sample ~ p{
font-size: 16px;
}

最初の要素

リストの１つ目や、テーブルのセル１つ目など

:first-child

使用例

ul li:first-child{
font-size: 16px;
}

最後の要素

:last-child

使用例

ul li:last-child{
font-size: 16px;
}

ｎ番目の要素

:nth-of-type(n)

※　n　は数字

最初の１文字

:first-letter

使用例

h2::first-letter {
font-size: 24px;
}

選択要素

div:active選択されている要素

div:not(:active)選択されていない要素

条件分岐

前方一致・後方一致・部分一致

使い方サンプル　：div[id^=”XXX”]

前方一致 ⇒ [【A】^=”【B】”]で、【A】が【B】で始まる要素
後方一致 ⇒ [【A】$=”【B】”]で、【A】が【B】で終わる要素
部分一致 ⇒ [【A】*=”【B】”]で、【A】に【B】を含む要素

SCSSのIF文

$変数: 定数;
div.colored {
  @if $変数 == 定数 {
/*処理する内容*/  }  @else if $変数 == 定数 {
/*処理する内容*/  }
}