Zenn
🙆‍♀️

精神と時の部屋日記3 | CSSチュートリアル

2023/03/09に公開
CSS
tech

チュートリアル

CSSとは何か

  • 目的:CSSとは何かを知るCascading Style Sheets

CSSの目的

  • 文書表現指定

CSSの構文

  • セレクター | {} | 中括弧内に宣言プロパティと値
    ex)
h1 {
  color: red;
  font-size: 5em;
}
  • プロパティ毎に許容値をもつ。大きさの単位が異なる
    一覧

CSS入門

  • 目的:CSSとHTMLのリンクのさせ方を知る

HTMLから始めよう

  • style.cssに記述するCSSを以下のlinkでindex.htmlにリンクする
<link rel="stylesheet" href="styles.css">
  • セレクタごとにCSSを適用できる複数も可
  • class属性を用いて一部のみ変更可
  • ピリオドから始まるセレクタを用いる
    ex)
.special {
  color: orange;
  font-weight: bold;
}

<ul>
  <li>Item one</li>
  <li class="special">二つ目の項目</li>
  <li><em>三つ目</em>の項目</li>
</ul>
  • 要素セレクタ+クラスセレクタはxクラスを持っているy要素へ焦点を当てる的な意味
  • x要素の中にあるy要素を選択 x y {}
  • 隣接兄弟結合子 直前の要素 + 対象の要素 { <em>スタイルプロパティ</em> }
  • 状態スタイル 開く前はリンクがピンク、開いた後は緑に　ホバー
a:link {
  color: pink;
}

a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}

CSSの全体像

  • 目的:構造理解

CSSをHTMLに適用

  • 外部、内部スタイルシート　インラインスタイル
  • 外部スタイルシート: .css拡張子のファイルがあるとき
<link rel="stylesheet" href="styles.css">
  • linkのhref属性は参照のパス
<!-- 現在のディレクトリーの中の styles というサブディレクトリーの中 -->
<link rel="stylesheet" href="styles/style.css">

<!-- カレントディレクトリーの中にある styles というサブディレクトリーの中にある、 general というサブディレクトリーの中 -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- ひとつ上のレベルのディレクトリーに行き、その下にある styles というサブディレクトリーの中 -->
<link rel="stylesheet" href="../styles/style.css">
  • 内部スタイルシート:HTML内にあるやつstyle要素
  • インラインスタイル:単一の要素にstyle属性ぶち込む
  • カスケード規則:うしろ宣言が強い
  • 詳細度:クラスと要素セレクターではクラスが強い

プロパティと値

  • プロパティ:スタイルの特徴を示す
  • 値:プロパティの値
  • 区切りはコロン：　大文字小文字区別する

関数

  • calc()関数などがある 数式を行う
  • 例
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

アット規則

  • 指示だし。
  • 例
@import 'styles2.css'
  • スタイルシートを別のスタイルシートにインポート
  • @media　はメディアクエリを作成されるために使われる。
@media(min-width: 30em) {
 body {
  background-color: blue;
  }
}
  • ビューポイント(表示されるもの)が30emより広い時青い背景定義

一括指定

  • 複数の値を一行で設定するプロパティ 以下2つのコードは同じ
padding: 10px 15px 15 px 5px;

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

コメント

  • /* */で囲む

ホワイトスペース

  • プロパティ名　値　には使えない。

CSSはどう働くか

  • 目的:ブラウザがCSSとHTMLを解析する方法と解釈できない時何が起こるか理解する

CSSはどう機能する

  1. ブラウザがhtmlをロードする
  2. htmlがdom document object modelに変換される domはメモリ内のドキュメント
  3. 画像やビデオなどのhtmlにリンクされているリソースとcssを取得する　jsはもう少し後に処理される
  4. ブラウザは取得したcssを解析し、要素、クラス、idなどセレクタの種類ごとに分類する。セレクタに基づいてdomのどのノードにどのルールを適用するかを決定し、スタイルを適用する。レンダーツリーと呼ばれる
  5. レンダーツリーはルール適用後の構造にレイアウトされる。
  6. ページが表示される。

DOMについて

  • dom,document object modelはツリーのような構造になっている。マークアップの各要素、属性、テキストはdomノード。DOMはCSSとドキュメントのコンテンツが出会う場所。

DOMはどんな感じ

  • htmlがある
<p>
let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
  • この場合DOMではp要素が親ノード子にはテキストノードと3つのspan要素をノードとしてもつ。また、spanは親でもあり、テキストを子とする
P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
  • ブラウザはDOMツリーをレンダリングし出力する。レンダリングは表示するためにコンピュータが翻訳的な

DOMへのCSS適用

  • ドキュメントにCSSを追加して、スタイルを設定する
<p>
let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>

span{
 border: 1px solid black;
 background-color: lime;
 }
  • ブラウザはhtml解析でDOMを作成したのちにCSSを解析する。CSSにはspanセレクタしかないため迅速にソートできる。3つのspanにルール適用しペイントする

ブラウザが解釈できないCSSに遭遇したら？

  • 無視して次に行く。
  • スペルミスやプロパティが新しくてブラウザが対応できない場合

レイアウト入門

  • 目的:cssレイアウトの概要を知る。
  • レイアウトで要素の位置を制御する。

通常フロー

  • ブラウザがデフォでhtmlをレイアウトする
  • 上下に並んで表示される要素はブロック要素
  • 横に並んでるのはインライン要素
  • ブロック方向:ブロック要素のコンテンツがレイアウトされる方向英語などでは垂直に日本語では水平に。対応するインライン方向はインラインコンテンツが走る方向です。
  • display：block, inline, inline-blockなどの標準値は、要素が通常フローでどのようになるかを変更できる。gridやflexのようにレイアウト方法全体もある。
  • float:要素の片側に沿ってブロックレベル要素が折り返される。
  • position:他のボックス内のボックスの配置を正確に制御　static位置指定がデフォルト
  • 表レイアウト:html表の一部をスタイルするために設計された display: tableなどを使う
  • 段組みレイアウト:新聞のようにコンテンツを段組にレイアウト

displayプロパティ

  • 要素をブロック要素とインライン要素のどちらとして扱うか、子要素のために使用されるレイアウト。
  • displayは要素の内側と外側の表示種別を設定する。
  • 外側の型は要素のフローレイアウトを
  • 内側の型は子要素のレイアウトを設定
/* 旧来の値 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* ボックスの生成 */
display: none;
display: contents;

/* 2 値の構文 */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* その他の値 */
display: table;
display: table-row; /* すべての表の要素が同等の CSS display 値を持っています */
display: list-item;

/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: unset;

外側

  • display-outside: 要素のフローレイアウトにおける役割を表す
  • block: ブロック要素のボックスを作成し、要素の前後で改行を生成
  • inline:　地震の前後に改行を生成しない。1つ以上のインライン要素ボックスを生成する

内側

  • display-inside: 要素の内容物をレイアウトする整形コンテキストの種類を定義
  • flow:

Discussion