OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

HPのデザインでわからないとこがあります

  • すぐに回答を!
  • 質問No.233108
  • 閲覧数35
  • ありがとう数4
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 63% (187/295)

えっと最近HPを作ろうとHTMLを勉強しています
それでわからないとこがあるので教えてください
それはここのHPのトップで
カテゴリーとか検索とかかどが取れた黄色で囲んでありますよね?それはどうやってするのでしょうか?
あと
http://www.biwa.ne.jp/~jansei/game/game/linabi.htm
ここのHPの最初のアイテムについてとか武器とか
ラインの中に文字がありますよね
それはどうやってするのでしょうか?
通報する
  • 回答数6
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.5
レベル9

ベストアンサー率 41% (26/62)

「カドが取れた黄色」は#2でnorizowさんが
説明しておられるのでできると思います。

でなければ、翔泳社の『HTMLデザイン辞典』の
「角が丸いテキストコンテナを作る」を参照してください。

「武器」のところについては、data.cssを見ると
a:hover{background-color:white;}
というところで指定されています。
これは「アンカー(リンク)されているところに
マウスが乗ったら、背景色を白にしてね」ってことです。

<LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css">
は、スタイルシートをhtmlに指定するためのタグで、
スタイルシート自体のファイルはdata.cssです。

http://www.biwa.ne.jp/~jansei/
の中にファイルは全部収めてありますから、
たいていはこの後ろに目的のファイル名を入力すれば
見たいところが見られます。それで
http://www.biwa.ne.jp/~jansei/data.css
となるんですね。

「開くアプリケーションを指定してください」は、
ファイルが何の形式で保存されてるかわからないときなどに聞かれますが、
テキストならテキストが開けそうなアプリケーション、
画像であれば画像が開けそうなものを選びます。
スタイルシートの場合はテキストなので、
メモ帳やsimple textなどで開けます。

いずれにしろ、上のほうで出した本や、
みなさんが紹介されているURLを読みあさって
覚えると、だんだんわかってくると思います。
お礼コメント
ryuusennsisho

お礼率 63% (187/295)

なるほど~!!すごくわかりやすいです!!
アプリはメモ張だったんですねIEで開こうとしてました
(^^ゞ
えっとお勧めの本さっそく購入してみようと思います
どうもありがとうございました!
投稿日時 - 2002-03-12 10:46:52
-PR-
-PR-

その他の回答 (全5件)

  • 回答No.1
レベル10

ベストアンサー率 36% (60/164)

>カテゴリーとか検索とかかどが取れた黄色 ってなんですか? >ラインの中に文字・・・ もしかして文字の後ろに色がついているってことでしょうか? 質問にかかれているURLでは、 スタイルシートを使って文字の後ろに背景色をつけているようです。 http://www.biwa.ne.jp/~jansei/data.css でスタイルシートを定義しています。 DLしてみてはいかがでしょ ...続きを読む
>カテゴリーとか検索とかかどが取れた黄色
ってなんですか?

>ラインの中に文字・・・
もしかして文字の後ろに色がついているってことでしょうか?

質問にかかれているURLでは、
スタイルシートを使って文字の後ろに背景色をつけているようです。
http://www.biwa.ne.jp/~jansei/data.css

でスタイルシートを定義しています。
DLしてみてはいかがでしょう?
(これでryuusennsishoさんがIEを使っているってことも分かりました)
ただじここで使われれているスタイルシートはIEでのみ
通用するものですのでNNでは(たしか)何もかわらなかったと思います。

ttp://tohoho.wakusei.ne.jp/www.htm
でくわしい説明があるので一度いかれては?
補足コメント
ryuusennsisho

お礼率 63% (187/295)

えっとですねソースを見たんですけどどこが
スタイルシートなのかちょっと分かりません~汗
武器のところは
<h3><a name="w">武器</a></h3>
となっていますが???です
投稿日時 - 2002-03-11 17:37:21


  • 回答No.2
レベル10

ベストアンサー率 26% (32/120)

「教えてgoo!」の中でそれっぽいのは見つけきれませんでしたが もしかして「カドが丸いテーブル(表)を作りたい」のでしょうか? それでしたら… 「丸いカド」は、いちょう型の「画像」です。 4つのカド用画像を用意して、 3列3行の、枠の無いテーブルの中の、カドに当たる部分に、画像を配置し、 セルの間隔(cellspacing)=0。余白(cellpadding)=0。と設定します。 & ...続きを読む
「教えてgoo!」の中でそれっぽいのは見つけきれませんでしたが
もしかして「カドが丸いテーブル(表)を作りたい」のでしょうか?

それでしたら…
「丸いカド」は、いちょう型の「画像」です。
4つのカド用画像を用意して、
3列3行の、枠の無いテーブルの中の、カドに当たる部分に、画像を配置し、
セルの間隔(cellspacing)=0。余白(cellpadding)=0。と設定します。

<TABLE cellpadding="0" cellspacing="0" border="0">
<TBODY><TR><TD>
<IMG src="左上のカド用画像"></TD>
<TD bgcolor="画像と同じ色"></TD>
<TD><IMG src="右上のカド用画像"></TD>
</TR>
<TR>
<TD bgcolor="画像と同じ色"></TD>
<TD>ここに文字が入りますね</TD>
<TD bgcolor="画像と同じ色"></TD>
</TR>
<TR>
<TD><IMG src="左下のカド用画像"></TD>
<TD><IMG src="右下のカド用画像"></TD>
</TR>
</TBODY>
</TABLE>
補足コメント
ryuusennsisho

お礼率 63% (187/295)

あっすいません~そのサイトというのはOK.WEBのほうです~
えっとURLはhttp://www.okweb.ne.jp/index.php3
ここですね
ここのトップページに角が取れた四角で囲んでありました
投稿日時 - 2002-03-11 17:19:39
お礼コメント
ryuusennsisho

お礼率 63% (187/295)

なるほど~!!
角のないのはタグじゃなくて画像だったんですね
要するにテーブルに画像をつけるということですね!
ご回答ありがとうございました~!!
これからもよろしくお願いします!
投稿日時 - 2002-03-11 22:14:12
  • 回答No.3
レベル10

ベストアンサー率 26% (32/120)

NO.2の者です。 <TD><IMG src="左下のカド用画像"></TD> <TD><IMG src="右下のカド用画像"></TD> の、間にも <TD bgcolor="画像と同じ色"></TD> が、入りますね。失礼しました(; ...続きを読む
NO.2の者です。
<TD><IMG src="左下のカド用画像"></TD>
<TD><IMG src="右下のカド用画像"></TD>
の、間にも
<TD bgcolor="画像と同じ色"></TD>
が、入りますね。失礼しました(; ̄ー ̄A
  • 回答No.4
レベル10

ベストアンサー率 36% (60/164)

OKWebですか。 ためしに保存してみてみればわかります。 あれは画像です。自分で作るしかないでしょう。 >スタイルシート・・・ まずサイトへアクセスしましょう。 ソースを表示すると、<head>内に、 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS& ...続きを読む
OKWebですか。
ためしに保存してみてみればわかります。
あれは画像です。自分で作るしかないでしょう。

>スタイルシート・・・
まずサイトへアクセスしましょう。
ソースを表示すると、<head>内に、
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><META http-equiv="Content-Style-Type" content="text/css"><Title>About items</Title><LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css">
と書かれています。
このdata.cssがスタイルシートです。
そこで、さきほど書いた
http://www.biwa.ne.jp/~jansei/data.css
へアクセスすると、DLになるかront pageで勝手に開きます。
data.cssの中身は・・・

body{color:#000000;background-color:#dde;・・・・

と続いてます。

><h3><a name="w">武器</a></h3>・・・
これは名前をつけてます。
これは、少し前の
<a href="#w">武器</a>
と書くことでここをクリックすると、a name で指定した
ところへジャンプしてくれるタグです。

スタイルシートは・・・・
<span class="cc2">name</span>
<span class="cc2">名前</span>

ここです。クラス指定しているところです。
data.cssの中に

.cc2{background-color:#ffb8d5;width:125pt}

と書いてあります。このdata.css内で定義したとおりに
ページで表示されているわけです。
スタイルシートについてくわしく知りたいのなら・・・

とほほのWWW入門
http://tohoho.wakusei.ne.jp/www.htm

へどうぞ。
補足コメント
ryuusennsisho

お礼率 63% (187/295)

えっと私がアホなせいかもしれませんけど
かなり混乱しております<LINK REL="STYLESHEET" HREF="../../data.css" Type="text/css"> ~
これ全体じゃなくて
data.css
だったんですね
でもどこにも色を指定するとこもなく????です
本やとほほもここで質問する前にみたのですが
わかりませんでした~(アホです[壁]-T) ダー)
http://www.biwa.ne.jp/~jansei/data.css
のURLはどこからでたのですか?URLが出てくること自体ちんぷんかんぷんです
ブラウザにこぴぺでクリックしても開くアプリケーションを指定してくださいとでます
なにを選べばいいのでしょうか?
いろいろ質問ぜめでほんとすいません~
投稿日時 - 2002-03-11 20:27:22
  • 回答No.6
レベル10

ベストアンサー率 26% (32/120)

NO.2です。何度もしつこくすみません(; ̄ー ̄A 直接の質問とは異なるかもしれませんが、アドバイスを… 色んなHPのテクを真似してみたい気持ちは、とてもよくわかります。 だけれど、スタイルシートに関しては、 HTMLをほぼ完全に理解できるようになってからでないと 使いこなすのは難しいと思います。 私も、つい最近まで、作成ソフトに頼りっきりで、 スタイルシートの役割はおろか、どのタグが ...続きを読む
NO.2です。何度もしつこくすみません(; ̄ー ̄A
直接の質問とは異なるかもしれませんが、アドバイスを…

色んなHPのテクを真似してみたい気持ちは、とてもよくわかります。
だけれど、スタイルシートに関しては、
HTMLをほぼ完全に理解できるようになってからでないと
使いこなすのは難しいと思います。
私も、つい最近まで、作成ソフトに頼りっきりで、
スタイルシートの役割はおろか、どのタグがどういった意味なのかすら
理解することができませんでした。
仕事でどうしても必要なので、本を何度も何度も読んで覚えたのです。
文章で伝えるのには限りがあります。
回答して貰っても、根本的な意味がわからないことには、
尚更混乱してしまいますよね・・・?
本や、詳しく解説しているHPは幾らでもあります。
そういったところで、いちから勉強される事を、是非おすすめしたいです。

さしでがましい事を承知で書きました。ご容赦くださいませ。
お礼コメント
ryuusennsisho

お礼率 63% (187/295)

自分なりに本やらHPでいろいろ勉強しているんですが
まだまだ未熟で・・・汗
やっぱりHTMLを完全マスターが先ですね~
またよろしくお願いします!
どうもありがとうございました!
投稿日時 - 2002-03-12 10:53:49
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ