CSS のサンプル
このページは、CSS のサンプルをまとめる予定のページです。
目次
注意
- 各サンプルのコードは、ソースを表示して確認してください。コードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) です。
- 動作対象は、IE11、Edge、Firefox、Chrome を想定しています。
- ファイルをローカルに保存して確認・改造しやすいように、CSS は HTML ファイルに <style> で直接記載しています。
サンプル一覧
プロパティ、値、セレクタ、メディアクエリのサンプル
- 文字が入り切らない場合に省略表示する (text-overflow: ellipsis)
- 縦書きのセル (writing-mode)
- 天地中央のテキスト (flex)
- 全画面表示 (vh)
- 常に最下部にあるフッター (flex)
- スクロールバー (-webkit-scrollbar) ※ Chrome、Safari のみ
- テキストのグラデーション (background-clip: text) ※ IE11非対応
- 縞々のテーブル (nth-child)
- 表の行と列の固定 (position: sticky) ※ IE11非対応
- 段組 (column-count)
- float でテキストを下に回り込ませない (overflow)
- iOS セーフエリア対応
メディアクエリ
- ダークモード (@media (prefers-color-scheme: dark)) ※ IE11, Edge非対応
- hover が使用できる・できない環境でスタイルを分ける (@media (any-hover)) ※ IE11 非対応
レイアウト
- 可変個のタイルレイアウト (flex)
- justify-content: space-between, flex-wrap: wrap を使いながら可変個対応します。(4列まで対応しています)
- 可変個のタイルレイアウト (flex + 内側にmargin) のように必要なタグを1つ増やすと、5列以上にも対応できて簡単です。
- 可変個のタイルレイアウト (float) のようにすると、タグを増やさずに5列以上に対応できます。
- 可変個のタイルレイアウト (flex + gap) ※ IE11 非対応
- 可変個のタイルレイアウト (grid) ※ IE11非対応
- flex によるグリッド
- flex での画像レイアウト (シンプル)
背景
枠線
テキスト
画像のエフェクト
入力部品のカスタマイズ
汎用クラス
JavaScriptを使わないアニメーション
JavaScriptを使わない部品
※ HTML と CSS のみで動作を作成している関係上、チェックボックスやラジオボタンを駆使した内容が多いです。
- ドロップダウンメニュー (マウスオーバー)
- ドロワーメニュー
- ダイアログ
- タブ
- ツリービュー
- アコーディオンメニュー
- 折り畳みパネル
- 画像ポップアップ (fancyBox 2風)
- ツールチップ
- 「よくあるご質問」
- スライダー (シンプル)