このようなデザインにするには・・・？

Question

度々、すみません。
http://home1.netpalace.jp/9/top.cgi
このようなデザインのＨＰを作るにあたって、いくつか質問にお答えいただけるとうれしいです。

１．このサイトの枠（？）はテーブルで作ってあるのでしょうか？

２．左にあるカーソルをボタンに合わすと色が変わるのはどうすればいいのでしょうか？

３．タイトルが画像の上に文字を打ってある形になっているのですがこれはどのようにすればいいのでしょう？

よろしくお願いいたします。

noname#27080 · Accepted Answer

＞一度ボタンを押して戻ると四角のボタン状のものがただの文字のみに

ボタン状のものがただの文字のみになってしまった、ということは正しくCSS部分が適応されていない、ということです。

ただ、ボタンというのはリンクですか？
リンクをクリックして、どのように戻るとそうなってしまうのでしょうか。

ブラウザの戻るボタンで戻ったときでしょうか？
リロードなどは試されましたか？
あとは…その文字のみで表示されてしまったときのソースを見せていただければ解決法がわかるかと思います。

noname#27080 · Answer

こんにちは、No.2です。 --------------------------------- タイトル【HTML部分】 --------------------------------- 上のように基本的に【CSS部分】はからの間にある、の間に記します。【HTML部分】はからまでの任意の場所に記せば大丈夫です。がんばってくださいね☆ --------------------------------- 例 (テーブルレイアウト) --------------------------------- タイトル

noname#27080 · Answer

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部分】 ---------------------------------

◆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部分】 --------------------------------- ちゃんとテストしていないので、ミスがあったらごめんなさい。(^o^; またCSS部分の日本語での説明 (全角文字) は不具合を起こすことがありますので、念のため削除してくださいね。(一応削除しなくても表示はされませんが。)

noname#27080 · Answer

再び失礼します。
No.2で回答した者です。

＞２の【説明１】なのですが日本語のところはリンクのボタンの画像を指定すればいいのでしょううか？

「ボタンの画像」とはどの画像のことでしょうか？

Top、Profile、Diary、BBSとピンクの四角でこの文字が囲われたリンクが縦に並んでいますよね。
このピンクの四角は画像ではありませんよ！

見当違いなことを言っていたらすみません。(x_x;
よろしければ補足をお願いします。

noname#27080 · Answer

こんにちは☆ ＞１．このサイトの枠（？）はテーブルで作ってあるのでしょうか？このサイトさんのソースを見てみればわかるのですが、おっしゃるとおりテーブルでレイアウトされているようですね。＞２．左にあるカーソルをボタンに合わすと色が変わるのはどうすればいいのでしょうか？これはこのソースで言うところの、「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など) に画像を指定しているだけです。なので文字は通常通りテーブルのの中に入っているだけですよ。説明が下手で申し訳ないです。わかりにくい部分がありましたら補足します。m(_ _*)m

suekun · Answer

IEを使っているのでしたら、表示→ソースでメモ帳からタグが見えるでしょう。
タグの詳しい内容は参考ページを見てください。

参考URL：http://www.tohoho-web.com/how2/index.htm

このようなデザインにするには・・・？

＞一度ボタンを押して戻ると四角のボタン状のものがただの文字のみに

こんにちは、No.2です。

No.2です。

再び失礼します。

こんにちは☆

IEを使っているのでしたら、表示→ソースでメモ帳からタグが見えるでしょう。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング