表示・非表示の切替 (HTML,CSS,JavaScript)

ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

ウェブ上に掲載している表組み(テーブル)でも、閲覧者が列の「表示・非表示」を切り替えられるようにしてみましょう。不要な列を非表示にできると、列数の多い表でも列幅が狭くなりすぎるのを防げ、見やすさを維持できます。

わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul＋li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。

最初はタイトルだけが表示され、本文領域は折り畳まれている状態。閲覧者がボタンをクリックすることで本文領域を展開（表示）させられるようなボックスを作ってみましょう。邪魔にならないボックスが作れます。

閲覧者が自らの操作で、折りたたんだり・展開したり・消したりできるボックスを作ってみましょう。邪魔なら閉じたり折りたたんだりしておける「メッセージやメニューの表示用ボックス」などとして活用できます。

HTML内の特定の要素について表示/非表示を切り替えたい場合は、JavaScriptを使って当該要素のスタイルを変化させれば簡単です。ある要素の表示/非表示を切り替えるには、displayプロパティの値を変更する方法と、visibilityプロパティの値を変更する方法があります。ボタンのクリックで動作するサンプルを使って、画像の表示/非表示を動的に切り替える処理の書き方をご紹介。

マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。まずは第1のステップとして、文字や画像の表示・非表示をマウスの動作に合わせて切り替える方法をご紹介致します。

マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。今回は、座標（端からの距離）を指定することで、望みの場所にぴったり表示させる方法をご紹介致します。

ドロップダウンメニューとは？HTML＋CSSだけでドロップダウンメニューを作る方法を解説。jQueryなどのJavaScriptは不要。リストの書き方(ul要素)を使って2階層以上のサブメニューも作れます。クリックせずにメニューを開閉できる、簡単でレスポンシブなメニューバーUIの作り方をサンプルと共にご紹介。