Wiki_CSS - inoueshinichi/Wiki_Web GitHub Wiki

CSSの基本

CSS対応状況

スタイルシート

  • Webブラウザにフォントの見た目等UIに関する表現の指示を行うタグ
  • <h1 style="font-size: 24pt;">入会申し込み</h1>'のstyle`
  • HTMLのすべてのタグに付加できるglobal属性.

CSS (Cascading Style Sheets)

  • スタイルシート = CSS

CSSの書式

  • プロパティ: 値;
  • <h1 style="font-size: 24px; margin: 50px">入会申し込み</h1> 上下左右に50pxの余白を作る.

グローバル属性

主要

Property Contents
id idを指定する
class クラスを指定する
hidden 要素を隠す
title リンク要素などでツールチップに表示する内容を指定する
style スタイルシートを記述する

その他

Name Contents
tabindex タブキーでフォーカスを移すときの順序を指定する
accesskey キーボードショートカットを指定する
contentediable ユーザーによる編集が可能かを指定する
contextmenu 右クリックなどで表示されるコンテキストメニューのidを指定する
dir テキストの方向を示す. 日本語や英語は左から右なので, ltr(left to right), アラビア語などは, rtl
draggable ドラッグが可能かどうかを指定する
dropzone どのような対象をドロップできるかを指定する
lang 言語を指定する
spellcheck スペルチェックを行うかを指定する
translate 多言語に翻訳されるときに翻訳対象にするかを指定する

CSSで使用できる単位

絶対単位

Unit Content
px 表示スクリーンの画素を基準. コンピュータで最も多用される.
mm, cm, in ミリメートル, センチメートル, インチ. 印刷系で多用されるが, 画面上には正確に表示されない.
pt 1ポイント. 1/72インチ
pc 1パイカ. 12pt 12/72=1/6インチ

相対単位

Unit Content
em 親要素の文字サイズを1emとした, 相対的な大きさ. 1.5emは1.5倍
rem ルート要素の文字サイズを1remとした, 相対的な大きさ.
ex 小文字のxの高さ. 一般的には0.5emになるが, フォントによってまちまち.
ch 0の幅を基準とした大きさ
vh ビューポートの高さの1/100
vw ビューポートの幅の1/100
vmin ビューポートの高さまたは幅で小さい方の1/100
vmax ビューポートの高さまたは幅で大きい方の1/100

セレクターの種類

優先度 種類 例 説明
1000点 HTMLタグのスタイル属性による設定
100点 idセレクター(1) #id {
}		 id属性を指定したセレクター.
100点 idセレクター(2) p#id {
}		 指定要素のid属性による指定
10点 属性セレクター [type] {
}
[type='text'] {
}		 特定の属性で指定する. 属性の値で指定もできる.
<input type="text" name="myname">
10点 疑似クラスセレクター p:first-child {
}
p:last-child {
}		 特定の条件を満たした要素を指定できる.
:の後に条件式を入れる
10点 クラスセレクター(1) .class {
}		 本文でも紹介した, class属性による指定
10点 クラスセレクター(2) p.required {
}		 指定要素のclass属性による指定
10点 子セレクター .container>span {
}		 >でつなぐ. name="container"プロパティを持つ要素の最初のspan要素を指定する
10点 子孫セレクター .container p {
}		 「ある要素の中の要素」など階層構造になっている要素を指定できる. 例は, class="container"プロパティを持つ要素に囲まれた/要素に対して適用される.
子孫セレクターは下記の様に, いくつも重ねることができる.
.container p span .active
1点 タイプセレクター p {
}		 最も基本的な, 要素名を指定したセレクター.
この場合<p>要素に対してスタイルが適用される
1点 隣接セレクター h1+p {
}		 「隣り合っている要素」に対して適用する.
<h1>COCOA</h1>
<p>ここが対象</p>
<p>ここは対象でない</p>
0点 全称セレクター * {
}		 すべての要素に対してスタイルを適用する

疑似クラスセレクター

  • 優先度 1点
  • HTMLタグ要素が特定の状態になったときにUIスタイルを変える方法.
  • [要素]:[状態]で宣言的に条件分岐させる.
  • e.g. a:visited 訪問済みリンク
  • e.g. a:hover マウスポインタを置いた状態
要素
疑似クラスセレクター 説明
:active 「アクティブ」な状態. Tabキーなどでフォーカスを当てたときや,タップしてから放すときまでなど.
:checked チェックボックスでチェックされているもの.
:disabled 「disabled」属性が有効になっている要素.
:empty 空の要素
:enabled 「disabled」属性が有効になっていない要素.
:first-child 最初の子要素.
:first-of-type 指定した要素のうち子要素として最初に出現する要素
:focus フォームコントロールなどで, フォーカスが当たった状態
:hover マウスホバーしている状態
:lang(*) 言語を指定する. 日本語は「ja」
:last-child 最後の子要素
:last-of-type 指定した要素のうち子要素として最後に出現する要素
:link 訪れたことのないリンク
:nth-child(*) *番目の要素
:nth-of-type(*) 指定した要素のうち子要素として*番目に出現する要素
:nth-last-child(*) 同じく, 後ろから*番目の要素
:nth-last-of-type(*) 同じく, 後ろから*番目に出現する要素
:only-child 親要素の中に, 1つしかない子要素
:only-of-type 同じく, 指定した要素と同じで, 1つしかない子要素
:root 文書のルート要素を指定する. htmlの場合/
:target ページ内リンクでリンクされている要素
:visited 既に訪れたリンク先要素
  • 古いブラウザーは対応できないものがある

疑似タグ (CSSからHTMLタグを追加する機能)

  • CSSの指定タグの前後(before/after)にタグを追加できる
. {class} {tag}::[before|after] {
  constent: '';
  display: block;
  ....
}

CSSの詳細度(Speciality)

  • CSSは「よりその要素を詳細に示したものを優先する」というルールの元でスタイルが要素に適用される
  • 下記の<div class="container">に対するCSSスタイルを適用する場合, devよりcontainerが優先される!
.container {
    marign: 0;
}
dev {
    margin: 10px;
}
  • 次の順序で上に行くほど詳細度が高い
  1. !important
  2. style属性によるインライン指定 e.g <h1 style="font-size: 24; margin: 50px">入会申し込み</h1>
  3. idセレクター
  4. 疑似クラスセレクター
  5. 属性セレクター
  6. クラスセレクター
  7. タイプセレクター
  8. 全称セレクター

優先順位による変更を無視する !important

  • 優先順位が最高位になる
@media screen and (max-width: 992px) {
  .radio-inline {
    display: block;
    margin: 0 !important;
  }
}

フォント

  • font-family: [FAMILY], [serif | san-serif | ヒラギノ角ゴシック | など ];
font-famiryの値 説明
serif セリフ体(明朝体)で表示される
sans-serif サンセリフ体(ゴシック体)で表示される
monospace 等幅フォントで表示される
cursive 草書体で表示される. ゴシック体などよりも少し装飾された,
手書き感のあるフォントが選ばれることが多い(自動)
fantasy 遊び心のあるフォントが選ばれる
  • フォントサイズ font-size: ◯;
  • フォントの幅 font-weight: [bold | light | auto | ...];
  • 文字高 line-height: ◯(標準文字に対する文字領域の高さを倍率で示す);
  • 文字オフセット text-align: [top | bottom | left | right];

レイアウトに関するプロパティ

border属性

  • 枠線を決める

  • ショートバンドプロパティ border: 枠線の幅 枠線の種類 枠線の色;

  1. 枠線の幅 border-width: ◯;
  2. 枠線の種類 border-style: ◯;
  3. 枠線の色 border-color: ◯;

border属性の詳細設定

  • border-top: ◯;
  • border-right: ◯;
  • border-bottom: ◯;
  • border-left: ◯;
  • 枠線の幅 border-[top|left|right|bottom]-width: ◯;
  • 枠線の種類 border-[top|left|right|bottom]-style: ◯;
  • 枠線の色 border-[top|left|right|bottom]-color: ◯;

padding属性

  • 要素内側の余白を決める.
  • ショートバンドプロパティ padding: 20px;
  • padding-top: ◯;
  • padding-bottom: ◯;
  • padding-left: ◯;
  • padding-right: ◯;

margin属性

  • 要素外側の余白を決める.
  • ショートバンドプロパティ margin: 20px;
  • margin-top: ◯;
  • margin-left: ◯;
  • margin-right: ◯;
  • margin-bottom: ◯;
 -----------------------------
 |           ↕ margin        |
 | ---------border---------- |
 | |         ↕ padding     | |
 | |       [Element]       | |
 | |                       | |
 | ------------------------- |
 -----------------------------

ショートバンドプロパティ

  • スタイル属性の簡易表示方法
  • style="margin: 50px;"は,style="margin-top: 50px; margin-left: 50px; margin-bottom: 50px; margin-right: 50px"
  • margin: 上の余白 右の余白 下の余白 左の余白;(上下左右をすべて指定するパターン)
  • margin: 上の余白 左右の余白 下の余白;(左右をまとめて指定するパターン)
  • margin: 上下の余白 左右の余白;(上下と左右をまとめて指定するパターン)
  • margin: 上下左右の余白;(上下左右をまとめて指定するパターン)

position 要素がどのように配置されるか設定

  • position: [static(デフォルト) | relative | absolute | fixed | sticky ];
プロパティ 意味
static z-indexが指定できない.
relative 子要素にabsoluteを指定すると,relativeを指定した要素が基準位置となる.
absolute relativeと組み合わせて使う
fixed ブラウザ基準. ブラウザのスクロールに追従しない
sticky 親要素のスクロールに応じて、要素を固定表示. (固定位置はブラウザを基準とする)

基準位置から見て▢がどれだけ移動するかを指定する

  • top: ◯;
  • left: ◯;
  • right: ◯;
  • bottom: ◯;

奥行き表現 z-index

  • 値が大きいほど手前に表示される.
  • z-index: ◯;

CSSファイルの参照方法

CSSの内部参照(<header>要素内での<style>属性(CSS)の書式)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="これはHTMLの勉強用ページ">
    <meta name="keywords" content="Tutorial,Learning">

    <style>
        h1 {
            font-size: 24px;
            margin: 0;
        }
        p {
            font-size: 14px;
        }
    </style>
    
    <title>入会申し込み</title>
</head>

CSSの外部参照(複数のhtmlファイルが一つのcssファイルを参照する形式)

  • <link>要素を使用する.
<head>
  <title>入会申し込み</title>
  <link rel="stylesheet" [type="text/css"] href="./path/to/[FILE].css">
</head>
  • あとから読み込むCSSファイルの内容のほうが優先度が高い(当たり前の話)

@import (CSSからCSSを参照する)

  • スタイルシートに依存関係をもたせる style.css
@import url(path/to/[FILE].css);
~

背景色の指定(background-color)

規定色: 16色を指定可能

  • black
  • gray
  • silver
  • white
  • blue
  • navy
  • teal
  • green
  • lime
  • aqua
  • yellow
  • red
  • fuchsia
  • olive
  • purple
  • maroon

RGB指定

  • rgb(Red, Green, Blue)
  • 0~255, or 0%~100%

16進数指定

  • ff : 255
  • 0 : 00
  • 51 : 33
  • 表現方法 #ff0033
  • 連続する数値は省略できる #f03

rbgaでの半透明を使った指定

  • 0.0 ~ 1.0

hsl及びhsla空間での指定

  • 色相(Hue), 彩度(Saturation), 明度(Lightness)
  • 色相 : 0 ~ 360度
  • 彩度,明度 : 0% ~ 100%
  • 透明度 : 0 ~ 1.0

box-shadowプロパティ ドロップシャドウを掛ける

  • box-shadow: 左右 上下 ぼかし 広がり 色 Inset
button {
  box-shadow: 0 0 8px rgba(0,0,0,.4);
}

画像を背景にする

  • background-image: url(...);
  • background-size: [auto | contain | cover | % | px ];
  • coverは縦横比を維持したまま画面いっぱいに表示
  • background-position: [center | left | right | top | bottom | % | px];
  • background-repeat: [repeat(デフォルト) | repeat-x | repeat-y | no-repeat];

輪郭線 outline: ◯;

  • outline-style: ◯;
  • outline-width: ◯;
  • outline-color: ◯:

境界線 border: ◯;

  • border-style: ◯;
  • border-width: ◯;
  • border-color: ◯:

四つ角の曲率 border-radius: ◯;

フォームのラベルを指定する<label>

<label for="<input>要素などのフォームパーツのid属性">ラベル名</label>
<input type="..." id="..."...>

表示方法を設定する displayプロパティ

  • display: [inline|block|flex|grid|none]
  • inline・・・改行されない(ボックスレイアウト)
  • block・・・改行される(ボックスレイアウト)
  • ノン(none)・・・表示させない
  • flex・・・フレックスボックスレイアウト
  • grid・・・グリッドボックスレイアウト

文字の太さを調整する font-weightプロパティ

  • 100~900までの100ずつの単位
  • normal, bold, lighter, bolderの4種類
  • 標準は400のnormal
  • フォントデータが設定されていないと, font-weightプロパティを設定しても無効になる.

要素を回り込ませる float

  • left
  • right
  • none(デフォルト)
.description img {
    float: left;
    margin: 0 10px 10 px 0;
}
  • 回り込みを指定した要素以降の要素も全て回り込んでしまうので, プロパティclearで解除する.

回り込み(float)による背景の非表示を解消するテクニック

  • clerfixによる, float:left;時の回り込みによる高さ不定(0)になる現象を解除する裏技テクニック
  • floatプロパティで回り込みをするとclearプロパティで解除されるまでの区間が, 要素の高さが不定0になる
  • 擬似的に対象の最後に空白文字を追加することで, 高さを確定させて背景を描画できるようにする
  • 「回り込みをしている要素の親」に対してclearfixプロパティを定義して, CSSで表示を整える
/* style.css */ 

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

リストの行頭(文字/画像)を指定する list-style

  • list-style: スタイル名 行頭の位置 行頭に指定する画像
スタイル名 意味
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 漢数字
行頭の位置 意味
inside 行頭の数字部分を領域の内側に入れる
outside 行頭の数字部分を領域の内側に入れない
  • 行頭に指定する画像には画像のパスを指定

要素を透明にする opacity

  • 不透明度を調整
  • 0: 完全透明 ~ 1: 不透明
  • opacity: 0.5;

要素を変形させる transform

  • 並進 : translate()
  • 回転 : rotate(), rotateX(), rotateY(), rotateZ(), rotate3D()
  • 傾斜 : 'skew()`
  • 拡縮 : 'scale()`

CSSアニメーション

  • 疑似クラスのないセレクターに指定する
  • 変化が終了する前の状態のセレクターに指定する

4つのプロパティ

トランジション 説明
transition-property 対象となるCSSプロパティを指定する. 対象を絞らない場合allを指定する
transition-duration トランジションにかける時間を指定する. *s, *ms, など
transition-timing-function トランジションの処理を指定する. デフォルトease. 後述.
transition-delay トランジションの開始を指定時間だけ遅らせる. *s

transition-timing-function

function 説明
ease デフォルト. 開始と終了を滑らかにする
linear 常に行っての速度にする
ease-in 開始時だけ滑らかにする
ease-out 終了時だけ滑らかにする
ease-in-out ease-inとease-outを同時におこなう(easeより若干遅くなる)
cubic-bezier(x1,y1,x2,y2) 3次ベジェ曲線を指定できる

transitionのショートハンド

  • transition: property, duration, timing-function, delay;
.description img {
  float: left;
  margin: 0 10px 10px 0;
  transition: opacity 1s ease 0s;
}

要素の位置を固定する position: fixed

  • position: fixed;
  • 上に固定top: 0;
  • 下に固定bottom: 0;
  • 左に固定left: 0;
  • 右に固定right: 0;

重なり合う要素の優先度を設定する z-index

  • min : 0
  • max : 1,000,000,000
  • 100, 200, 300,...と区切りをつけて設定するほうが良い
⚠️ **GitHub.com Fallback** ⚠️