• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
noname#27080
noname#27080
回答No.6

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

mituru1986
質問者

お礼

回答ありがとうございます。 なんとか自己解決できました!! 本当にどうもありがとうございました。 とっても親切に教えてくださって大変感謝しております。 また、質問するかもしれませんが、よろしければご回答願いたいです。

その他の回答 (5)

noname#27080
noname#27080
回答No.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>

mituru1986
質問者

お礼

本当に詳しくありがとうざいます。 ただ、これでやってみると、一度ボタンを押して戻ると四角のボタン状のものがただの文字のみに なってしまうのですがこれはどういうことでしょうか?

noname#27080
noname#27080
回答No.4

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部分の日本語での説明 (全角文字) は不具合を起こすことがありますので、念のため削除してくださいね。(一応削除しなくても表示はされませんが。)

mituru1986
質問者

お礼

返事が遅くなって大変申し訳ありません。 そして、親切な回答非常に感謝しております。 これの【CSS部分】と【HTML部分】というのはどこに書き込めばいいのでしょうか?

noname#27080
noname#27080
回答No.3

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

mituru1986
質問者

お礼

再度回答ありがとうございます。 本当に何度も申し訳ありません(^^; 初心者で、どのようにこのボタンみたいなメニューを作ることができるのでしょうか? 何から初めていいのか・・・。

noname#27080
noname#27080
回答No.2

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

mituru1986
質問者

お礼

回答ありがとうございます。 すごくわかりやすい回答ありがとうございます。 2の【説明1】なのですが日本語のところはリンクのボタンの画像を指定すればいいのでしょううか?

  • suekun
  • ベストアンサー率25% (369/1454)
回答No.1

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

参考URL:
http://www.tohoho-web.com/how2/index.htm
mituru1986
質問者

お礼

回答ありがとうございます。 なにぶん、初心者でソースを見ても少ししか理解できなくて。。

関連するQ&A

  • HPのデザイン

    http://home1.netpalace.jp/9/top.cgi このような形(タイトル部分とボタンとメインが別になっているもの)のHPをつくっているのですが なかなかデザインが決まりません。 なので上記のURLのようなHPの形(のデザイン)が乗っているサイトがあれば教えていただきたいです。 HPのサンプルでもかまいません。 できるだけカワイイかんじのものがよいです。 なかなか無いとは思いますが・・・(^^; よろしくお願いします。

  • テーブルの線を上に引っ付けたい

    HP作成初心者です。 いつも回答をいただき、大変感謝しております。 http://home1.netpalace.jp/9/top.cgi​ このサイトのようにテーブルの線が画面の上下に貫通(?)しているようにしたいのですが どのようなタグを入れればいいのでしょうか? よろしくお願いします。

  • フリーの掲示板をデザインしたい

    CGIの知識はないのですが、HTMLの知識はそれなりにあります フリーの掲示板の改造の許可があるとして、この掲示板のデザインを他のページと統一したいのです デザインとは、色やフォント、画像などではなくて、テーブルなどを利用して変えたいのですが、CGIにHTMLをそのまま書き足していっても動作に影響ないでしょうか? たとえば、テーブルを4つに区切って、その1つに掲示板の投稿スペースにして、残りには、HTMLだけで書いたコンテンツを配置したいです CGIにこのような細工をするには、CGIの知識がないと、難しいのでしょうね。。

    • ベストアンサー
    • HTML
  • HPのデザインについて。

    HPのデザインで、どうしてもこれを使いたい!というデザインがあります。…が、どうやって作るのかがわかりません; HPビルダーを所有しています。 パソコンスキルはあるほう…だとは思います。 説明しづらいデザインなので、参考素材サイトをはらしていただきます。 http://www.pw-design.jp/material/index.html このようなボタンを作りたいのですが…。

  • テーブルの設置方法

    HPのトップページに、お知らせなどをテーブル内に書き込みたいのですが、いろんな素材サイトを参考にしても上手くいきません。 ちゃんとソースをコピーして、ソースに貼り付けてるのですが、枠が表示されなかったりします。 単純に枠だけでいいんですが、色を変えたくても、どこが枠の色、文字色なのかもわかりません、、、 枠のみを自分の好きな大きさ、色で作る方法がありましたらよろしくお願いします。 ホームページビルダー5で、WINDOWS XPで作ってます。 初心者なので、言葉足らずかもしれませんが、よろしくお願いします。

  • 両端を開けたデザイン

    最近HPつくりを始めたのですが 他のいろんなサイトを見ていると、 ブラウザの横幅をマックスに使わないサイトが多いです。 私なんかは、テーブルの横幅も100%にしているし、 文字も左から詰めて書いています。 特にみにくいとは思ってないのですが、 どうやって少し両端を開けて中央に表示させるのでしょうか? 例えば こちらのサイトも左右に開いています http://www.shoshinsha.com/hp/1hour/ http://www.justsystems.com/jp/products/hpb/ このサイトもそうです。 こういう風に作った方が見やすいのならば、 頭からお尻までテーブルで囲ってセンターに配置し、横幅を設定すればいいのでしょうか?

    • ベストアンサー
    • HTML
  • テーブルの線を上に付けたい

    http://home1.netpalace.jp/9/top.cgi このサイトのようにテーブルの線が画面の上下に貫通(?)しているようにしたいのですが どのようにタグを打てばいいのでしょうか? よろしくおねがいします。

  • FLASHで、画像に文字を入れてボタン化したのが、うまくボタンにならない・・・

    こちら、FLASHを使い始めて間もないビギナーです。 HP用のコンテンツを作るため、 画像を作成してその上から文字を入れました。 それを「ボタン」としてシンボル変換したのですが・・ 文字枠の部分がボタンとして認識されず、 プレビューで、文字の上にカーソルを持っていっても、 カーソルは手の形に変わらず矢印のままです。 隅に見えている画像の部分は手の形に変わるのですが。 文字のみ「ボタン」へシンボル変換したり、 「ヒット」の項目をいろいろ試してみましたがダメでした・・・ 画像&文字両方ボタンとして認識するのはどうすればよいのでしょうか? 初歩的な質問かもしれませんが、アドバイスお願いいたします<(_ _)>

  • ととメロのi-modeサイトのようなデザインはどうやってつくるのでしょうか?

    ととメロのi-modeサイトのようなデザインはどうやってつくるのでしょうか? i-modeはauのようにテーブルタグは使えない筈なのに、あたかもテーブルでつくったようなデザインがされているんです。例えば、横一行で「「一押しコンテンツ」と書いてあって、その背景には緑ベタで枠がついているのです。しかも、縁取りにも黒という色がついています。 また、このようにして行ごとに色を変えてあるのですが、縁取りが点線のところもあります。区別がすっきりできてとてもいいんです。 自分もあのようなデザインがしたいのですが、PCでアクセスしても見れないのでソースを見て勉強することができないので??と思っております。 URLは、http://ttr.jp/(パソコンではi-mode用のデザインは見れません)です。 どうぞ宜しくお願い致します。

  • テーブルのボーダー(枠)のデザインがダサくなるのはなぜ?(FireFoxやOperaで)

    IE7基準でサイトデザインをしたのですが、FireFoxやOperaなどのブラウザでプレビューしたらテーブルの枠関係のデザインがIEとは違っており困っています。 <table width="100%" border="6" cellpadding="1" cellspacing="1" bordercolor="#333333"> コードはこのようにしており、重要なのはbordercolor="#333333"の部分で、この色はページの背景と同じ色であり、枠の色を背景と同化させ、ボーダーラインを見えなくしたかったのです。 しかしFireFoxやOperaではその枠に余計な明暗のデザインが加わってしまい、枠がもろに見えてしまいます。 これをなんとかできないでしょうか? 環境はDreamweaver8でwindowsXPです。

    • ベストアンサー
    • HTML

専門家に質問してみよう