項目間にリーダー線を付ける

目次や料理の価格表のように、二つの項目間にリーダー線を付ける（レスポンシブ対応）。

デモページを表示

CSS

補足

• 16行目：リーダー線に使う文字列を長めに設定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ul 要素に add-leader クラスを付ける。
• li 要素内の em 要素と span 要素の間に、指定した文字でリーダー線が表示される。

読みやすい段落のスタイル設定

標準では読みづらい段落のスタイルを、CSSの設定で読みやすくする。

デモページを表示

CSS

補足

• 9行目：段落の下マージンを広く取り、段落の区切りをわかりやすくする。
• 10行目：太めの等幅に近いフォントを指定すると読みやすくなる。
• 11行目：文章が折り返したときに余裕ができるよう、行の高さ（行間）を広めに取る。
• 12行目：文字間隔を少し広げて、読みやすくする。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• normal クラス下の p 要素は 、ほぼブラウザ標準の表示状態。restyle クラス下の p 要素は読みやすいスタイルを設定している。

文字列を行末ではなく指定した位置で折り返す

ウィンドウ幅を狭めた時に、文字列が行末（ブロック要素の右端）ではなく、指定した位置（単語や文節など）で折り返すようにする。

ウィンドウ幅が狭くても、指定した位置で折り返すことで、見出しなどが読みやすくなる。

デモページを表示

CSS

補足

• b 要素で囲んだ文字列をインラインブロック化することで、強制的に折り返す。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 6行目： b 要素で囲むことにより、ウィンドウ幅を狭めていくと、"接続できる"、"充実のインターフェイス" のブロック単位で折り返していく。

ボタンに光沢感を付ける

ボタンや見出しなど（色付きのブロック要素）に光沢感を付ける。

デモページを表示

CSS

補足

• 対象となるブロック要素を擬似要素で覆い、その疑似要素のグラデーションで光沢感を付ける。
• 13行目：linear-gradient で光沢感の仕様を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 光沢感を付けるブロック要素に add-gloss クラスを設定する。

マウスオーバーで画像をズームアップ

画像のレスポンシブ対応 で表示した画像をマウスオーバーした時にズームアップする。

デモページを表示

CSS

補足

• 3行目：ズームアップ時に、はみだした部分を表示しない。
• 8行目：ズームアップ時のスピードを設定。
• 12行目：ズームアップ時の拡大率を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスに加えて hover-zoom クラスを追加する。

関連投稿

• 画像のレスポンシブ対応

画像のレスポンシブ対応（画像上にキャプション表示）

画像のレスポンシブ対応 の画像上にキャプション表示する。

デモページを表示

CSS

補足

• 2行目：キャプションの位置を決めるために追加。
• 9行目以降：キャプションの位置やスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスを付けた span 要素内、img 要素に続けて em 要素でキャプションを指定する。

関連投稿

• 画像のレスポンシブ対応

画像のレスポンシブ対応

ウィンドウ幅やブロック要素の幅の変化に合わせて、画像の縦横比を維持したまま、拡大・縮小表示（レスポンシブ対応）する。

デモページを表示

CSS

補足

• frame-img は画像のコンテナに付けるクラスで、画像周りの枠線や余白設定に使える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• span 要素に frame-img クラスを付け、その中に img 要素を置く。

見出しの両サイドにボーダーを付ける

CSS で、見出しのテキストの両サイドにボーダーを付ける。

デモページを表示

CSS

補足

• side-border が基本のクラスで、これを h2 要素などに設定すると、見出しの両サイドに実線のボーダーが表示される。
• ボーダーは疑似要素で表示している。
• side-border クラスに加えて、double・dotted・dashed・sakura などのクラスを設定すると、ボーダーのスタイルが変えられる。
• ボーダーの長さはウィンドウ幅に連動する（レスポンシブ対応）。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• このサンプルでは h2 要素に、あらかじめ用意した side-border クラス等を設定している。

縦型タイムラインのデザイン

CSS で縦型タイムラインのデザインをする。

デモページを表示

CSS

補足

• 左端の縦線は li 要素のボーダー、"●" は li 要素の疑似要素で表示している。
• 左端の縦線は改行により伸びる（レスポンシブ対応）。
• "●" の位置は、関係する要素のスタイルにより微調整が必要になる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• dl 要素に timeline クラスを付ける。
• dd 要素の中に ul 要素を置いて、出来事を箇条書きしている。

ページ内リンクを自動作成する

各セクションの見出しなどを対象に、ページ内リンク（ショートカット）を自動作成する。

デモページを表示

CSS

補足

• ページ内リンクを追加するブロック要素やリンクのスタイルを設定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、h3 要素をアンカーポイントにしている（そのため id 属性の設定が必要）。
• スムーズ・スクロールさせない場合、19行目以降は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 5行目：リンクを追加するブロック要素を用意しておく。
• 7行目：アンカーポイントの h3 要素に id 属性を設定しておく。

クリックしたセルの列と行を色分け

テーブルのセルをクリックした時に、同一の列・行のセルを色分けする。

デモページを表示

CSS

補足

• 20行目：クリックしたセルと同一の行・列のセル仕様を設定。
• 24行目：クリックしたセルの仕様を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• クリックできるのは td 要素のみとしている（th 要素は対象外）。
• 色分けする同一行・列のセルも td 要素のみとしている（th 要素は対象外）。
• クリックされたセルを再度クリックすると色分けが解除される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• table要素に crosshair クラスを指定する。

マウスオーバーした時にアニメーションを付ける

指定した要素をマウスオーバー（ホバー）した時にアニメーションを付ける。

デモページを表示

CSS

補足

• マウスオーバー（ホバー）した時に設定するアニメーションのクラス（ bounce, rubberBand, tada ）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• マウスオーバー（ホバー）した時に data-hover-animation 属性に設定したアニメーションのクラスを追加し、マウスアウトしたら追加されたアニメーションのクラスを削除する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• マウスオーバー（ホバー）した時のアニメーションを data-hover-animation 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• ボタンをクリックした時にアニメーションを付ける

ボタンをクリックした時にアニメーションを付ける

ボタンをクリックした時に、指定したアニメーションを付ける。

デモページを表示

CSS

補足

• クリックした時に設定するアニメーションのクラス（ bounce, rubberBand, tada）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• クリックした時に data-click-animation 属性に設定したアニメーションのクラスを追加し、アニメーションが終了したら追加されたクラスを削除する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• クリックされた時のアニメーションを data-click-animation 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• マウスオーバーした時にアニメーションを付ける

スクロール時に指定した要素をアニメーション付きで表示

ページのスクロール時に、指定した要素を、指定したアニメーションで表示する。

デモページを表示

CSS

補足

• アニメーション表示する要素（ data-scroll-animation 属性を付けた要素）をあらかじめ透明（見えない状態）にしておく。
• 設定するアニメーションのクラス（ slideInLeft, slideInRight ）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、対象となる各要素（ data-scroll-animation 属性を付けた要素）の上端が、ウィンドウ高さの１／４を超えたらアニメーションが始まり、表示される。
• アニメーション表示されるのは、最初に表示される時だけ。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• アニメーション表示する要素に data-scroll-animation 属性とアニメーションを定義したクラスを設定する。

関連投稿

• ボタンをクリックした時にアニメーションを付ける
• マウスオーバーした時にアニメーションを付ける

CSSによる"パンくずリスト"のデザイン

CSSによるシンプルな "パンくずリスト" のデザイン例。

デモページを表示

CSS

補足

• Flexbox を使用してリスト項目を横並びにする。
• リスト項目の後ろ（最後の項目以外）に、疑似要素で ">" を表示している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ul 要素にクラス（"topic-path"）を付ける。

CSSによるボタンのデザイン

CSSを使ったボタンの簡単なデザイン例。

デモページを表示

CSS

補足

• 標準のボタンのスタイルを基に、適宜必要なスタイルを追加・上書きしていく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• span や a 要素に、標準のボタンのクラス（ "btn" ）を付ける。

"続きを表示"をクリックして、指定した数だけリスト項目を表示する。

最初にリスト項目を全て表示しないで、"続きを表示" をクリックすると、指定した数だけ続きのリスト項目を表示する方法。

デモページを表示

CSS

補足

• 2行目：リスト項目を非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 23行目以降：最初に指定した項目数だけは表示しておくために設定。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 1行目：ul 要素にデータ属性 data-show-list を付加し、最初と "続きを表示" をクリックした時に表示するリスト項目の個数を指定する。

同じ階層の最後の段落の下マージンを無くす

背景色や枠を設定していると、最後の段落の下マージンの空きが気になるので、最後の段落には下マージンを設定しない方法。箇条書きやテーブルにも同様の方法が使える。

デモページを表示

CSS

補足

• 同一階層の最後の p 要素以外に下マージンを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

印刷時にページトップへ戻るボタンが全ページに印刷されるのを防ぐ。

印刷時に、ウィンドウの固定位置に配置（position: fixed;）したメニュー表示（ハンバーガー）ボタンやページトップへ戻るボタンが全ページに印刷されてしまうのを防ぐ方法。

デモページを表示（印刷される）

デモページを表示（印刷されない）

CSS

補足

• @media print { … } 内に、印刷したくない要素を display: none; 指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

番号付きリストの番号部を装飾

番号付きリストの番号部を疑似要素に置き換え、装飾しやすくする。

デモページを表示

CSS

補足

• 3行目： list-style-type: none; で標準のマーカーを非表示にし、12行目：擬似要素で番号部を表示する。
• リストの番号は counter-reset、counter-increment、content で生成している。
• 共通定義（class="deco"）で、装飾のない通常の番号付きリストのスタイルになる。
• 個別定義（class="ranking"）で、番号部の位置や大きさ、装飾などを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 3行目：共通定義（class="deco"）だけの場合は、通常の番号付きリストのスタイル。
• 11行目：共通定義（class="deco"）＋個別定義（class="ranking"）で、番号部が装飾された状態になる。

開閉アイコン付きアコーディオンパネル

パネルの開閉状態をあらわすアイコンが付いたアコーディオンパネル。開くパネルを一つに限定することもできる。

デモページを表示

CSS

補足

• 28・32行目：開閉状態をあらわすアイコンを文字で指定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 開くパネルを一つに限定しない場合、5～11行目は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 3行目：開くパネルを一つに限定しない時は、dl 要素に accordion-panelクラスを設定する。
• 31行目：開くパネルを一つに限定する場合、dl 要素に accordion-panel と single-mode の二つのクラスを設定する。

ウィンドウの右下にページトップへ戻るボタンを追加。

ウィンドウの右下に「ページトップへ戻る」ボタンを動的に追加し、スムーズスクロールでページ上端へ戻れるようにする。

デモページを表示

CSS

補足

• 「ページトップへ戻る」ボタンの位置や外観を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ５行目： body 要素の最後に a 要素を動的に追加。リンク先は body 要素（id="pagetop"）にしている。
• スムーズスクロールさせない場合は、8～14行目は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ページ上端へ戻すために body 要素に id="pagetop" を設定している。

長い文字列を指定文字数でカットして、末尾に '…' を付加。

長い文字列を先頭から指定した文字数でカットして、末尾に '…' を追加する。

デモページを表示

jQuery

補足

• ３行目：データ属性 "data-tailcut" を持つ要素が対象。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 長い文字列を含む要素にデータ属性 "data-tailcut="n" を追加する。
• このサンプルでは、先頭から３０文字目以降をカットして、末尾に '…' が付加される。