ベストアンサー

オンマウスにすると文字がへこむ効果について

2006/04/14 01:40

ＨＰを作っているのですが、初めてでわからない事だらけです。 http://www.geocities.jp/benntousuki/home.html ↑の「過去のお弁当＆パン」や「小さいおかず」のところにマウスを持っていくと、ボタンを押したように文字がへこむのですが、その効果はどのようにしたらよいのでしょうか？ジャバスクリプトのページで一度見かけたのですが、探し出せずに困っています。お分かりになる方がいらっしゃいましたら、教えていただけませんか？よろしくお願いいたします。

nontan555
お礼率74% (44/59)

みんなの回答 （4）
専門家の回答

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

ベストアンサー

myeyesonly
ベストアンサー率36% (3818/10368)

2006/04/14 03:35 回答No.4

こんにちは。思ったより苦労していらっしゃるようなので、種明かしまで書いちゃいます。 <head>～</head>の間に <STYLE type="text/css">  </STYLE> を書くだけで、<a href="xxx">～</a>のような「aタグ」といわれる物で囲まれた部分は、字が引っ込むようになります。 2px は引っ込ませる幅の指定なので、好きな数字を入れてかまいませんが、「px」を忘れないように。全部の「aタグ」で引っ込まれちゃ困る場合は、ほしい部分だけ、<div>～</div>で囲って、<div>の中にスタイルシートを記述するか、フレームが得意なら分けて作っちゃう方が早いかもしれません。このあたりは、ちょっとづつ覚えていきましょう。いずれにせよ、はじめの一歩は人様の物を真似る事からはじめるのが普通です。ではではがんばってください(^^)/~~~

参考URL：: http://pzxa85.hp.infoseek.co.jp/www/www.htm

質問者

お礼 2006/04/14 11:24

お返事ありがとうございます。すごく分かりやすくて、たすかりました・ヽ(´∀`。)ノまねしたいと思っても、なかなか知識がついて行かず、質問したり、調べたりで進まないのが現状ですが、少しづつでは有りますが確実に頭に入ってきております。それも、myeyesonlyさんはじめ皆さんのおかげですね。本当にありがとうございました。また、分からないことがあったときには、質問すると思いますので、見かけた際にはどうか、お助けください。よろしくお願い致します。

その他の回答 (3)

raynya
ベストアンサー率36% (105/290)

2006/04/14 03:32 回答No.3

ちなみに「オンマウスにすると文字が凹む」ではなく「オンマウスにすると文字が右下に僅かに動く」と解釈すると分かりやすいと思いますよ。 a:hover の部分で「リンクの上にカーソルが乗ったときの動作」、 position:relative;top:2px;left:2px; の部分で、「上から2ピクセル、左から2ピクセルの部分に表示」という指定(厳密に言うとちょっとちがうかもしれませんが)をしています。オンマウスにすると文字が右下に2ピクセル移動するのが、凹んでいるように見えるんですね。

質問者

お礼 2006/04/14 11:12

お返事ありがとうございます。そうだったのですか！私には凹んでボタンを押してるようにしか見えてなくて… 「２ピクセル」のところの数字を変えると大きく動くことになるのでしょうか？とても勉強になりました。ありがとうございました。

myeyesonly
ベストアンサー率36% (3818/10368)

2006/04/14 01:49 回答No.2

こんにちは。スタイルシートですね。この方は、スタイルシートをＨＴＭＬの中に記述しているので、「表示」→「ページのソース」でその仕掛けを見る事が可能です。該当部分だけ引用します。 a:hover { text-decoration:none; /*下線を消す（下線を出したいときはtext-decoration:underline）*/ color:#9999ff ; /*マウスが乗ったときのカラー*/ position:relative;top:2px;left:2px; /* マウスが乗ったとき引っ込む */ } あと、適用の仕方など、細かい所は同ページをじっくりご覧になり、ソースも見せていただき、お勉強しましょう。

質問者