CSS 過去問復習

よーた


CSSエラー発生時の挙動

エラーが発生したCSSの設定は無視され、CSSのパースが継続する

HTMLもCSSもエラーが発生してもページは表示される。
反面、ミスに気づきにくくなるのでツールを使う。

スタイルシートの読み込み

スタイルシートの優先順位

  1. インラインスタイルシート

  2. 内部スタイルシート、外部スタイルシート

  3. ユーザスタイルシート
    ユーザがブラウザで使用するスタイル設定を定義したもの

セレクタによるCSSプロパティの優先順位

  1. クラスセレクタ、属性セレクタ、疑似クラス
    クラスセレクタ
    .testClass {
    font-weight: bold;
    }

属性セレクタ
属性とその値を指定する
input[type="text"] {

}

属性名の書き方)
    属性名 = "属性値"     
    属性名 ~= "属性値"
    属性名 |= "属性値"
    属性名 ^= "属性値"
    属性名 $= "属性値"
    属性名 *= "属性値"

疑似クラス
「:」 を使用して要素の状態を指定する
p:focus {
background-color: yellow;
}

:focus
:checked
:disabled
:enabled
:root
:empty
:target
:lang
:not


-childと-of-type 
　nth-childはセクション内の全ての要素を数えるので注意

:nth-child(n)
:nth-of-type(n) 

:nth-last-child(n)
:nth-last-of-type(n)

:first-child 
:first-of-type 

:last-child 
:last-of-type 

:only-child 
:only-of-type

  1. タイプセレクタ、疑似要素
    タイプセレクタ
    要素の名前を指定する
    p {
    color: green;
    }

疑似要素
「::」 を使用して、要素の一部にスタイルを適用する
要素:first-line 1行目
要素:first-letter 1文字目
要素:before cssのcontent属性の値を要素の前に配置
要素:after cssのcontent属性の値を要素の後に配置

カスケード

　　CSSには内部スタイルシートなど色々種類がある。
　　どのスタイルを適用するかを上記の優先順位を考慮に入れて決定するプロセスのこと。

　　id属性、class属性を使用しているか(重要度)、セレクタが特定的か、
　　同じくらいの特定性なら後で定義されたものが使用される

例) p要素の色は .latest つまり 青になる

p要素に直接スタイルを適用しているのは、.latestとタイプセレクタになる
クラスセレクタとタイプセレクタは、クラスセレクタの方が優先順位が高い
　よって青になる

.latest {
color: blue;
}

#new {
color: yellow;
}

p {
color: red;
}

<div id="news" style="color: green;">
<p class="latest">HTML5</p>
</div>

@規則

@import
CSSファイルに別のCSSファイルを読み込む

@media
ブラウザごとにスタイルを変える

@font-face
カスタムフォントをダウンロードし適用する

@keyframes
アニメーションを作成

@supports
ブラウザが機能をサポートしてるか確認し、スタイルを適用する

@page
印刷時のデザインを指定

@counter-style
CSSカウンタを設定

デザイン適用の例

<h2>NEWS</h2>
<ul>
<li class="specialnews">aaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ul>

li クラスspecialnewsの色を変える

  1. .クラス名で指定
    .specialnews {
    color: red;
    }

  2. li要素を指定
    li {
    color: red;
    }

  3. ul要素を指定 子クラスのliも影響する
    ul {
    color: red;
    }

  4. ユニバーサルセレクタ

  • {
    color: red;
    }

属性セレクタ

属性と属性値を指定する

属性名の書き方)

[属性名] {

}

属性名 = "属性値"　　完全一致
属性名 ~= "属性値"　単語リストの一部の一致を見つける
属性名 |= "属性値"　　指定された属性値と完全一致、
　　　　　　　　　　　または属性値で始まる
属性名 ^= "属性値"　　文頭が属性値
属性名 $= "属性値"　　文末が属性値
属性名 *= "属性値"　　属性値を含む

カスタムデータ属性
data-属性名

属性セレクタの例)

  1. 属性名
    [data-testAttr] {
    color: blue;
    }
    <p data-testAttr>[属性名]を持つ</p>

疑似クラス

「:」 を使用して要素の状態を指定する
クラスとは要素に付けたクラス名のこと

:focus     フォーカスされた要素にスタイルを適用
:checked   チェックされたチェックボックスにスタイルを適用
:disabled  無効化された要素にスタイルを適用
:enabled   有効な要素にスタイルを適用
:root      ルート要素にスタイルを適用
:empty     子要素を持たない要素にスタイルを適用
:target    アンカーリンクのターゲット要素にスタイルを適用
:lang      特定の言語属性を持つ要素にスタイルを適用
:not       指定されたセレクタに一致しない要素にスタイルを適用


:nth-child(n)    n番目の子要素にスタイルを適用
:nth-of-type(n)  同じ要素のn番目の要素にスタイルを適用

:nth-last-child(n)   最後から数えてn番目の子要素にスタイルを適用
:nth-last-of-type(n)  同じ要素の最後から数えてn番目の要素にスタイルを適用

:first-child     最初の子要素にスタイルを適用
:first-of-type   同じ要素の最初の要素にスタイルを適用

:last-child      最後の子要素にスタイルを適用
:last-of-type    同じ要素の最後の要素にスタイルを適用

:only-child      唯一の子要素にスタイルを適用
:only-of-type    同じ要素の唯一の要素にスタイルを適用

疑似要素

「::」 を使用して、要素の一部にスタイルを適用する
要素の前後などを指定する

要素:first-line    1行目
要素:first-letter  1文字目
要素:before        cssのcontent属性の値を要素の前に配置
要素:after         cssのcontent属性の値を要素の後に配置

セレクタ

拡張子の例
1)
A, B

A > B

A + B

A ~ B

以下の拡張子は使えない)
A < B
A - B>

ブロックレベルの要素

主なブロックレベルの要素:
div
canvas
form
h1
il
ul
li
p
table
video

インラインレベルの要素

主なインラインレベルの要素:
span
button
input
select
textarea
label
a
img

displayの主な値

  1. 要素をブロックレベルにする
    display: block;

  2. 要素をインラインレベルにする
    display: inline;

  3. 要素を可変ボックスにする
    display: flex;

div要素を中央寄せ

要素の左右のマージンをautoに設定
margin: 0 auto;
または、
margin-left: auto;
margin-right: auto;

autoは自動的に領域を確保する
左右ともautoなら左右均等にマージンがかかる
よって中央寄せになる

div要素に収まりきらない部分のテキストを非表示にする overflow

  1. 表示
    overflow: visible;

  2. 非表示
    overflow: hidden;

  3. スクロールバーの表示
    overflow: scroll;

CSS要素

clip 特定の部分のみ可視化する

clip: rect(上、右、下、左)

img {
position: absolute;
clip rect(10px, 250px, 250px, 0px);
}

background 背景関連

backgroundプロパティでまとめて設定できる値

  1. background-image　　　　　　背景画像を設定

  2. background-position　　　　背景画像の位置を指定

  3. background-size　　　　　　背景画像の大きさを指定

  4. background-repeat　　　　　背景画像の繰り返しを制御

  5. background-origin　　　　　背景画像の配置領域を指定

  6. background-clip　　　　　　枠線近辺の背景画像の表示方法を指定

  7. background-attachement　　背景画像がブロックと一緒の時スクロールまたは固定を指定

  8. background-color　　　　　背景色を指定

background: url(xxx.jpg) no-repat;

background-size プロパティ

  1. auto　　　　　背景画像の元の縦横比を崩さずに拡大・縮小する

  2. contain　　　トリミングや伸張なしに可能な限り背景画像を縮小・拡大する

  3. cover　　　　伸長なしに可能な限り背景画像を縮小・拡大する

  4. initial　　　初期値が設定される

  5. unset　　　　設定が解除される

borderプロパティ

borderプロパティで設定できる値

  1. border-width　枠線の幅を指定

  2. border-style　枠線のスタイルを指定

  3. border-color　枠線の色を指定

border-radius 枠線を丸める

例)
widthとheightが100pxのdiv要素を円形に表示する

border-radius: 50%;
円形になる

columnプロパティ　マルチカラムレイアウト

マルチカラムレイアウトは、多段レイアウトを実現するプロパティ

columns: 2;
要素が2列に分かれたレイアウトにできる

マルチカラムレイアウトの例:

  1. columns　　　　　　　　2)~3)のショートハンドプロパティ

  2. column-count　　　　　要素の列数を指定する

  3. column-width　　　　　要素の最小幅を指定する

  4. column-gap　　　　　　列同士の間隔を指定する

  5. column-rule　　　　　 6)~8)のショートハンドプロパティ

  6. column-rule-style 列間の線のスタイルを指定する

  7. column-rule-width　　列間の線の幅を指定する

  8. column-rule-color　　列間の線の色を指定する

  9. column-span　　　　　全ての列にまたがる要素かどうかを指定する

HTMLの要素を非表示にするCSSプロパティの設定例

  1. opacity: 0;
    0~1で設定する
    0に近づくほど透明

  2. visibility: hidden;

  3. display: none;

上記の方法で非表示にしたとき、
それまでHTML要素が占めていたスペースは、
-> opacity, visibility を使用の場合は「確保されたまま」
-> display を使用の場合はスペースは「詰められる」

メモ: display: none　のみスペースが詰められる
        他のは見えなくしただけだから?

  1. color: rgba(0, 255, 0, 0);
    rgbaのaチャネルを「0」にすると透過する

z-index 要素の重なり順

以下のように要素の重なり順を決める

要素1 {
z-index: 1;
}

要素2 {
z-index: 2;
}

可変ボックスにおいてflexアイテムの配置を設定する

可変ボックスとは、様々なディスプレイサイズに適応するためのレイアウトモードの1つ
可変ボックスの特徴:

  1. 水平、垂直方向に要素を並べることが出来る

  2. HTMLの記述順にとらわれず、要素を並べることが出来る

  3. 要素の大きさを変更できる

flexコンテナはflexアイテムの入れ物
flexコンテナの作り方:
以下のいずれか

  1. display: flex;

  2. display: inline-flex;

  3. justify-contentプロパティ
    フレックスアイテムの配置を制御する

  4. flex-direction
    主軸の方向を設定する

  5. flex-basis
    flexアイテムのサイズを設定する

colorプロパティ

colorプロパティの書式:

  1. color: 色名;

  2. color: #rrggbb ;

  3. color: rbg(r, g, b);

  4. color: rgba(r, g, b, a);

  5. color: hsl(色相、彩度、輝度);

  6. color: hsla(色相、彩度、輝度、a);

0, 255, 255
と3つの数字だけではだめ

transformプロパティ

translateプロパティは、要素を移動、回転、拡大、縮小、傾斜させる
設定値:

  1. translate　要素を移動

  2. rotate　　　要素を回転させる

  3. scale　　　要素を拡大、縮小する

  4. skew　　　　要素を傾斜する

  • transform-origin
    ボックスを回転させるときの原点を指定

右横に90度回転
transform-origin: right bottom;
transform: rotate(90deg);

transitionプロパティ

CSSプロパティの変化速度を制御することでアニメーションのような効果を出せる。

transitionプロパティは変化速度を制御する
トランジション関連のプロパティの値をまとめて指定する

トランジションを適用するのに使うプロパティ:

  1. transition

  2. transition-property

torannsition関連のプロパティ:

  1. transition-duration
    トランジション実行時に、どれだけの時間をかけるか指定

  2. transition-timing-function
    表示を変化させるときに、どういうパターンで速度に変化をつけるか指定

  3. transition-delay
    トランジションの開始を遅らせる

  4. transition-property
    トランジションに適用するプロパティ名を指定する

animationプロパティ

  1. animetion
    @keyframesで定義したアニメーションを要素に適用する
    アニメーション関連のプロパティの値をまとめて指定できる

  2. animetion-name
    キーフレームを名前で指定して実行させる

  3. animetion-duration
    アニメーションの再生時間を設定

  4. animetion-timing-function
    アニメーションの再生速度の変化パターンを指定

  5. animetion-delay
    アニメーション再生の開始を遅らせる

  6. animetion-iteration-count
    アニメーションを何回繰り返して再生させるか設定

  7. animetion-direction
    再生の際に、逆再生させるか等を指定

  8. animetion-play-state
    アニメーションを一時停止させる

  9. animetion-fill-mode
    再生の開始が遅延されている間の表示、再生終了後の表示を指定

例)
from {
margin-left: 0%;
}

to {
margin-left: 100%;
}

animation-name: fadeout;
animation-duration: 3s;　　　　　3秒かけてアニメーションが実行される
animation-fill-mode: forwards; img要素は右側に異動し、透過する
animation-iteration-count: 2;　　アニメーションが2回繰り返される
animation-delay: 1s;　　　　　　　1秒経過してからアニメーションが開始する

Webフォント

webフォントの特徴

  1. @font-face規則でフォントのファイルを指定する

  2. 複数のフォントフォーマットがある

  3. @font-face規則で読み込んだフォントをfont-familyプロパティで指定する

  4. 英語だけでなく日本語もある

リスト関連のプロパティ

list-styleプロパティでまとめて指定できるプロパティ

  1. list-style-type

  2. list-style-image

  3. list-style-position

  4. list-style

list-style-type 設定できる値

disc 塗りつぶされた円形
circle 塗りつぶされてない円形
decimal 1から始まる数字
upper-roman　大文字のローマ字
upper-latin　大文字のアルファベット
lower-greek　小文字のギリシャ文字

テーブル関連のプロパティ

プロパティ名:

  1. caption-side
    キャプションを「表の上または下」に表示する

  2. border-collapse
    隣接するセルの枠線をつなげるか、切り離すかを設定する

  3. border-spacing
    隣接するセルのボーダー同士の間隔を設定

  4. empty-cells
    空のセルの背景とボーダーを表示させるかを設定

box-shadowプロパティ

box-shadowプロパティ
1つ目　　影のx軸の方向
2つ目　　影のy軸の方向
3つ目　　影のぼかし指定
4つ目　　影の拡大指定
inset　　影を内側に付ける

linear-gradient関数 radial-gradient関数

この２つの関数はbackground-imageプロパティの値として使用する

linear-gradient関数
直線的にグラデーションを付ける

radial-gradient関数
円形にグラデーションをかける

  1. 90deg 左から右
    左から右にかけて青から赤に変わる
    linear-gradient(90deg, blue, red);

  2. 中心部が青、外ぶちにかけて円形に赤になる
    radial-gradient(blue 0%, red 100%);

CSSカウンタ

counter-reset
counter-increment
content: counter(変数)

::before
::after
などの疑似要素も合わせて使う

body {
counter-reset: 変数;
}

要素::before {
counter-increment: 変数;
content: counter(変数) "章";
}

<style type="text/css">
body {
counter-reset: number;
}
p:before {
counter-increment: number;
content: "番号"counter(number)": ";
}
</style>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>

テキスト関連のプロパティ

主なプロパティ

  1. text-transform　　テキストの大文字・小文字表記方法を指定

  2. white-space　　　　空白文字の扱い方を指定

  3. word-break　　　　　改行方法を指定

  4. hyphens　　　　　　　ハイフンを設定

  5. text-aligg　　　　　テキストの寄せ方を指定

  6. word-spacing　　　　単語間のスペースを指定

  7. letter-spacing　　　文字間のスペースを指定

  8. text-indent　　　　先頭行のインデントを指定

font

fontプロパティで指定できる値:

  1. font-style

  2. font-variant フォントをスモールキャップ(小文字と同じ高さの大文字)に切り替える

  3. font-weight

  4. font-size

  5. font-height

  6. font-family

font-family

特徴:

  1. フォントファミリ名にスペースが含まれる場合、クォーテーションで囲む

  2. ブラウザごとに既定のフォントファミリが異なる

font-sizeプロパティ

  1. フォントサイズを指定する

xx-small
x-small
small
medium
large
x-large
xx-large

  1. 親要素のフォントサイズと比較して、小さく・大きくする
    smaller
    larger

  2. ピクセル単位の絶対値でフォントサイズを指定する
    px

  3. 親要素のフォントサイズと比較して、フォントサイズを指定する
    %
    em

  4. html要素のフォントサイズと比較して、フォントサイズを指定する
    rem

例) html要素のフォントサイズと比較して、フォントサイズを1.2倍にする
font-size: 1.2rem;

font-weightプロパティ

font-styleプロパティ

例) フォントをイタリックかつ太字にする
font-weight: bold;
font-style: italic;

text-decoraitonプロパティ

プロパティ:

  1. text-decoration-line　　
    装飾線の種類を指定
    underline 下線
    overline　上線
    line-through　打消し線

  2. text-decoration-style　　
    text-decoration-lineの線のスタイル
    solid　　実線
    double　　二重線
    dotted　点線
    wavy　　波線

  3. text-decoration-color
    装飾線の色

directionプロパティ unicode-bidiプロパティ テキストの方向を指定

これらは一緒に使う。

direction: rtl　右から左
direction: ltr　左から右
unicode-bidi: bidi-override;
directionプロパティで指定した方向にテキストの方向が変わる

.directionP {
direction: rtl;
unicode-bidi: bidi-override;
}

<p class="directionP">テキスト</p>

プロパティの組み合わせ

  1. text-shadow
    テキストに影を付ける

  2. line-height
    テキストの高さを指定する

  3. vertical-align
    縦法以降の整列方法を設定する

CSS実装の例

HTML要素が占める幅を計算

計算に使うプロパティ:

  1. width

  2. padding

  3. margin

  4. border

  5. box-sizing

幅の計算:
基本的に、
width + 左右のpadding + 左右のborder + 左右のmargin

ただし、box-sizing: border-box
はコンテンツのwidthとheightは、「padding」と「border」の数を含む

例1)
.box {
width: 250px;
padding: 2px;
border: solid black 1px;
margin: 5px;
box-sizing: border-box;
}

上記はwidth: 250pxになっているが、
左右のpaddingと左右のborderを含む

よって、250px = (2+2) - (1+1)
            = 244px
        実際のwidth: 244px となる


244px + 左右のpadding + 左右のborder + 左右のmargin
244 + (2+2) + (1+1) + (5+5)
= 244 + 4 + 2 + 10
= 260px

例2)
.box {
width: 250px;
padding: 2px;
border: solid black 1px;
margin: 5px;
}

幅の計算
250px + 左右のpadding + 左右のmargin + 左右のborder
= 250 + (2+2) + (5+5) + (1+1)
= 250 + 4 + 10 + 2
= 266px

CSSの要素 pxの設定

  1. 上下左右　
    margin: 10px;

  2. 上下　左右
    margin: 10px 20px;

  3. 上　左右　下
    margin: 10px 20px 30px;

  4. 上　右　下　左(時計回り)
    margin: 10px 20px 30px 40px;

例)
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;

↓
padding: 10px 20px 10px 20px;
padding: 10px 20px;
padding: 10px 20px 10px;

autoを設定すると、マージンを自動的に設定する
例) divを中央寄せにするmarginの値(要素の左右のマージンを0にする)
margin: 0 auto;

section要素を横並び

これは
float: left;
clear: both;
を使う。

floatプロパティはHTMLの要素を左右に回り込ませる
これを設定するとそれ以降の要素は回り込み続ける

なので、clear: both を使う
左右どちらの回り込みも解除できる

<div class="wrap clearfix">
<section>A</section>
<section>B</section>
</div>

.wrap > section {
width: 300px;
margin: 10px 20px;
border: 3px solid black;
border-radius: 3px;
text-align: center;
float: left;
}

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

column-spanプロパティ

h2のみ列内に含めないようにする

column-spanプロパティ
全ての列をまたぐ要素かどうかを指定する

  1. 列をまたぐ要素を設定
    column-span: all;

  2. 列をまたがない要素を設定
    column-span: none;

例)
.multi {
columns: 2 300px;
}

.multi > h2 {
    column-span: all;
}


<div class="multi">
    <h2>aaaaaaaaaaaaaaaaaaaaaa</h2>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    bnbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    fffffffffffffffffff
</div>

カスケードの例) 最終的にp要素に適用されるスタイル

p要素に適用されるスタイル

  1. color: red;

  2. font-size: 1.2em;

メモ: paddingやmarginなどボックスモデルのプロパティは子要素に引き継がれない

<div style="color: red; fint-size: 1.2em; padding: 10px; border: solid 1px black;">
<p>aaaaaaaaaaaaaaa</p>
</div>

最も優先順位が高いCSSプロパティ

クラスセレクタとかが何個あるかとかそういう基準で決まる

例1)
この中では、li:hover h2 .title　が優先順位が高い

.new > a.hover
li:hover h2 .title
.sp > a
.sp .capture h1
.basic li > span

この中ではクラスセレクタと疑似クラスが一番優先順位が高いセレクタになっている

例2)
この中ではIDセレクタが一番優先順位が高い
#cat .tail img
はその中でも IDセレクタ、クラスセレクタ、タイプセレクタがある
なので一番優先順位が高い

li:hover h1 .title
.sp .capture h1
.main h2 > span
#cat .tail img
#doc div > img

この記事が気に入ったらサポートをしてみませんか？