グッドデザイン賞を受賞したウォーターサーバー >>

よろしくお願いします。例えば、<a href="">ここ</a>
「ここ」の部分を、枠で囲うなどして、装飾したいのですが、スタイルシートを使って出来ましたら、参考になるサイトなどを教えて頂きたいです。よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

枠線は border 属性で指定します。



border-width で枠線の太さを、
border-style で枠線のスタイルを
border-color で枠線の色を指定します。

まとめて指定するときには、たとえば、次のように指定します。

{border:thick dotted blue;} ---太め、点線、青の枠線
{border:thin double red;}------細め、二重線、赤の枠線

「とほほのスタイルシート入門」
http://www.tohoho-web.com/css/reference.htm#border

border-style の例(ページの後半にあります)
http://www.kanzaki.com/docs/html/htminfo17-2.html
    • good
    • 0
この回答へのお礼

ご回答、有難うございます。いろいろアレンジできたので、とても参考になりました。有難うございました。

お礼日時:2008/04/01 14:31

> 枠で囲うなどして、装飾したいのですが、スタイルシートを使って出来ましたら



「枠で囲う」だけで良いなら、単純に(ANo.2の回答者様とほぼ一緒ですが):
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<p>詳細は<a href="">ここ</a>をクリックして下さい。</p>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
a {
border: solid 1px #000000;
padding: 1px;
}
---------------------------------------------------------------------
で、できます。枠線を入れることでディフォルトの下線が邪魔になる様でしたら、text-decoration: none; の追加を。もし枠の形状や色を変えたいなら、borderプロパティの定義を変えることでいくつかヴァリエーションは持たせられます。枠線とテキストの余白を調整したければpaddingの値を増減させて下さい。背景色(画像)を入れたければbackgroundプロパティを追加して下さい。
そのあたりの応用についてはググって下さい。簡単ですので。

ちなみに、<a>の部分のみ<table>で囲ってしまうと、<table>はインライン要素ではない為、
---------------------------------------------------------------------
詳細は(改行)
ここ(改行)
をクリックして下さい。
---------------------------------------------------------------------
という表示になってしまうので、ご注意下さい。また、<table>をその様なレイアウト目的に用いるのは推奨されていません。
    • good
    • 0
この回答へのお礼

ご親切に、長文での回答を有難うございます。とても見やすく、参考になりました。

お礼日時:2008/04/01 14:25

囲むだけならこんな感じで



<style>
.kakumu{
border:solid 1px #000000;
text-decoration:none;
}
</style>

<a href="" class="kakumu">ここ</a>
    • good
    • 0
この回答へのお礼

ご回答、有難うございます。自分の望み道りに出来ました。有難うございました。

お礼日時:2008/04/01 14:29

AタグをTABLEタグで囲って


TABLEタグにスタイルシートを適用するというのはどうでしょう?

下記リンクの
「枠の角を丸くする」
というのが参考になると思います。

参考URL:http://zumirin.cool.ne.jp/kowaza/
    • good
    • 0
この回答へのお礼

参考URLが、とても分かり易く、大変、参考になりました。
ご親切に、有難うございました。

お礼日時:2008/04/01 14:21

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング