画像上に傾いたキャプションを表示

画像上に傾いたキャプションを重ねて表示する。

デモページを表示

CSS

補足

• 傾けないキャプションの表示方法は 画像のレスポンシブ対応（画像上にキャプション表示） を参照。
• slope-caption クラスで、傾いたキャプションのデザインを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスに加えて slope-caption クラスを設定することで、キャプションを傾けることができる。

関連投稿

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

疑似要素とCSSでスライドスイッチを表示し、jQueryで詳細の表示・非表示を切り替える。

疑似要素とCSSでスライドスイッチ（トグルスイッチ）を表示し、スイッチに触れたら jQuery で、詳細内容(ブロック要素）の表示・非表示を切り替える（同時にスイッチのオン・オフ状態も変える）。

デモページを表示

CSS

補足

• slide-switch クラス内の span 要素の before 疑似要素で、スイッチの背景を作り、after 疑似要素でスイッチのノブを作っている。
• slide-switch クラス に ON クラスが追加されている時は、スイッチの背景色を変え、ノブ位置を右へ移動し、色も変えてオン状態がわかるようにしている。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• slide-switch クラスをクリック（タッチ）すると、ON クラスが追加（または削除され）、オン・オフ状態が切り替わる。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• slide-switch クラス内の span 要素で スライドスイッチと "詳細表示" の文字列を表示している。
• そのため、文字列部分をクリック（タッチ）してもオン・オフが切り替わる。

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

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

デモページを表示

CSS

補足

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

HTML

補足

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

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

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

デモページを表示

CSS

補足

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

HTML

補足

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

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

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

デモページを表示

CSS

補足

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

HTML

補足

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

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

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

デモページを表示

CSS

補足

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