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

Question

えっと最近HPを作ろうとHTMLを勉強しています
それでわからないとこがあるので教えてください
それはここのHPのトップで
カテゴリーとか検索とかかどが取れた黄色で囲んでありますよね？それはどうやってするのでしょうか？
あと
http://www.biwa.ne.jp/~jansei/game/game/linabi.htm
ここのHPの最初のアイテムについてとか武器とか
ラインの中に文字がありますよね
それはどうやってするのでしょうか？

kamoto · Accepted Answer

「カドが取れた黄色」は＃２で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を読みあさって
覚えると、だんだんわかってくると思います。

novaakira · Answer

＞カテゴリーとか検索とかかどが取れた黄色
ってなんですか？

＞ラインの中に文字・・・
もしかして文字の後ろに色がついているってことでしょうか？

質問にかかれているＵＲＬでは、
スタイルシートを使って文字の後ろに背景色をつけているようです。
http://www.biwa.ne.jp/~jansei/data.css

でスタイルシートを定義しています。
ＤＬしてみてはいかがでしょう？
(これでryuusennsishoさんがＩＥを使っているってことも分かりました）
ただじここで使われれているスタイルシートはＩＥでのみ
通用するものですのでＮＮでは(たしか)何もかわらなかったと思います。

ttp://tohoho.wakusei.ne.jp/www.htm
でくわしい説明があるので一度いかれては？

norizow · Answer

「教えてgoo！」の中でそれっぽいのは見つけきれませんでしたがもしかして「カドが丸いテーブル（表）を作りたい」のでしょうか？それでしたら… 「丸いカド」は、いちょう型の「画像」です。４つのカド用画像を用意して、３列３行の、枠の無いテーブルの中の、カドに当たる部分に、画像を配置し、セルの間隔（cellspacing）＝０。余白（cellpadding）＝０。と設定します。


	ここに文字が入りますね

norizow · Answer

ＮＯ．２の者です。

の、間にもが、入りますね。失礼しました(;￣ー￣A

novaakira · Answer

ＯＫＷｅｂですか。ためしに保存してみてみればわかります。あれは画像です。自分で作るしかないでしょう。＞スタイルシート・・・まずサイトへアクセスしましょう。ソースを表示すると、内に、 About items と書かれています。このdata.cssがスタイルシートです。そこで、さきほど書いた http://www.biwa.ne.jp/~jansei/data.css へアクセスすると、ＤＬになるかront pageで勝手に開きます。 data.cssの中身は・・・ body{color:#000000;background-color:#dde;・・・・と続いてます。＞

武器

・・・これは名前をつけてます。これは、少し前の武器と書くことでここをクリックすると、a name　で指定したところへジャンプしてくれるタグです。スタイルシートは・・・・ name 名前ここです。クラス指定しているところです。 data.cssの中に .cc2{background-color:#ffb8d5;width:125pt} と書いてあります。このdata.css内で定義したとおりにページで表示されているわけです。スタイルシートについてくわしく知りたいのなら・・・とほほのＷＷＷ入門 http://tohoho.wakusei.ne.jp/www.htm へどうぞ。

norizow · Answer

ＮＯ．２です。何度もしつこくすみません(;￣ー￣A 
直接の質問とは異なるかもしれませんが、アドバイスを…

色んなＨＰのテクを真似してみたい気持ちは、とてもよくわかります。
だけれど、スタイルシートに関しては、
ＨＴＭＬをほぼ完全に理解できるようになってからでないと
使いこなすのは難しいと思います。
私も、つい最近まで、作成ソフトに頼りっきりで、
スタイルシートの役割はおろか、どのタグがどういった意味なのかすら
理解することができませんでした。
仕事でどうしても必要なので、本を何度も何度も読んで覚えたのです。
文章で伝えるのには限りがあります。
回答して貰っても、根本的な意味がわからないことには、
尚更混乱してしまいますよね・・・？
本や、詳しく解説しているＨＰは幾らでもあります。
そういったところで、いちから勉強される事を、是非おすすめしたいです。

さしでがましい事を承知で書きました。ご容赦くださいませ。

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

＞カテゴリーとか検索とかかどが取れた黄色

この回答への補足

「教えてgoo！」の中でそれっぽいのは見つけきれませんでしたが

この回答への補足

ＮＯ．２の者です。

ＯＫＷｅｂですか。

この回答への補足

「カドが取れた黄色」は＃２でnorizowさんが

ＮＯ．２です。

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

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

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

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