目次
| 基本 | セレクタ | 文字/文章 |
| 幅と高さ/ボーダー | レイアウト | 背景/デザイン |
| BootStrap | ||
| HTML | HTML応用 | HTML5 |
基本
- CSSの書き方とコメント
- CSSを記述する場所のサンプル
- CSS セレクタの一覧とIDセレクタとクラスセレクタ
- CSS セレクタの優先順位(!important)
- CSS 継承のサンプル(inherit)
- CSS ボックスモデルの構造
- CSS pxとemとremの違い(長さの単位)
- CSS ブロックレベル要素とインライン要素
- CSSで変数を使うサンプル
- CSSとjs idに数値を指定する場合(エスケープ)
- CSSとSassの違い
セレクタ
| 複数のセレクタを指定する/絞り込む | カンマ区切り、空白区切り、区切り文字なし、属性セレクタ、疑似クラス、疑似要素 |
| 階層構造でセレクタを指定(子孫/兄弟) | 空白区切り、>、+、~ |
属性セレクタ
| 属性セレクタ | 要素名[属性名="値"] |
擬似クラス
| 画面に動きをつける | :link、:visited、:hover、:active、:focus、:target、:lang、:enabled、:disabled、:checked |
| 奇数/偶数/指定行にCSSを適用 | nth-child、last-child、nth-last-child、empty、first-line、first-letter |
| notで特定の要素にCSSを適用しない(否定) | :not |
疑似要素
| 仮想的な要素 | ::before、::after |
文字/文章
- CSS color 文字の色を変更する
- CSS font-size 文字の大きさを変更する
- CSS font-family フォントを指定する
- CSS text-align 文字を左寄せ/右寄せにする
- CSS vertical-align 垂直の位置を指定する
- CSS line-height 行の高さを指定する
- CSS letter-spacing 文字の間隔を指定する
- CSS word-spaceing 英文の単語の間隔を指定する
- CSS overflow-wrap/word-wrap 単語の改行
- CSS overflow はみ出し部分を表示する/しない
- CSS word-break 単語の改行方法を指定
- CSS text-overflow 列幅超過時の文末(ドット３つ...)
- CSS white-space 改行するしない/空白まとめる
- CSS text-decoration 文字に線を引く/打ち消し線
- CSS font-weight 文字の太さを指定する
- CSS font-style 文字を斜体にする
- CSS text-indent 文章にインデントを設定する
- CSS list-style-type リスト項目のデザインを指定
幅と高さ/ボーダー
- CSS width 幅を指定するサンプル
- CSS height 高さを指定するサンプル
- CSS max-width 最大の幅を指定する
- CSS min-width 最小の幅を指定する
- CSS box-sizing paddingとborderの表示方法
- CSS padding 要素の内側の余白を指定する
- CSS margin 外側の余白/中央・右に寄せる
- CSS border-collapse テーブルの枠線を重ねる/離す
- CSS border-spacing テーブルの枠線の間隔を指定
- CSS border 線を引く/消す,線の種類を指定
- CSS table-layout テーブル列幅の設定を指定
- CSS @media メディアクエリで幅に応じてCSS適用
レイアウト
- CSS floatとclear 回り込みと解除のサンプル
- CSS position relative 要素を元の位置からずらす
- CSS position absolute 親を基準に要素を配置する
- CSS position fixed 要素の位置を固定
- CSS position sticky スクロールと共に動く
- CSS z-index 要素の重なる順番を指定する
- CSS display 横に並べ幅と高さを指定(inline-block)
- CSS display flexで要素を横に並べる
背景/デザイン
- CSS background 背景色を指定する
- CSS background url 背景画像を指定する
- CSS background repeat 背景画像の繰り返しを指定
- CSS background position 画像の配置場所を決める
- CSS border-radius 四角の角を丸くする
- CSS box-shadow ボックスに影をつける
- CSS text-shadow 文字に影をつける
- CSS opacity 透明度を指定する
- CSS linear-gradient 線のグラデーションのサンプル
- CSS radial-gradient 円のグラデーションのサンプル
- CSS transition 要素をアニメーションさせる
- CSS transform 要素を移動/回転/拡大縮小表示する
- CSS transform-style 要素を3D表示する
BootStrap
HTML
- HTML rowspan テーブルのセルを縦につなげる
- HTML colspan テーブルのセルを横につなげる
- HTML cellpadding テーブルのセル内の余白を指定する
- HTML cellspacing テーブルのセルの間隔を指定する
- HTML width テーブルの幅を指定するサンプル
- HTML ul要素とli要素でリストを作成する
- HTML caption テーブルのタイトルを指定する
- HTML 画像ファイルを表示するサンプル(img)
- HTML 入力画面の部品(form)
HTML応用
HTML5
- HTML Canvas要素で三角形を表示する
- HTML Canvas要素で長方形と円を表示する
- HTML video要素で動画ファイルを再生する
- HTML audio要素で音声ファイルを再生する
- HTML 入力項目のチェックを行う
- HTML 進捗状況を表示するプログレスバー
- HTML 入力欄に入力候補を表示する(datalist)
- HTML スライダーで数値を入力する(range)
- HTML number 上下ボタンで数値を入力する
- HTML detailsとsummary クリックで詳細を開く
- Web API 現在位置を取得する(getCurrentPosition)
- Web API Web Storageで保存(Session / Local)