ホームページ作成

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

HTMLやスタイルシート（CSS）、JavaScriptを使ったアイテムの表示、非表示の切り替え方法について解説しました。

記事一覧

その場で展開できる「続きを読む」ボタンの作り方
ガイド記事
西村文宏
冒頭だけを見せておき、「続きを読む」ボタンで全文が見える機能を作る「続きを読む」ボタンを押すまでは続きのコンテンツが折りたたまれている表示例最初にコンテンツの冒頭だけを見せておき、「続きを読む」ボタンが押された際に残りのすべてを表示するUIをよく見かけます。たくさんの情報を少しずつ見せておき、興味の...続きを読む
画像にマウスを載せた際に、半透明の説明を重ねる方法
ガイド記事
西村文宏
画像のキャプションを、半透明にして、画像の下部に重ねて表示してみる画像の下にキャプションがある例「画像のキャプション」というと、たいていは画像の下部に表示されます。その方が、画像と同時にキャプションが読めて便利です。しかし、ページデザインや掲載する画像の内容によっては、キャプションはそれほど重要では...続きを読む
表の特定の列だけを抜粋して表示できるようにする方法
ガイド記事
西村文宏
項目数の多い表を見るのは大変列数が多い表は読むのが大変項目数の多い表を見る際は、自分の目がどこを見ているのかを把握し続けるのが大変です。油断すると、異なる行を見てしまっていたりします。そのような大きな表では、自分が必要としている(見たい)情報は一部分だけのこともあります。もし、その表が表計算ソフト上...続きを読む
簡単なドロップダウンメニューの作り方(jQuery活用編)
ガイド記事
西村文宏
ドロップダウンメニューとは？サブメニューが出るナビゲーションドロップダウンメニューとは、メインメニュー項目がクリックされた際に、その直下にサブメニュー項目が展開されるナビゲーション機能のことです。様々なソフトウェアのメインメニューとしても使われており、とても一般的なUI(ユーザ・インターフェイス)だ...続きを読む
クリックで「展開できる」ボックスを作る
ガイド記事
西村文宏
前回の記事『クリックで「折りたためる」ボックスを作る』では、下記のようなボックスの作り方をご紹介いたしました。ボックス上部の右端にある「」ボタンをクリックするとボックスを折りたたむことができ、「」ボタンをクリックすると消し去ることができます。※スタイルシートとJavaScriptが有効な環境でのみ動...続きを読む
クリックで「折りたためる」ボックスを作る
ガイド記事
西村文宏
邪魔なら閉じられるボックス下記には、最新記事をお知らせする小さなボックスが表示されています。ボックス上部の右端にある「」ボタンをクリックすると、このボックスを折りたたむことができます。さらに「」ボタンをクリックすると消し去ることもできます。試してみて下さい。※スタイルシートとJavaScriptが有...続きを読む
HTMLの表示/非表示を切り替える2つの方法
ガイド記事
西村文宏
HTMLで作った特定箇所の表示/非表示を切り替える方法JavaScriptを使ってスタイルを変化させれば、HTMLで作成した任意の要素の表示/非表示状態を動的に切り替えられます。その際、指定要素の表示/非表示を切り替える目的で使えるスタイルには、displayプロパティとvisibilityプロパテ...続きを読む
ドロップダウンメニューの表示・非表示
ガイド記事
西村文宏
ドロップダウンメニューを作ろうドロップダウンメニュー（下図）を作...続きを読む
[第2回] 指定の場所（座標）に表示させる
ガイド記事
西村文宏
ドロップダウンメニューを作ろうドロップダウンメニューを実現するの...続きを読む
ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法
ガイド記事
西村文宏
ドロップダウンメニューとはドロップダウンメニューとは、主にメインメニューが横方向に広がっており、メニュー項目の上にマウスを載せると、隠れていたサブメニューが下側に展開するようなメニューのことです。多数のウェブサイトで主要なナビゲーション機能として使われており、HTML＋CSSだけで簡単に作成できます...続きを読む