blog

CSSの概要

leftとrightのレイアウトは、子要素でfloatを設定し、親要素でclearfixクラスを使ってfloatをクリアするのが一般的です。サンプルコードは以下の通りです: 親要素に set; 子要素...

Feb 2, 2020 · 12 min. read
シェア

ブラウザレンダリングの原則

ブラウザのレンダリング処理

  1. HTMLからHTMLツリーを構築
  2. CSSからCSSツリーを構築
  3. 2つのツリーを1つのレンダリングツリーに結合
  4. layout
  5. Paint
  6. compose

CSSのレンダリング処理は、「レイアウト」→「描画」→「合成」で構成され、「レイアウト」と「描画」は省略することができます。 CSSトリガー このサイトでは、タグによってどのような処理が行われるかを見ていきます。

CSS

1.CSSとは何ですか？

CSS: Cascading Style sheet（カスケーディング・スタイル・シート）は、ページの外観を制御するスタイリング・ルールの一種です。

2.なぜCSSを使うのですか？

コンテンツとスタイルの分離を実現し、便利なチーム開発スタイルの再利用は、後でページの正確な制御を維持するためにサイトを簡単に。

3.CSSの役割

ページの外観、レイアウト、配置

基本的な使い方

1.CSS構文

selector: 変更するオブジェクト style name: 変更するオブジェクトの各スタイル style value: スタイルの値

注：複数のスタイルはセミコロンで区切られ、スタイル名と値はコロンで区切られます。

2.CSSリファレンス

内部スタイル、インラインスタイル、外部スタイルです。

2.1 内部スタイル

インライン・スタイルとも呼ばれ、ページのヘッダーでスタイル・タグによって定義され、現在のページのスタイル・セレクタに一致するすべてのタグで機能します。

2.2 インラインスタイル

埋め込みスタイルとしても知られ、HTMLタグのstyle属性を使って定義され、style属性が設定されたタグにのみ機能します。

2.3 外部スタイル

別のcssファイルを使って定義し、linkタグや@importディレクティブを使ってページに導入します。 linkタグを使って外部スタイルシートへリンクします。

セレクタ

基本セレクタ

1.1 ラベルセレクター

要素セレクタとしても知られ、HTMLタグの名前に基づいてスタイルを適用します。

1.2 クラス・セレクタ

をプレフィックスとするカスタム名を使用します。を接頭辞として、HTMLタグのclass属性の値で指定します。

注意事項

複数のクラス・セレクタを空白で区切って同時に呼び出します。

1.3 IDセレクタ

カスタム名の先頭に#を付け、HTMLタグのid属性でその名前と一致させます。 タグのid属性の値を1対1の関係でスタイルを適用する基準とします。

注：ほとんどすべてのHTMLタグはid属性を持っており、idの値は一意でなければなりません。

複雑なセレクタ

2.1 コンポジット・セレクター

ラベルセレクタとクラスセレクタ、ラベルセレクタとIDセレクタの併用

スタイルが適用されるには、次の両方の条件が満たされる必要があります。

2.2 コンビネーション・セレクター

集団宣言とも呼ばれます

同じスタイルを持つ複数のセレクタをカンマ区切りでまとめて宣言します。

2.3 入れ子のセレクタ

空白で区切られたセレクタ内のセレクタの設定

階層の最も内側のセレクタを満たすタグのみがスタイルを適用できます。

注：空白の使用は親子と子孫を区別せず、子孫を表します；>の使用は親子関係のみを表します。

2.4 擬似クラス・セレクタ

異なる状態によると、一般的にタグ、つまりハイパーリンクで使用される、異なるスタイルを表示します。

4つの州

link :未訪問リンク visited :訪問リンク hover :マウスをタグの上に置く、つまりリンクの上にカーソルを置く active :選択されたリンク、有効化

注：書き順：リンク->訪問->ホバー->アクティブ

2.5 疑似要素セレクタ

first-letter: 対応する要素の内容の最初の文字。

first-line: 対応する要素の内容の最初の行。

after: content属性と組み合わせて使用し、指定した要素の後にコンテンツを追加します。

before: content属性と組み合わせて使用し、指定した要素の前に内容を追加します。

セレクタの優先順位

優先度

インラインスタイル > IDセレクタ > クラスセレクタ > ラベルセレクタ

理由：まずタグセレクタを読み込み、次にクラスセレクタを読み込み、次にIDセレクタを読み込み、最後にインラインスタイルを読み込みます。

後から読み込まれたスタイルは、先に読み込まれた同名のスタイルを上書きします。

内部および外部様式ローディングの順序

近接原理

理由:書き順に従って、同じ優先順位の場合、先に読み込まれた同じ名前のスタイルよりも後に読み込まれたスタイルが優先されるため、近いほど優先順位が高くなります。

!important

スタイル属性は、!

一般的なCSSスタイル・プロパティ

フォントのプロパティ

フォント関連スタイルの定義

font-size

価値観。

inherit、デフォルトのフォントサイズは親タグから継承されます、すべてのcss属性のデフォルト値はinheritです HTMLルート要素のデフォルトのフォントサイズは16pxで、ベースフォントサイズとしても知られています。

px: pixel ピクセル、chromeは12px以下のフォントサイズに対応していません、他のブラウザは問題ありません %percentage: 親タグに対するフォントサイズのパーセンテージ em times: 親タグに対するフォントサイズの倍数

font-weight

価値観。

ノーマル ノーマル ボールド ボールド カスタム値

font-family

通常、3つのフォントをカンマで区切って記述することをお勧めします。

font-style

価値観。

normal italic

font

テキスト属性

カラーバリュー：4つの書き方

  1. 英単語を使った色の名前

  2. 16プログレッシブRGB，#RRGGBB

#CCCCCC----->#ccc
#FF0000----->#F00
#FF7300----->省略できない
注意:大文字と小文字を区別しない
  1. rgb ，rgb(red,green,blue)
各色の値の範囲，[0-255]
rgb(255,0,0)----> 
rgb(0,255,0)----> 
rgb(0,0,255)---->
  1. rgba :rgba(red,green,blue,alpha)
透明度、アルファ範囲を設定できる。[0,1],0は完全に透明、1は完全に不透明を意味する。
rgba(255,0,0,1);-----> 
rgba(255,0,0,0.5);----->赤い半透明

背景プロパティ

3.1 背景色

:transparent(

3.2 背景イメージ

url() を使用してイメージのパスを指定する必要があります。 css ファイルで相対パスを使用した場合、html ファイルではなく css ファイルからの相対パスになります。

3.3 background-repeat

:repeat(デフォルト), no-repeat, repeat-y, repeat-x

background-position

デフォルトの背景イメージは左上に表示されます。

価値観。

キーワード 上, 下, 左, 右, 中央 座標, 左上座標, x-正方向は右, y-正方向は下 CSSスプライト、またはCSSスプライトとも呼ばれるCSSイメージマージ技術です 意味：ページを訪問したときに、1つの大きなイメージに多くの非常に小さなアイコン/イメージを持つWebページを統合するために一度だけダウンロードする必要があり、サーバーへの訪問回数を減らすことができ、パフォーマンスを向上させます。

原則：background-positionを使って背景イメージを配置します。

background-attachment

値:スクロール(デフォルト),固定

background

プロパティの省略:background:background-color|background-image|background-repeat|background-position

書く順番は問いません。

関連する表示

display

display属性は、要素を表示するかしないか、1行に限定するかしないかを設定します。

共通の価値観。

none 表示なし
inline インライン要素として表示、行レベル要素のデフォルト値 ブロックレベル要素を、1行を占有しない行レベル要素に変換します。
block ブロック-レベル要素として表示され、ブロック-レベル要素のデフォルト値 行レベル要素を、1行を占めるブロックレベル要素に変換します。
inline-block インライン要素として表示されますが、幅と高さを設定できます。 インラインの上に幅と高さを設定

注意: デフォルトでは、行レベル要素はその幅と高さを設定できません。 行レベル要素にdisplay:inline-blockを設定すると、その幅と高さを設定できるようになります。

レイアウトのヒント

左右レイアウト

以下のようなhtml構造の場合、左カラムと右カラムのレイアウトを設定します。

<div class="parent clearfix">
 <div class="leftChild"></div>
 <div class="rightChild"></div>
</div>
フロートの設定

左右のレイアウトは、子要素で float を設定し、親要素で clearfix クラスを使用して float をクリアするのが一般的です。サンプルコードは以下の通りです：

.clearfix::after{
 content:"";
 display:block;
 clear:both;
}
.leftChild,
.rightChild{
 float:left;
}
絶対位置を設定

親要素にはposition:relativeを、子要素にはposition:absoluteを設定します。サンプルコードは以下の通りです：

.parent{
 position:relative;
}
.leftChild{
 position:absolute;
 left:0;
 top:0;
}
.rightChild{
 position:absolute;
 left:50%;
 top:0;
}
左中右レイアウト

メインメソッドの左・中央・右のレイアウトも、フローティングまたは絶対配置ですが、どちらかを選択することもできますし、状況を組み合わせて使用することもできます。

水平中心

インライン要素 ブロック-レベル親コンテナ内のインライン要素を水平方向にセンタリングするには、単に text-align: center を設定します；

ブロック-レベル要素 1つのブロック-レベル要素を水平方向にセンタリングする方法：まずブロック-レベル要素の幅を設定して幅を与え、次にブロック-レベル要素のマージン：0 autoを設定します。

複数のブロック-レベル要素 複数のブロック-レベル要素を同じ水平線の中央に配置したい場合は、それらのdisplay: inline-block;または親コンテナのdisplay: flex;を変更します。

<main class="inline-block-horizon-center">
 <div>I'm an element</div>
 <div>I'm an element</div>
 <div>I'm an element</div>
</main>
<main class="flex-horizon-center">
 <div>I'm an element</div>
 <div>I'm an element</div>
 <div>I'm an element</div>
</main>
/* CSS */
*{box-sizing: border-box;}
main div {
 max-width: 200px;
 border: 1px solid red;
}
.inline-block-horizon-center {
 text-align: center;
}
.inline-block-horizon-center div {
 display: inline-block;
 vertical-align: middle/top;
}
.flex-horizon-center {
 display: flex;
 justify-content: center;
 flex-wrap:wrap;
} 
.flex-horizon-center div{
 margin:0 20px;
 white-space:nowrap;
}

visibility

visibility属性を使うことで、要素を表示するかどうかを設定することもできます。

共通の価値観。

visible 表示
hidden 隠す

diplay & visibility 2つの違い

displayがhiddenの場合、ページ上のスペースは占有しませんが、背後の要素は占有します。 visibilityがhiddenの場合、ページ上のスペースは占有しますが、その位置はページ上に残り、表示されないだけです。

リストのプロパティ

list-style-type

値：なし、円板、円、四角、10進数

list-style

書く順番は問いません。

テーブルのプロパティ

border-collapse テーブル内の隣接するボーダーを単一のボーダーに統合するかどうか。

値：seperate、default、collapse。

ボックスモデル

1.コンセプト

ボックス・モデルはウェブ・ページ・レイアウトの基本で、ページ上のすべての要素をボックスと見なし、すべてのボックスは以下の属性を含んでいます。

width  
height  
border  
padding  
margin

ボックスのプロパティ

border

ボックスの境界線

方向性は4つ。

border-topデフォルト: border-right, border-bottom, border-left

各エッジには次の3つのスタイルがあります。

色、太さ、スタイル

border-top-colorデフォルト: border-top-width, border-top-style
border-right-colorデフォルト：border-right-width, border-right-style
border-bottom-colorデフォルト: border-bottom-width, border-bottom-style
border-left-colorデフォルト: border-left-width, border-left-style

border-style :

#### 略語、3通り。

方向別略語

border-topデフォルト: border-right, border-bottom, border-left

書き順：幅スタイル色

スタイル別略語

border-colorデフォルト：border-style, border-width

時計回りの方向、つまり上、右、下、左で書かなければなりません。

border-width:2px -->全辺2px
border-width:2px 4px -->上下2ピクセル、左右4ピクセル
border-width:2px 5px 10px -->上2px、左5px、右5px、下10px。
border-width:2px 3px 4px 5px -->2px 上 3px 右 4px 下 5px 左

border究極の省略

四辺が同じ場合、border:width スタイルの色

2.2 パディング

は、ボックスの内側の余白、すなわち、コンテンツとボーダーの間の距離を表します。また、4つの方向に分割され、次のように省略することもできます。

2.3 マージン

はボックスの外側の余白、つまりボックスとボックスの間の距離を表します。

3 その他

3.1 エレメントが占めるスペース

CSS transform

transform プロパティを使うと、指定した要素を回転、拡大縮小、傾き、またはパンすることができます。これは、CSSビジュアルフォーマットモデルの座標空間を変更することによって行われます。

transform 共通機能

  • transform: translate(120px, 50%); //
  • transform: scale(2, 0.5); //スケールを小さくするとぼやけます。
  • transform: rotate(0.5turn);
  • transform: skew(30deg, 20deg);

transform

  • 移行に必要なディスクは1枚
  • インライン要素はトランスフォームに対応していないため、まずブロックに変換する必要があります。

デモを絶対的に中心に据えてください：

#deomo{
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}

CSSアニメーションへの2つのアプローチ

transition

追加中間フレーム

  • 過度の緩和 遅延
  • transition all 1s デフォルトは ease-in-out ms ms。

transition

共通の価値観。

  • リニアアニメーションは、一定の速度で初期状態から終了状態へと遷移します。ease アニメーションは、最初は速く加速しますが、途中から遅くなります。ease-in アニメーションはゆっくりと始まり、最終状態に達するまで徐々にスピードアップし、そこでアニメーションは突然停止します。ease-out アニメーションは速く始まり、最終状態に達するまで徐々に遅くなります。ease-in-out このタイミング関数では、アニメーションの開始時の動作は ease-in 関数と似ており、アニメーションの終了時の動作は ease-out 関数と似ています。

一般的ではありません。

  • step-start このタイマーを使うと、アニメーションはすぐに終了状態にジャンプし、アニメーションが終わるまで終了状態に留まります。step-end この関数を使うと、アニメーションはすぐに終了状態にジャンプし、アニメーションが終わるまで終了状態に留まります。cubic-bezier cubic-bezier, これらの曲線は連続的で、一般にアニメーションのスムージング変換に使用されます。

transition: left 200ms linear transition: left 200ms , top 400ms; transition: all 200ms;

銘記

  • すべての属性をオーバーライドできるわけではありません。
  • visibility:hidden=>visibleでも同じ効果があります。
  • 背景色はやりすぎに注意
  • トランジションには開始が必要です。途中にトランジションがある場合は、 アニメーションか 2xtransformを使用してください過剰モード:

animation アニメーション

animation 使用します。

@keyframes xxx{
 from{
 transform:translateX(0%)
 }
 to{
 transform:translateX(100%)
 }
}

@keyframes xxx{
 0% { top:0; left:0; }
 30% { top:50px; }
 100% { left:100px; }
}

キーフレームを設定した後、animationプロパティを設定できます。animationも適合プロパティで、以下の構文で省略できます：

アニメーション: アニメーション名 | 継続時間 | トランジション | ディレイ | 回数 | 方向 | 塗りつぶしモード | 一時停止の有無

  • :1s または 10000ms
  • 持続時間：1秒または10000ミリ秒
  • : 3 .4 または無限
  • 回数：3回または2.4回または無限回
  • 一時停止するかどうか: paused | running
  • 一時停止の有無：一時停止中
Read next

LeetCode 104. バイナリツリーの最大深度｜Python

104. 二分木の最大深度 二分木が与えられたとき、その最大深度を求めなさい。 二分木の深さとは、ルートノードから最も遠いリーフノードまでの最長経路上のノードの数。 注意：葉ノードとは，子を持たないノードのことです． この問題では，2分木の深さはルート・ノードから最も遠いリーフ・ノードまでの最長経路上のノードの数であることが示唆されています．ここで、再帰的探索と幅優先探索の考え方を...

Feb 2, 2020 · 3 min read

クロスエントロピーのコスト関数に関する見解

Feb 1, 2020 · 16 min read

JSの世界とメモリー

Feb 1, 2020 · 3 min read

JavaScriptのパラメータ・パス

Feb 1, 2020 · 1 min read

ReactにおけるPureComponentとmemoの浅い比較

Jan 31, 2020 · 3 min read

レスポンシブ・レイアウトの新しいソリューション - フュージョン・レスポンシブ・デザイン

Jan 31, 2020 · 9 min read