- ベストアンサー
このようなデザインにするには・・・？
度々、すみません。 http://home1.netpalace.jp/9/top.cgi このようなデザインのＨＰを作るにあたって、いくつか質問にお答えいただけるとうれしいです。 １．このサイトの枠（？）はテーブルで作ってあるのでしょうか？ ２．左にあるカーソルをボタンに合わすと色が変わるのはどうすればいいのでしょうか？ ３．タイトルが画像の上に文字を打ってある形になっているのですがこれはどのようにすればいいのでしょう？ よろしくお願いいたします。
- mituru1986
- お礼率42% (632/1491)
- ホームページ作成ソフト
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＞一度ボタンを押して戻ると四角のボタン状のものがただの文字のみに ボタン状のものがただの文字のみになってしまった、ということは正しくCSS部分が適応されていない、ということです。 ただ、ボタンというのはリンクですか？ リンクをクリックして、どのように戻るとそうなってしまうのでしょうか。 ブラウザの戻るボタンで戻ったときでしょうか？ リロードなどは試されましたか？ あとは…その文字のみで表示されてしまったときのソースを見せていただければ解決法がわかるかと思います。
その他の回答 (5)
こんにちは、No.2です。 --------------------------------- <html> <head> <style type="text/css"> <!-- 【CSS部分】 --> </style> <title>タイトル</title> </head> <body> 【HTML部分】 </body> </html> --------------------------------- 上のように基本的に【CSS部分】は<head>から</head>の間にある、<style type="text/css">から</style>の間に記します。 【HTML部分】は<body>から</body>までの任意の場所に記せば大丈夫です。 がんばってくださいね☆ --------------------------------- 例 (テーブルレイアウト) --------------------------------- <html> <head> <style type="text/css"> <!-- a.menu:link { width: 100px; /* ブロックの横の長さを100pxに指定 */ color: white; /* 文字の色を白に指定 */ text-decoration: none; /* リンクの下線を消す指定 */ background-color: black; /* ブロックの背景を黒色に指定 */ border: 1px solid gray; /* 枠線の色を1pxの細さの直線で灰色に */ display: block; /* ブロックレベル要素に */ padding: 5px 15px 5px 15px; /* 文字とブロックの外周との距離を指定 */ margin: 1px 0px; /* ブロックの外の余白の指定 */ } a.menu:hover { width: 100px; color: black; text-decoration: none; background-color: white; border: 1px solid gray; display: block; padding: 5px 15px 5px 15px; margin: 1px 0px; } --> </style> <title>タイトル</title> </head> <body> <table> <tr><td><a href="【Topのアドレス】" class="menu">Top</a></td></tr> <tr><td><a href="【Profileのアドレス】" class="menu">Profile</a></td></tr> <tr><td><a href="【Diaryのアドレス】" class="menu">Diary</a></td></tr> <tr><td><a href="【BBSのアドレス】" class="menu">BBS</a></td></tr> </table> </body> </html>
お礼
本当に詳しくありがとうざいます。 ただ、これでやってみると、一度ボタンを押して戻ると四角のボタン状のものがただの文字のみに なってしまうのですがこれはどういうことでしょうか？
No.2です。 具体的な方法を書いてみます☆ テーブルレイアウトと、テーブルを使わないCSSのみのレイアウトと両方例をあげておきます。 本来であればCSSのみの方がソースがすっきりとするのですが、テーブルでレイアウトされる方が内容もわかりやすいですし、今回のご質問のサイトさんもテーブルを使われているので一応書いておきます。 ◆テーブルレイアウト --------------------------------- 【CSS部分】 --------------------------------- a.menu:link { width: 100px; /* ブロックの横の長さを100pxに指定 */ color: white; /* 文字の色を白に指定 */ text-decoration: none; /* リンクの下線を消す指定 */ background-color: black; /* ブロックの背景を黒色に指定 */ border: 1px solid gray; /* 枠線の色を1pxの細さの直線で灰色に */ display: block; /* ブロックレベル要素に */ padding: 5px 15px 5px 15px; /* 文字とブロックの外周との距離を指定 */ margin: 1px 0px; /* ブロックの外の余白の指定 */ } a.menu:hover { width: 100px; color: black; text-decoration: none; background-color: white; border: 1px solid gray; display: block; padding: 5px 15px 5px 15px; margin: 1px 0px; } --------------------------------- 【HTML部分】 --------------------------------- <table> <tr><td><a href="【Topのアドレス】" class="menu">Top</a></td></tr> <tr><td><a href="【Profileのアドレス】" class="menu">Profile</a></td></tr> <tr><td><a href="【Diaryのアドレス】" class="menu">Diary</a></td></tr> <tr><td><a href="【BBSのアドレス】" class="menu">BBS</a></td></tr> </table> ◆CSSレイアウト --------------------------------- 【CSS部分】 --------------------------------- #menu ul, #menu li { padding: 0; margin: 0; list-style: none; /* リストのマークを消す指定 */ } #menu li a:link { width: 100px; /* ブロックの横の長さを100pxに指定 */ color: white; /* 文字の色を白に指定 */ text-decoration: none; /* リンクの下線を消す指定 */ background-color: black; /* ブロックの背景を黒色に指定 */ border: 1px solid gray; /* 枠線の色を1pxの細さの直線で灰色に */ display: block; /* ブロックレベル要素に */ padding: 5px 15px 5px 15px; /* 文字とブロックの外周との距離を指定 */ margin: 1px 0px; /* ブロックの外の余白の指定 */ } #menu li a:hover { width: 100px; color: black; text-decoration: none; background-color: white; border: 1px solid gray; display: block; padding: 5px 15px 5px 15px; margin: 1px 0px; } --------------------------------- 【HTML部分】 --------------------------------- <div id="menu"> <ul> <li><a href="【Topのアドレス】">Top</a></li> <li><a href="【Profileのアドレス】">Profile</a></li> <li><a href="【Diaryのアドレス】">Diary</a></li> <li><a href="【BBSのアドレス】">BBS</a></li> </ul> </div> ちゃんとテストしていないので、ミスがあったらごめんなさい。(^o^; またCSS部分の日本語での説明 (全角文字) は不具合を起こすことがありますので、念のため削除してくださいね。(一応削除しなくても表示はされませんが。)
お礼
返事が遅くなって大変申し訳ありません。 そして、親切な回答非常に感謝しております。 これの【CSS部分】と【HTML部分】というのはどこに書き込めばいいのでしょうか？
再び失礼します。 No.2で回答した者です。 ＞２の【説明１】なのですが日本語のところはリンクのボタンの画像を指定すればいいのでしょううか？ 「ボタンの画像」とはどの画像のことでしょうか？ Top、Profile、Diary、BBSとピンクの四角でこの文字が囲われたリンクが縦に並んでいますよね。 このピンクの四角は画像ではありませんよ！ 見当違いなことを言っていたらすみません。(x_x; よろしければ補足をお願いします。
お礼
再度回答ありがとうございます。 本当に何度も申し訳ありません（＾＾； 初心者で、どのようにこのボタンみたいなメニューを作ることができるのでしょうか？ 何から初めていいのか・・・。
こんにちは☆ ＞１．このサイトの枠（？）はテーブルで作ってあるのでしょうか？ このサイトさんのソースを見てみればわかるのですが、おっしゃるとおりテーブルでレイアウトされているようですね。 ＞２．左にあるカーソルをボタンに合わすと色が変わるのはどうすればいいのでしょうか？ これはこのソースで言うところの、「a.menu:link」、「a.menu:visited」、「a.menu:hover」、「a.menu:active」というCSSの指定で実現されています。 このメニューは通常の文字のリンクをCSSを使って枠をつけ、背景をつけてまるでボタンのような大きなものに見せているだけです。 通常の文字だけのリンクは以下の【説明1】のようにすることで、マウスがリンクに触れているときだけ色を変えたりすることができます。 これを同じように、このサイトさんの場合は「マウスが触れているときだけ背景色を白に変える (触れていないときはピンクですね)」という指定をCSSでしているだけです。 --------------------------------- 【説明1】 --------------------------------- a:link { /* 未アクセスのリンク */ color: black; } a:hover { /* リンクにカーソルが重なっているとき */ color: yellow; } a:active { /* リンクをクリックした状態のとき */ color: blue; } a:visited { /* アクセス済みのリンク */ color: red; } --------------------------------- ＞３．タイトルが画像の上に文字を打ってある形になっているのですがこれはどのようにすればいいのでしょう？ タイトルの下の画像は背景です。 テーブルの背景 (background-imageなど) に画像を指定しているだけです。 なので文字は通常通りテーブルの<TD></TD>の中に入っているだけですよ。 説明が下手で申し訳ないです。 わかりにくい部分がありましたら補足します。m(_ _*)m
お礼
回答ありがとうございます。 すごくわかりやすい回答ありがとうございます。 ２の【説明１】なのですが日本語のところはリンクのボタンの画像を指定すればいいのでしょううか？
- suekun
- ベストアンサー率25% (369/1454)
IEを使っているのでしたら、表示→ソースでメモ帳からタグが見えるでしょう。 タグの詳しい内容は参考ページを見てください。
お礼
回答ありがとうございます。 なにぶん、初心者でソースを見ても少ししか理解できなくて。。
お礼
回答ありがとうございます。 なんとか自己解決できました！！ 本当にどうもありがとうございました。 とっても親切に教えてくださって大変感謝しております。 また、質問するかもしれませんが、よろしければご回答願いたいです。