CSS

CSSの基礎知識

Contents

セレクタ

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

link要素

<!doctype html>
<html>
<head>
.....
<link rel="stylesheet" href="style.css">
</head>
.....

style要素

<!doctype html>
<html>
<head>
.....
<style>
p { color: red; }
</style>
</head>
.....

style属性

.....
</head>
<body>
<p style="color: red;">
.....
</p>

@import

  • @import “style.css“;(シングルクオーテーションでも省略も可能)
  • @import url(“style.css“);(シングルクオーテーションでも省略も可能)
  • @import “style.css” screen, print;

単位

em親要素のフォントサイズを1とする
remhtml要素のフォントサイズを1とする root em 指定していないデフォルトは16px
ex要素のフォントのx-height(小文字xとほぼ同じ)を1
ch要素のフォント0の幅を1
pxピクセル、1/96インチ
ptポイント、1/72インチ
pcパイカ、12ポイント
inインチ、2.54センチ

単位の使い分け

emは親要素のフォントサイズを参照するのでletter-spacing疑似要素の間隔に使い、絶対的な値はborderでそれ以外はremにすることで、レスポンシブデザインに対応するスタイルにできます。

  • em … letter-spacingや疑似要素との間隔
  • px … border等可変でない値

セレクタ

属性セレクタ

属性セレクタ対象
[属性名]属性名の属性が指定されている(属性値は何でも良い)
[属性名=”属性値”]属性値全体が一致
[属性名~=”属性値”]スペース区切りの値どれかと一致
[属性名=”属性値”]ハイフン区切りの前半が一致
[属性名^=”属性値の始め”]属性値の始めで始まる
[属性名$=”属性値の終わり”]属性値の終わりで終わる
[属性名*=”属性値の一部”]属性値の一部を含む

擬似クラス

  • 擬似要素はセレクタの最後にのみ配置可能
  • :擬似クラス コロンは1つ
  • ::疑似要素 コロンを2つ
属性セレクタ対象
:nth-child(式)先頭からn個目の要素から(式)おき
:nth-last-child(式)最後からn個目の要素から(式)おき
:nth-of-type(式)先頭からn個目の要素から(式)おき
(指定要素と同じ)
:nth-last-of-type(式)最後からn個目の要素から(式)おき
(指定要素と同じ)
:first-child子要素の中で最初の要素
:last-child子要素の中で最後の要素
:first-of-type子要素の中で最初の要素
(指定要素と同じ)
:last-of-type子要素の中で最後の要素
(指定要素と同じ)
:only-child唯一の子要素
:only-of-type唯一の子要素
(指定要素と同じ)

属性セレクタ

  • p[class=”abc”]
    完全一致
  • p[class|=”abc”]
    「-」(ハイフン)区切りの属性値の前半が一致
  • p[class~=”abc”]
    複数の属性名のうち一つが一致
  • p[class^=”abc”]
    属性値で始まる
  • p[class$=”abc”]
    属性値で終わる
  • [p*=”abc”]
    「属性値の一部」の文字列を含む

擬似要素

セレクタ全体の最後部に1つだけしかつけることができない

擬似要素適用先
::first-line1行目
::first-letter1文字目
::before先頭にコンテンツ追加
::after最後にコンテンツ追加

結合子

ベンダープレフィックス

  • 草案段階の際
  • プロパティの先頭に付けます。
ベンダープレフィックスブラウザ
-moz-Firefox
-ms-FireaInternet Explorer、Microsoft Edgefox
-o-Opera
-webkit-Google Chrome, Safari

背景

background

<一括指定の順番>

background: url background-position / background-size background-repeat;

background-position / background-size の記述は決まっている

liner-gradient

background: linear-gradient(red, #eee);
background: linear-gradient(to bottom, red, #eee);
background: linear-gradient(180deg, red, #eee);

背景を2色にする

background: linear-gradient(90deg, #333 0%, #333 30%, #f4f7f8 30%, #f4f7f8 100%);

背景画像にオーバーレイ(透過カラー)を重ねる方法


background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../) center center / cover no-repeat;

hsl

object-fit

画像を様々な縦横比に対応するように整えてくれる便利なプロパティです。

cover表示エリアに余白がなくなるよう表示し、はみ出した部分はトリミングされます。
contain表示エリアをはみ出さないよう、最大の大きさで表示します。足りない部分は余白ができます。

フォント

font

  1. font-weight、font-style、font-variant(順不同、省略可
  2. font-size(省略不可)
  3. 「/」(スラッシュ)で区切る
  4. line-height(省略可)
  5. font-family(省略不可)

font-size

単位付きの数値
パーセンテージ親要素に対して指定
xx-small、x-small、small、medium、large、x-large、xx-large7種類のキーワードで指定
smaller、larger親要素に対して1段回小さい、大きい

font-familyプロパティ

  • family-nameまたはgeneric-familyの値を指定
    (※family-nameはインストールされたフォント名、@font-face{}で指定したフォント名)

font-variantプロパティ

  • スモールキャピタル(大文字を小さくした)の書体にする
  • 初期値「nomal」 → 「small-caps
  • woff、truetype、opentype、embedded-opentype、svg

line-height

  • normal … 自動的に指定、規定値は1.2
  • 単位付き数値
  • 単位なし数値 … フォントサイズ × 数値(推奨)

Webフォント

  • @font-faceで読み込む
  • インストール不要環境に依存しない
@font-face{
 font-family: mytestfont;
 src: url("fonts/testfont.woff") format("woff");
}
p{font-family: "mytestfont";}
■最初に任意のフォント、最後に総称ファミリを指定
font-family: フォントファミリ名1, フォントファミリ名2, 総称ファミリ名;

generic-family

  • 汎用フォントファミリー名
総称ファミリ名字体
serif明朝体
sans-serifゴシック体
cursive筆記体
fantasy装飾体
monospace等幅

writing-modeプロパティ

writing-modeプロパティは縦書きのプロパティに使用します。

.vertical {
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}

縦書きレイアウトのDEMO
123456789

text-shadow

p {
text-shadow: 1px 4px 8pxぼかし rgba( 0,0,0,0.4), -1px -4px 8px rgba( 255,0,0,0.4);
}

テキスト

text-decoration

関連プロパティを空白で区切って設定

  • text-decoration-line  下線・上線・取消線
  • text-decoration-style  線の種類(波線や二重線、破線)
  • text-decoration-color  色

word-break

break-all全ての文字の間で折り返し
keep-all空白以外折り返ししない(日本語は折り返さない)
normalその言語のルールに合わせる(初期値)

hyphens

manual&shy;でハイフネーション(初期値)
none一切行わない
auto言語に応じて

white-space

  • 連続する空白文字を1つの半角スペースに変換するか
  • 折り返しをどうするか
改行
ソースコード
まとめ折返し
normal×
pre××
nowrap××
pre-wrap×
pre-line

word-spacing

単語単語間隔

text-transform

テキストの大文字小文字を切り替える

uppercase半角アルファベット → 大文字
lowercase半角アルファベット → 小文字
capitalize半角アルファベット → 先頭の文字だけ大文字
none元の状態のまま
p { text-transform: capitalize;}

capitalize abc

direction

文字表記の方向

ltr左から右
rtl右から左

unicode-bidi

文字表記に関する指示、上書き

normal(初期値) UNICODEを組み込まない
embedインライン要素の場合UNICODEを組み込む
bidi-overrideUNICODE上書き

ボックス

box-sizing

content-boxpadding、borderはコンテンツのwidthとheightにを含めない(初期値)
border-boxpadding、borderはコンテンツのwidthとheightにを含める
inherit親要素継承

box-shadow

  1. 水平方向(必須)
  2. 垂直方向(必須)
  3. ぼやけかたの大きさ(省略可)
  4. 影の大きさ(省略可)
  5. 影の色(省略可)
  6. 影を内側にする(inset)(省略可)

filter: drop-shadow

filter:drop-shadow(水平方向 垂直方向 ブラー量 影色);

box-shadowとの違い

border

線の種類 太さ

width

max-width

  • 要素を親要素からはみ出さないようにする
  • max-width: 100%;にすると画面幅が画像より大きいときは画像のサイズで、小さいときは画面幅にあわせてはみ出ないようになります。
    ※画像の縦横幅が崩れたらheight: auto;

margin

  • 値が1つ … 上下左右
  • 値が2つ … 上下 左右
  • 値が3つ …  左右
  • 値が4つ … 

padding

display: flex;

row左から右への横並び
column上から下
row-reverserowの逆
column-reversecolumnの逆
<flex-directionプロパティ>

flex-shrink

flexアイテムの縮小率を指定するプロパティです。親要素のflexコンテナからはみ出た要素を縮小することができます。

また幅を縮めたくないときは、flex-shrink: 0;を指定します。

親要素にdisplay: flex;を指定し、子要素にflex-shrinkを指定します。

flex

flexとは、flex-growflex-shrinkflex-basisを同時に指定できるプロパティです。

flex: 1;

flex-grow: 1;flex-shrink: 1;flex-basis: 0;を同時に指定できるプロパティです。

flex-grow: 1;親要素の余っているスペースを整数で設定した比率で分配
flex-shrink: 1;親要素からはみ出たスペースを整数で設定した比率で縮める
flex-basis: 0;width、heightのように幅を初期値を設定できる
デフォルト値=autoを0で記載
https://miyattiblog.com/explanation-of-flex-property/

gapプロパティー

gapプロパティーはFlexboxおよびGridで要素間の間隔を設定できます。

display: grid;

CSS Gridで中央揃え

.sample {
background: #222;
color: #fff;
display: grid;
place-items: center;
padding: 60px;
}
gridで中央寄せ
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns


position

position: static; … プロパティ無し。既定値
position: relative;  親要素、または画面の左上を基準に位置を指定
position: absolute ;  親要素から top right bottom left の値によって決定 
position: fixed;
position: sticky; … 親要素から、追従する
【領域1】
sticky
【領域2】

z-index

  • 0が基準
  • 初期値はauto
  • positionプロパティにstatic以外が指定されている場合に適用
  • 後に書いたものが上に来る、擬似要素も
  • z-indexが有効なのは同一階層で

マルチカラム、フレキシブルボックス

columun-count

  • 何段組にするか
  • 初期値はauto

columun-width

columunsプロパティ

columns: カラムの幅 カラムの数;

columun-gapプロパティ

<p style="
width: 100%;
height: 160px;   /*--高さを指定--*/
column-count: 3; /*--3列--*/
column-fill: balance; /*--balanceを指定--*/
column-gap: 1px; /*--隙間--*/
line-height: 1.8;"> … </p>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーで

columun-ruleプロパティ

columun-spanプロパティ

アニメーション

transform

擬似クラス説明
none初期値
rotate(角度)時計回りの回転
rog、rad
scale(数値,数値)・横方向、縦方向の順の倍率に拡大縮小
・値を一つ → 縦横両方適用
translate(単位付きの数値, 単位付きの数値)・右方向、下方向の順に移動を指定
・値を一つ → 右方向だけ適用
skew()x軸、y軸に沿った傾斜の角度を指定
値を一つ → x軸に沿った角度の傾斜だけ適用

transition-property

  • 効果を適用するプロパティを指定
  • 複数設定はカンマ区切り
  • 値 → プロパティ名、none、all(適用可能な全てのプロパティ、デフォルト値)

transition-duration

変化にかかる時間を指定

transition-timing-function

  • ease … ゆっくり始まり → ゆっくり終わる(デフォルト値)
  • ease-in … ゆっくり始ま → 一定速度で終わる
  • ease-out … 一定速度で始まり → ゆっくり終わる
  • ease-in-out … ゆっくり始まり → ゆっくり終わる
  • linear … 一定速度で変化

transition-delay

  • 開始する時間を遅らせる
  • 初期値0

transition

transition-delay → transition-durationの順に指定

@keyframes

.animation{
animation-name: animation;
animation-duration: 2s;
animation-iteration-count:infinite;
background: #bisque;
height: 60px;
text-align: center;
}
@keyframes animation{
0%{
width: 50%;
}
100%{
width: 100%;
}
}
  • 「0%」→「from」、「100%」→「to」が使用可能
アニメーションサンプル

animation

  • animation-name キーフレームの名前
  • animation-duration 再生時間
  • animation-timing-function 加速、減速
  • animation-delay 開始時間を遅らせる
  • animation-iteration-count 繰り返す回数
  • animation-direction 逆再生

animation-iteration-count

アニメーションの再生を繰り返す回数を指定

その他

table

プロパティ名機能
caption-sideキャプションの表示位置(top、bottom、left、right)
border-collapse罫線の間の隙間の有無
・あり→separate(デフォルト) → border-radius無効
・なし→collapse
border-spacing罫線のあいだの間隔の大きさを指定します。
empty-cells内容が空のセルの背景とボーダーを表示させるかどうか
table-layoutレイアウト方式
auto、fixed表の表示が速くなる

内容を追加するプロパティ

  • content … CSSで内容を追加
  • quotes … qようその前後につける引用符を設定
  • counter-reset … カウンタの値をリセット
  • counter-increment … カウンタの値を進める
<style media="screen">
    li {
      counter-increment: number;
    }
    li::before {
      content: counter(number);
    }
  </style>
<ul>
<li>見出し</li>
<li>見出し</li>
<li>見出し</li>
</ul>
  • 見出し
  • 見出し
  • 見出し

SMACSS

SMACSS(スマックス:Scalable and Modular Architecture for CSS)拡張可能でモジュール的なCSSの設計手法です。

CSSのルールを5種類

  1. ベース
  2. レイアウト
  3. モジュール
  4. 状態(ステート)
  5. テーマ

CSS設計

CSS設計のポイント

GoogleのエンジニアであるPhilipWalton氏が提唱しているCSSが目指す4つのゴールがあります。

  • 予測できる
    • クラス名から影響は範囲が想像できる
    • クラス名から機能・役割が創造できる
  • 再利用できる
  • 保守できる
    • 影響範囲が広すぎない
  • 拡張できる
    • 詳細度が高すぎない
    • HTMLに依存しない

レイアウトに関する記述

以下のようなプロパティーはモジュールクラス自体に直接設定せず、別のレイアウトグループのクラスにてスタイリングすることで、使い回しが可能になります。

  • position
  • zindex
  • top/right/bottom/left
  • float
  • width
  • margin

例えばレイアウトに関するスタイリングをするために以下のようにクラスを設定する方法があります。

.ly_cont {
 width: 1200px;
 padding: 0 16px;
 margin-right: auto;
 margin-left: auto;
}

※SMACSSではレイアウトに関するクラスに接頭辞にl-をつけます。

HTMLに依存しない

HTML要素名をセレクターに使用しないことで、HTMLに依存しない設計が可能です。

これにより何かの事情によりpタグからdivタグに変更しなければならない時に、その影響を考える必要がありません。

SMACSSのモジュールルール

モジュール(見出し、ボタン、カード…)は別のレイアウトに埋め込んでも見た目が崩れたりしないように使用できることが求められます。

影響範囲を広くしすぎない

正しく計算した上で範囲を広く設定することは問題ありませんが、意味もなく範囲を広くしてしまうとそれを打ち消すコードの記述やレイアウト崩れが起きる可能性があります。以下の点がポイントになります。

  • 影響範囲を絞る
    • (例 … 子孫セレクタでなく子セレクタで指定するSMACSS推奨
  • 影響範囲が広い範囲の場合、最小限のスタイリングにとどめる

詳細度を高くしすぎない

必要以上に詳細度を高くすると以下のデメリットがあります。

  • コードが見づらい
  • 上書き、打ち消すのが難しい

詳細度を均一に保つ

<a class="button button_primary" href="#">ボタン</a>

.button.button_primary {…} 詳細度が高い×
.button_primary {…} 詳細度が均一○(BEM)

クラス名から機能・役割が創造できる

汎用的に使用可能な単語

  • __wrapper
  • __inner
  • __header
  • __body

クラス名のつけ方

  • main … 主要な
  • faq … よくある質問
  • title … (サイト、セクションの)タイトル、見出し
  • heading … 見出し
  • lead … 見出しの補足
  • wrapper … 容器(レイアウト)
  • wrapper … 容器(レイアウト)
  • container … 容器(全体的な囲むもの)
  • desc … 概要(description)
  • detail … 詳細
  • wrapper … 概要(description)
  • desc … 概要(description)
  • feature … 特徴

BEMの基本規則

BEMではBlock、Element(Blockの外では独立で使用できない)という構成でクラス名をつけます。

<!-- Block -->
<ul class="menu">
    <!-- Element エレメントはブロックを構成する要素-->
    <li class="menu__item"><a href="" class="menu__link">アイテム1</a></li>
    <li class="menu__item"><a href="" class="menu__link">アイテム2</a></li>
    <!-- Modifier モディファイアはエレメントに対するオプション-->
    <li class="menu__item menu__item__actived"><a href="" class="menu__link">アイテム3</a></li>
</ul>

各名前はアンダースコア2つでつなぎます。

BEMの命名規則

  • ElementとModifierにはBlockの名前を含める
  • Element、Modifier、Blockに2つ以上の単語が含まれる場合、ハイフンで繋ぐ

CSSよく使う記述

カスタムプロパティの定義

@charset "UTF-8";

:root {
    --primary-color: #45CCC4;
    --red: #EB4E45;
    --blue: #0158A8;
    --bg-color: #ECFCFB;
    --text-color: #333;
    --breakpoint-sm: 576px;
}

@charset “UTF-8”;

この表記によりhtmlやcssがどの文字コードで書かれているかをブラウザが判断(文字化けを防ぐ)
→現在はブラウザ自動で判断することから、不要論もあります。

画像の大きさの最適化

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
※親要素より横幅が大きい場合のみ縮小され、
高さも自動で縮小され、歪みません

※画像の上下に余白(line-height分の余白)ができない