![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
HPのメニューバーをhtmlとcssを使用して作成したいのですが、どういう風に調べてよいのかもわからないので、アドバイスだけでもいいので教えてもらえると助かります。
例えば下のようなメニューを作成するとします。
(「□トップ」という一つ一つの画像だと思ってください)
□トップ
□日記
□写真
□リンク
これをフレームページの左側に表示させます。
トップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、
■トップ
□日記
□写真
□リンク
上のように表示させ、日記ページを右側に表示させている時も同様に
□トップ
■日記
□写真
□リンク
と、現在見ているページのメニュー画像のみを入れ変えるという設定にしたいです。
できるのなら、cssとhtmlの記述例を教えてくださると大変助かります。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
まず、フレームで楽をしようという考え方は捨ててください。
html+cssでは、htmlで文章の構造(見出しとかリンクとか段落とか箇条書きなど)をcssではそれらの見た目(デザイン的要素、大きさ、色、背景、太さ、空き、罫線など)をそれぞれが担当します。html+cssではページが変わったらなんて判断はしません。毎ページにメニューも入れなければなりません。毎ページに同じ場所に同じデザインで左メニューあるなら、フレームのように見えるかもしれません。
ップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、
■トップ トップ用の文章はこちらにいれます。入れ替えなくて、もともと
□日記 左のように作ってください。そしてメニューと本文合わせて1ペ
□写真 -ジを作成し、例えば、index.htmlとします。
□リンク
上のように表示させ、日記ページを右側に表示させている時も同様に
□トップ ページの数だけお手間でしょうがセットを変えて、左の様
■日記 に作ってください。日記の内容とメニュー合わせて1ページ
□写真 作ります。トップの場所のリンクはindex.htmlとします。
□リンク
では、どのようにメニューを左に、本文を右にするのか?見た目をどうするのかですから、cssの出番です。メニューグループと中身のグループに大きくわけます(つまり、2段)。メニューはulが、コンテンツはdivが適しています。いろいろ手法がありますので、「2カラム css」とか「段組 css」などで検索してみてください。表でもないものには、デザインの為に表は使いません。もしフレームのようにスクロールしても同じ場所にとどまるメニューをご希望でしたら、段組のことを理解してから、「疑似フレーム css」を検索してみてください。
現在のブラウザに対応していない場合がありますので、いろいろなブラウザで確認してから使うものを選ばれることをお勧めします。
見た目が気に入ったのでフレームにしたかったのですが、考えが甘かったようですね。デザインを考え直そうと思います。
検索方法も教えてくださって、助かりました。
回答ありがとうございました!
No.1
- 回答日時:
最も簡単に解決するのであれば、外部cssなしで実装可能です。
HTMLにこのように記述してください。
<table style="メニューを格納する表に適用したいスタイル">
<tr>
<td style="backgroundImage:url(○○○○);" onmouseover="this.style.backgroundImage='url(△△△△)'" onmouseout="this.style.backgroundImage='url(○○○○)'">
<a href="リンク先" target="表示させたい場所">
<div style="width:100%;">
メニューに表示させたい文字 (思い浮かばない場合は本当は良くないけど全角スペース)
</div>
</a>
</td>
</tr>
・・・メニューの数だけ繰り返す・・・
</table>
きれいに実装したい場合は必要部分を外部cssにまとめて書き出すとHTMLも美しくなるので、その場合はくくり出しを検討をしてみてください。
原理は、画像のイメージを入れ替えるのではなく、目的の部分の領域の背景画像をcssを応用してすりかえることで実現しています。
実はこの技法、画像は背景なので、画像に文字入れを行わなくても、文字入れした画像に見せることも可能なのが利点です。
さらに、外部cssに書き出してしまってスタイルをクラス名で切り替えると、同時に文字の色や太さなどを変更することも可能になります。
参考までにクラス名で切り替える場合はtdタグを下のように書きます。
<td class="○○○○" onmouseover="this.className='△△△△'" onmouseout="this.className='○○○○'">
あと、一見必要そうに見えない幅を100%に設定しているdivタグですが、これは必要です。外すと分かるのですが、無いと範囲の中に記述した文字の上しかリンクが張られなくなるので、divタグで領域全体にリンクを設定する為のものです。
ロールオーバーのようになって可愛かったのですが、うまく設定できませんでした。
せっかく教えて頂いたのにも関わらず、活用できずにすみません。もう少しちゃんと勉強してから再チャレンジしてみます。
回答ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Android(アンドロイド) PayPayでアンドロイドスマホのアカウント画面の表示のポイントの使い方が知りたい 画像添付 5 2022/05/26 10:58
- Excel(エクセル) VBAで「クエリと接続」の画面を出せますか? 2 2022/10/24 13:35
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- Outlook(アウトルック) Outlook トップ画 イニシャル変えたい Outlookについてわかる方教えてください。 左のメ 1 2022/11/06 23:58
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページの画面文字を濃く...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー15で作っ...
-
XREA使用で作成したHTMLファイ...
-
FC2ホームページの変更に仕方
-
ホームページビルダー22でリン...
-
ビルドとリビルドの違いを教え...
-
ホームページビルダー21 SPモ...
-
ホームページビルダーおすすめ?
-
ホームページビルダー21で作成...
-
ホームページビルダーを複数の...
-
vtuverになりたいのです。 しか...
-
ホームページビルダー21を教え...
-
ページの内容コピペ 範囲が広い...
-
GASについて
-
パスワードつきホームページ ト...
-
ホームページの内容変更を無料...
-
FFFTPでサーバに新規フォルダが...
-
Wixでホームページ作成、コンテ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
マルチアングルの切り替え
-
Adobe Reader PDF 開くと英語...
-
Yahoo!TVは、なくなったのです...
-
今度、会社の上司の方と「鳥貴...
-
VLC media player DVDメニュー
-
GOM PLAYERのメニューの表示方法
-
DVD-Video作成時のメニュー画面...
-
AutoCADでワイプアウトを編集し...
-
無料のDVDオーサリングソフトで...
-
Photoshopでファイルを常に中央...
-
DBCS関数とは何ぞやッ!
-
HTMLです 画像のように表せます...
-
グーグルアース
-
ビスターの使い方 XPとの違い等
-
美容室顧客管理ソフトを探して...
-
フォトショップを独学でする為...
-
フォトショップの作業スペース...
-
筆まめのガイドメニューが表示...
-
ホームページビルダーV9 メニュ...
-
IBMホームページビルダーに...
おすすめ情報