コピペでOK！ドロップダウンメニューをHTMLとCSSだけで超簡単に作成する方法
サイト内のカテゴリーが多くなってしまったとき、全てを横並びにすると場所をとってしまう上、見づらくなってしまいますよね。 今回はそんな場合にオススメなのは『ドロップダウンメニュー』です！マウスカーソルを乗せると項目が下にズラッと出現するアレです。 ▼ドロップダウンメニューの例 ホーム 日常 旅行 商品レビュー ライブラリ 料理 趣味 映画 漫画 エンタメ関連 ゲーム 映画 WordPress関連 お問い合わせ ※スマホの場合は表示が崩れる場合があります。そもそもドロップダウンメニューはマウスオ ...
シンプルで使いやすいタブメニューを超簡単に作成する方法
今回はタブごとに内容の変わる"タブメニュー"をホームページ上に簡単に実装する方法について解説していきます！ ※以前の記事で、すでにタブメニューの作成方法について解説していますが、今回紹介するタブメニューは実装がさらに簡単で改善されたものになります。 タブメニューの実装 今回の記事では以下の様なタブメニューを実装することができます。 実装例： シンプルで使いやすく、CSSをいじることでデザインを変更することも可能です。 コードの貼りつけ まず初めにjQueryのスクリプト行を実装します。＜head＞＜/he ...
タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法
ページを切り替えることなく、同じページ内でタブごとに表示内容を変更する「タブメニュー」の作り方について、今回簡単に紹介しようと思います！ ちなみにタブメニューとは↓のように、タブをクリックするとページ移動することなく、ボックスの中身のみが切り替わるというものです。 タブ1タブ2タブ3 タブ1の内容です。画像やリンクを含めることもできます。 タブ2の内容です。画像やリンクを含めることもできます。 タブ3の内容です。画像やリンクを含めることもできます。 ※ 今回の解説では、↑の実装例で示したものと同じよ ...