知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

解決済

clip!clip!
Ads By Google

記事の本文の一部を枠で囲む方法を教えてください。

現在、“桜(3カラム)”のデザインを使っています。本文の一部を枠で囲みたいのですが、方法が解らないので、やり方を教えてください。ちなみに、以前、他の方の質問の中で引用されていた
のページにある方法を見てやってみたのですが、うまくできません。このページの説明ではCSSのページに、例えば、以下のような
.blockquote{
border: 1px solid #C0C0C0;
padding: 5px 5px 5px 5px;
background: #ffffff;
}
を挿入する、とあるのですが、
挿入する場所はどこでもいいのでしょうか。
また、CSSのページには、既に
blockquote{
border:2px dotted #f6d6d1;
padding:10px;
margin:10px;
text-align:left;
}
という箇所があるのですが、これをいじるのではなく、新たに、上記のような記述を記入するということなのでしょうか。
よろしくお願いします。

2006-07-15 08:50の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2006-07-15 20:41:07ベスト
ども AQ です。

ページにある方法を見てやってみたのですが、
うまくできません。

どこでわからなくなりましたでしょうか?

.blockquote{
border: 1px solid #C0C0C0;
padding: 5px 5px 5px 5px;
background: #ffffff;
}
を挿入する、とあるのですが、
挿入する場所はどこでもいいのでしょうか。

別にどこでも良いですよ。CSS の真中でも、一番最後でも。
あなたのわかりやすい場所に記述して下さい。

これは引用( blockquote ) をわかりやすく説明する為に、blockquote の言葉を使用して、前に " . ( ドット ) " を付けて、クラスと言う属性の仕様にしたためです。

別に .waku{ } でも、.kakomi{ } でも
言葉は何でも良いのです。

ちなみに .blockquote{ } とした場合、記事本文の言葉に囲みを付ける場合はこうなります。

<div class="blockquote">文章あれこれ</div>

これで、CSS の中の記述どおりの指示が、記事本文の文章に適用されます。

また、CSSのページには、既に
blockquote{
border:2px dotted #f6d6d1;
padding:10px;
margin:10px;
text-align:left;
}
という箇所があるのですが、これをいじるのではなく、
新たに、上記のような記述を記入するということ
なのでしょうか。

上記のような記述を新たに記入して、クラス属性として指示を与えても良いし、この既存の記述を利用してもどちらでもどうぞ。

" . ( ドット ) " を付けないで blockquote{ } とする場合が通常の 「 引用 」 の記述となります。この記述の指示を、記事本文内の文章に適用させる場合は ・・・

<blockquote>文章あれこれ</blockquote>

と囲めば、CSS 内の記述の指示が適用されます。
回答レベル : 回答

1.

2006-07-15 13:42:30ベター
直接AQさんに伺ってみてはどうでしょうか(^^;)

ちなみに・・私も同様の方法でチャレンジしようと思ったのですがうまくいかず。。また私の場合"枠で囲む"ことが頻繁ではないので必要な時だけテーブルを使用して囲むようにしました。
ですので、このことでCSSはいじっておりません。

記事投稿画面で
<TABLE cellspacing="10" cellpadding="1" bgcolor="#eaffea" style="border:3px dotted #d9e6df"><TR>
<TD bgcolor="#eaffea"><font color="#457a6d">

●●●囲いたい記事●●●

</TD>
</TR>
</TABLE>

このようにしています。
見本はこちら。


囲む線の形(実線、点線など)、線の太さ、色や
中の文字の色やサイズもその時の気分でいちいち入力しています。
もっと簡単な方法もあるのでしょうが。。しょっちゅう出番があるわけではないし初級者なので、出来あがりが囲まれていればいいか。みたいな気持ちデス。。
Ads By Google

コメント(4)

#1.  AQ
2006-07-15 20:46:11

あの記事、わかりにくいみたいなんで、コメント欄の
やり取りも含めて再構成しておきますね。
続いて質問があれば、コメント欄にどうぞ。

#2.  kimmay
2006-07-16 01:47:29

>>1.popさん、アドバイス、ありがとうございます。Tableを利用し、あれこれ試行錯誤を繰り返し、なんとか枠で囲むことができました。ありがとうございます。

#3.  kimmay
2006-07-16 01:49:23

>>2.AQさん、丁寧に説明して頂き、ありがとうございます。AQさんの回答を見ながら、CSSのほうで設定する方法を、もう一度トライしてみます。

#4.  AQ
2006-07-16 02:41:17

> kimmay さん
ベストありがとうございます ・・・ が、元々僕の書いた記事が
わかりにくかったから、こういう質問なさったんですよね ^^;
ホントすみませんでした。暇見て、記事の修正をしておきますね (^^)

トラックバック(2)

トラックバックURL: