この写真の記事へ

タブ機能の作り方！ページ移動せずに内容を切り替える(画像)(12ページ目)

西村 文宏

執筆者：西村 文宏

ホームページ作成ガイド

単一のタブの中身だけが表示され、タブをクリックするたびに表示対象(＝タブの中身)が切り替わるようになる

単一のタブの中身だけが表示され、タブをクリックするたびに表示対象(＝タブの中身)が切り替わるようになる

この写真の記事へ
ページ移動することなく内容を切り替えられる「タブ」機能の例
先のHTMLとCSSソースをブラウザで表示させたところ
ここまでのソースでできあがる「タブ」機能の表示例
ページ移動することなく内容を切り替えられる「タブ」機能の例
ここまでのソースでできあがる「タブ」機能の表示例
先のHTMLとCSSソースをブラウザで表示させたところ
先のHTMLソースをブラウザで表示させたところ
ページ移動せずに内容を変更するタブ機能の作り方
ページ移動することなく表示内容を切り替えられるタブ機能の例
完成したタブ機能の表示例：ページ移動することなく内容を切り替えられるタブ機能が実現できている
タブの切り替え機能がない代わりに、すべてのタブが並んで表示される (タブは「ページ内リンク」として機能する)
単一のタブの中身だけが表示され、タブをクリックするたびに表示対象(＝タブの中身)が切り替わるようになる

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。