スタイルシートで枠の作り方

質問

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

回答No.4

Imiko · ベストアンサー

枠線は 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

お礼

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

回答No.3

abril

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

「枠で囲う」だけで良いなら、単純に(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>をその様なレイアウト目的に用いるのは推奨されていません。

お礼

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

回答No.2

yambejp

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

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

<a href="" class="kakumu">ここ</a>

お礼

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

回答No.1

bitsu

ＡタグをＴＡＢＬＥタグで囲って
ＴＡＢＬＥタグにスタイルシートを適用するというのはどうでしょう？

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

参考URL：

http://zumirin.cool.ne.jp/kowaza/

お礼

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