ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：diehardbru スタイルシートで枠の作り方
困り度：
  • 困っています
 よろしくお願いします。例えば、<a href="">ここ</a>
「ここ」の部分を、枠で囲うなどして、装飾したいのですが、スタイルシートを使って出来ましたら、参考になるサイトなどを教えて頂きたいです。よろしくお願いします。
質問投稿日時：08/03/31 17:19
質問番号：3910533
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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​
種類：回答
どんな人：一般人
自信：参考意見
回答日時：08/03/31 17:55
回答番号：No.4
この回答へのお礼ご回答、有難うございます。いろいろアレンジできたので、とても参考になりました。有難うございました。

回答

良回答10pt
回答者：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>をその様なレイアウト目的に用いるのは推奨されていません。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/31 17:48
回答番号：No.3
この回答へのお礼ご親切に、長文での回答を有難うございます。とても見やすく、参考になりました。

回答

 
回答者：yambejp 囲むだけならこんな感じで

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

<a href="" class="kakumu">ここ</a>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 17:42
回答番号：No.2
この回答へのお礼ご回答、有難うございます。自分の望み道りに出来ました。有難うございました。

回答

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

下記リンクの
「枠の角を丸くする」
というのが参考になると思います。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 17:32
回答番号：No.1
参考URL： ​http://zumirin.cool.ne.jp/kowaza/​
この回答へのお礼参考URLが、とても分かり易く、大変、参考になりました。
ご親切に、有難うございました。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ