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