RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.1 ~ No.10 > 記事No.8

タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法

← 前の記事

次の記事 →

タブメニュー

※より簡単で改善されたタブメニューの作り方について解説した記事を投稿しました!

関連:シンプルで使いやすいタブメニューを超簡単に作成する方法


ページを切り替えることなく、同じページ内でタブごとに表示内容を変更する
「タブメニュー」の作り方について、今回簡単に紹介しようと思います!

ちなみにタブメニューとは↓のように、タブをクリックするとページ移動することなく、ボックスの中身のみが切り替わるというものです。


▼ タブメニュー 実装例:

タブ1 タブ2 タブ3

 タブ1の内容です。画像やリンクを含めることもできます。
 タブ2の内容です。画像やリンクを含めることもできます。  
 タブ3の内容です。画像やリンクを含めることもできます。




※ 今回の解説では、↑の実装例で示したものと同じようなスタイルのタブメニューの実装を目指します。 タブメニュー完成後のデザインの変更は各自で自由に行ってください。

① タブによる切り替え機能を実装するためのCSS行を記述

まずは肝心なタブ機能を実装するためのcss行を htmlに記述します。

以下のコードを、タブ機能を実装したいページのHTMLの<head></head>内に追加してください。

↑ タブメニューの設定文は、基本的にcssのルールです。

"height"と"width"でボックスの高さと横幅を設定し、 "border"や"background-color"で枠線や背景色の設定を行ってください。


② タブメニュー自体のHTML行の記述

手順①でタブメニューの実装の準備は整ったので、あとはタブメニュー自体のhtml行を記述するだけです。

タブメニューを実装したい部分に、以下のようなコードを記述してください。

解説:

■ タブを追加したい場合は、上記と同様の記述をtab4, tab5...と追加していくだけです。

■ 最後の方の ChangeTab('tab1'); の部分でページを開いた際に
  最初に表示されるタブを選択します。
  ※この行が無いとタブメニューがバラけてしまうので注意!



③ 実装完了

以上でタブメニューを作成する手順は完了です。上の実装例で示したようなタブメニューが追加 できていると思います。


今回はいつもにも増して記述する行が多く、htmlに加え多少のcssの知識が必要なため、もし何か疑問点がおありでしたら"コメント欄"もしくは 掲示板 の方にて、お気軽にご質問ください!


※より簡単で改善されたタブメニューの作り方について解説した記事を投稿しました!

関連:シンプルで使いやすいタブメニューを超簡単に作成する方法


関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ