サイトに動きや変化を付けて、見易く又快適な表示などの小技
「HTML5とCSS3の組合せ」と(1部にQuery使用)を中心にしてページ表示に変化を持たせる小技です。
尚、JavaScriptについては、各種のケースを記述したページ → リンク
- WordPressとjQuery
- WordPressの元でjQueryを利用する際の注意事項など
- jQuery・背景色変更
- マウスを重ねると背景色が変わり、マウスが外れると元に戻る
- CSS・サイドメニュー固定
- 下にスクロールするとサイドメニューが上に消えていく現象を回避する対策
- jQuery・サイドメニュー固定
- サイドメニュー固定のjQUery版
- ページ先頭へスクロールのリンク
- WIndows画面にページ先頭に戻るボタンを設置し、クリックでスクロールしながら、ページ先頭にリンクする設定。スクロールにjQueryを使用。
- 画像に重ねて現在日時を表示
- ヘッダー画像の右に表示されている現在の日付と時刻を表示する。日時表示は、JavaScriptを使用
- 画像に文字列や別画像を重ねる
- 背景画像の中に文字列(テキスト)と画像を重ねて表示。ポイントは別画像のCSS設定。
- 簡単なアニメーション Transition
- CSS3で簡単に利用出来るアニメーション transition の紹介
- CSS・ドロップダウンメニュー
- CSSだけで縦型のドロップダウンメニューを作るこのサイトでの事例紹介。表示のコントロールは、数行で出来るのでとても簡単。
- 上部ヘッダーやメニューを固定
- 下にスクロールすると、上部のヘッダーやメニューが画面から消えてしまう状況を回避する方策です。特にメニューが上部に残って表示されていると、サイト閲覧の操作感が向上します。
- CSSカウンタと行頭記号表示
- CSSでカウンタ値を表示する場合、値の表示に使うリスト項目のマーカー(行頭記号)の形状を幾つか例示。CSSの「list-style-type」です。
- 文字毎に文字色変える
- テキストの一文字単位で指定できるセレクタは無いので、ul liを使い一文字ずつ li に記述して表示している。
- テキスト折り返し行頭にスペース
- 箇条書き等でテキストを記述した場合、2行目以降が連番と同じ先頭位置から表示される。連番がテキストと同じ位置なので、区切れが分かり難くなり見づらい、これをCSSで解消する方法。
- 行に一定間隔で背景色
- 箇条書き、テーブルやリストなどに行の間隔を指定して、背景色を入れることで見やすく。