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

CSS

CSSとは?

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

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

 

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

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

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

 

CSSの基本書式

 

 セレクタ{プロパティ:値;}

 

 【例】 h1{font-size:18px;}

 

h1 =セレクタ
font-size = プロパティ名
18px = 値
上記の例を記述したCSSを読み込んだサイトでは、HTMLで <h1>タイトル</h1> と書くだけで、すべての<h1>タグのフォントサイズが18pxで表示されます。
このように、装飾やスタイルをまとめてCSSに記載する事で、サイト内でのデザインを統一でき、いちいちHTMLで装飾のタグを入力する必要もなくなり作業効率も上がります。

 

◆セレクタとは?

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

 

セレクタ一覧

 

セレクタ名書式対象使用例
要素型セレクタ要素名要素名で指定した要素p {color:red;}
全称セレクタ*すべての要素* {color:red;}
classセレクタ要素名.クラス名クラス名を付けた要素p.class {color:red;}
idセレクタ要素名#id名id名を付けた要素div#id {color:red;}
擬似クラス要素名:link未訪問のリンクa:link {color:red;}
要素名:visited訪問済のリンクa:visited {color:red;}
要素名:hoverカーソルが乗っている要素a:hover {color:red;}
要素名:activeクリック中の要素a:active {color:red;}
要素名:focusフォーカスされている要素input:focus {background:red;}
要素名:first-child要素内の最初の子要素p:first-child {color:red;}
擬似要素要素名:first-line要素の最初の一行p:first-line {color:red;}
要素名:first-letter要素の最初の一文字p:first-letter {color:red;}
要素名::before要素の直前q::before {content:"「";}
要素名::after要素の直後q::after {content:"」";}
属性セレクタ要素名[属性名]特定属性の指定要素a[target] {color:red;}
要素名[属性名= “属性値"]特定属性値の指定要素a[target="_blank"] {color:red;}
要素名[属性名~= “属性値"]属性値候補と一致した要素p[class~="sample"] {color:red;}
複数のセレクタセレクタ,セレクタ複数のセレクタh1, h2 {color:red;}
子孫セレクタセレクタ セレクタ下の階層の子孫要素p strong {color:red;}
子セレクタセレクタ>セレクタ直下の階層の子要素p > strong {color:red;}
隣接セレクタセレクタ+セレクタ直後に隣接する要素h1 + p {color:red;}
コメント/*コメント*/CSSソース中のコメント

 

よく使うプロパティ一覧

 

文字装飾・背景

見出しデザインは以下も参考にして下さい。

文字色・背景

color文字色(前景色)を指定する
background背景に関する指定をまとめて行う
background-attachment背景画像の固定・移動を指定する
background-color背景色を指定する
background-image背景画像を指定する
background-position背景画像の表示開始位置を指定する 
background-repeat背景画像のリピートの仕方を指定する

 

※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フォントに関する指定をまとめて行う
font-styleフォントをイタリック体・斜体にする 
font-variantフォントをスモールキャップにする
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする
※font-style
normal 初期値・標準フォント
italic イタリック体
oblique 斜体
 使用例
font-size: 24px;
font-weight: bold;
font-style:italic;
font-family: sans-serif;

 

テキスト

line-height行の高さを指定する
text-alignブロックコンテナ内の行の揃え位置・均等割付を指定する
text-justify均等割付の形式を指定する
vertical-align縦方向の揃え位置を指定する
text-decorationテキストの線・色・スタイルをまとめて指定する 
text-decoration-styleテキスト傍線のスタイルを指定する ※
text-underline-position下線の表示位置を指定する
text-indent一行目のインデント幅を指定する
text-transform大文字・小文字・全角文字への変換を指定する
white-spaceソース中のスペース・タブ・改行の表示の仕方を指定する
letter-spacing文字の間隔を指定する
word-spacing単語の間隔を指定する
text-shadowテキストに影をつける 

 

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

text-decoration-stylesolid 実線(初期値)
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

 

配置・位置・表示

幅・高さ

width幅を指定する
max-width幅の最大値を指定する
min-width幅の最小値を指定する
height高さを指定する
max-height高さの最大値を指定する
min-height高さの最小値を指定する

 

余白

marginとpaddingの違い

3217_01

marginマージンに関する指定をまとめて行う 
margin-top上マージンを指定する
margin-bottom下マージンを指定する
margin-left左マージンを指定する
margin-right右マージンを指定する
paddingパディングに関する指定をまとめて行う 
padding-top上パディングを指定する
padding-bottom下パディングを指定する
padding-left左パディングを指定する
padding-right右パディングを指定する
※ margin、paddingの指定
値を1つ指定: 指定した値が[上下左右]
値を2つ指定: 記述した順に[上下][左右]
値を3つ指定: 記述した順に[上][左右][下]
値を4つ指定: 記述した順に[上][右][下][左]

【例】margin: 10px 20px;
(上下に10px、左右に20px)

 

配置・表示

positionボックスの配置方法(基準位置)を指定する
top上からの配置位置(距離)を指定する
bottom下からの配置位置(距離)を指定する
left左からの配置位置(距離)を指定する
right右からの配置位置(距離)を指定する
display要素の表示形式(ブロック・インライン・フレックス等)を指定する
float左または右に寄せて配置する
clear回り込みを解除する
z-index重なりの順序を指定する
overflowはみ出た要素の表示方法を指定する

 

ボーダースタイル

borderボーダーのスタイル・太さ・色を指定する
border-colorボーダーの色を指定する
border-styleボーダーのスタイルを指定する
border-widthボーダーの太さを指定する
border-top上ボーダーのスタイル・太さ・色を指定する
border-top-color上ボーダーの色を指定する
border-top-style上ボーダーのスタイルを指定する
border-top-width上ボーダーの太さを指定する
border-bottom下ボーダーのスタイル・太さ・色を指定する
border-bottom-color下ボーダーの色を指定する
border-bottom-style下ボーダーのスタイルを指定する
border-bottom-width下ボーダーの太さを指定する
border-left左ボーダーのスタイル・太さ・色を指定する
border-left-color左ボーダーの色を指定する
border-left-style左ボーダーのスタイルを指定する
border-left-width左ボーダーの太さを指定する
border-right右ボーダーのスタイル・太さ・色を指定する
border-right-color右ボーダーの色を指定する
border-right-style右ボーダーのスタイルを指定する
border-right-width右ボーダーの太さを指定する
border-radius角に丸みをつける(全体)
border-top-right-radius右上の角に丸みをつける
border-top-left-radius左上の角に丸みをつける
border-bottom-right-radius右下の角に丸みをつける
border-bottom-left-radius左下の角に丸みをつける

border・border-style

  • none 初期値・ボーダーなし・太さ0
  • hidden ボーダーなし・太さ0
  • solid 1本線
  • double 2本線
  • groove 立体的な窪みライン
  • ridge 立体的な隆起ライン
  • inset 上、左の線=暗く・下、右の線=明るく
  • outset 上、左の線=明るく・下、右の線=暗く
  • dashed 破線
  • dotted 点線
 使用例
border: 2px solid #ccc;

border: 2px groove #ccc;

border: 1px dashed #ccc;

 

テーブル

table-layoutテーブル(表)の表示方法を指定する 
caption-sideテーブル(表)のキャプションの位置を指定する
border-collapseセルのボーダーの表示の仕方を指定する
border-spacingセルのボーダーの間隔を指定する
empty-cells空白セルのボーダーの表示・非表示を指定する

 

※table-layoutcollapse 隣接セルのラインを重ねる
separate 隣接セルのライン間隔をあける
 使用例
border-collapse: collapse;
border-collapse: separate;

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

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

 

リスト

list-styleマーカーに関する指定をまとめて行う
list-style-imageマーカー画像を指定する
list-style-typeマーカー文字の種類を指定する
list-style-positionマーカーの表示位置を指定する
marker-offsetマーカーとの間隔を指定する

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 グルジア数字

関連記事

CSS

Posted by 綾糸