基礎編
displayマルチキーワード構文 超入門ガイド
CSSのdisplayを、要素の外側と内側の表示形式から整理します。親・子要素への指定を比較する例には訂正を加えています…
Category
カテゴリー: 基礎編
コーディング基礎編
基礎編
モーダルウィンドウ
モーダルウィンドウ モーダルウィンドウは、背景を暗くして前面のコンテンツに注意を集中させるUIです。デモでは「ページを開…
基礎編
カウンタ + グラフ
カウンタ + グラフ 「実績1,200件」「満足度98%」――数字は最強の説得材料ですが、ただ書くだけでは流し読みされま…
基礎編
ツールチップ + ニュースティッカー
ツールチップとニュースティッカーの制作例です。マウス以外でも使える停止方法など、自動で動く表示の注意点を追記しています。
基礎編
アコーディオンパネル
クリックで内容を開閉するアコーディオンの制作例です。個別に開く形式と、別の項目を開くと閉じる形式を扱います。
基礎編
スクロールダウン
縦線・丸・矢印などで下へのスクロールを案内する制作例と、スクロールに連動する線の表現を紹介します。
基礎編
ページ内リンク
ページ内の指定位置へ移動するリンクを扱います。固定ヘッダーの高さを考慮したスクロールの作例もあります。
基礎編
ページトップリンク
ページ先頭へ戻るリンクの制作例です。スクロール位置に応じてボタンを表示する方法も紹介します。
基礎編
検索窓
虫眼鏡アイコンから入力欄が伸びる、画面全体に広がるなど、検索窓の表示方法を比較する制作例です。