引用文のカスタマイズ。
引用文を線で囲んだりするやり方を手に入れたく、
【Clipper's Memorize No Future.】サンの「超簡単！CSS講座（引用の囲み方）」
を真似しました(爆)
か、カンタンだ！しかも思ったようにできているー！
練習を兼ねてcssに記述した引用文のタグを書いてみる。
blockquote {
margin-right: 2em; margin-left: 2em; padding-left: 1em; padding: 10px;
border: dashed 2px #CCCCCC; width: auto
}
(ﾉﾟοﾟ)ﾉ ｵｵｵｵｫｫｫｫｫｫ-
いいんでないの？(笑)
| 固定リンク
「ウェブログ・ココログ関連」カテゴリの記事
- 画像をポラロイド風にしよう。(2007.02.16)
- ちょ～ブログってかんじぃ～？(2004.12.21)
- ついに手を出してしもた。(2005.02.15)
- センスのイイ扇子。(2005.02.19)
- travelblog(2005.04.18)
コメント
おぉー！
簡単でしょ？ＣＳＳ。
どんどん やっちゃってー！(笑)
あたしの引用文は
blockquote {
line-height: 130%;
border: 4px double #CCE6FF;
padding: 5px 10px 5px 10px;
margin: 3px 20px 3px 20px;
background-color: #ECF1FA;
color: #697497;
width: 330px;
}
滅多に使う機会ナシ(笑)
投稿： 夏希 | 2005.03.24 12:38
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:4em;
と
margin:1em 2em 3em 4em;
は同じ意味です。
時計回りに、上、右、下、左、という順です。
さらに、
margin:1em;
margin:1em 1em 1em 1em;
margin:1em 2em;
margin:1em 2em 1em 2em;
margin:1em 2em 3em;
margin:1em 2em 3em 2em;
のペアはそれぞれ同じ意味です。
paddingも全く同じです。
ということで、(ぺ)のやつは、
blockquote {
margin:auto 2em;
padding:10px;
border:2px dashed #CCC;
width:auto;
}
と書き替えても同じですね。
padding-left:1em; padding:10px;
という書き方だと、パディングの左辺だけを1emに設定した後、パディングの四辺を10pxで設定することになるはずだから(ちょっと自信がないけど)、padding-left:1em;は無意味です。
padding:10px; padding-left:1em;
の順だと意味があるんだけど、こう書くんだったら、
padding:10px 10px 10px 1em;
のほうが少し短いし、解りやすいかな。
ここを見て勉強してみてはいかがでしょうか？
http://www.y-adagio.com/public/standards/tr_css2/toc.html
なお、margin, border, padding に関しては、
http://www.y-adagio.com/public/standards/tr_css2/box.html
に結構解りやすく載っています(と思います)。
投稿： 組長 | 2005.03.24 14:36
おおお！いっぱいコメントが(笑)
時計回りに～っていうのは、ドコかのサイトで書いてあるのを見たなぁ。
リンクした人のをそのままコピって貼り付けて、
paddingだけ付け足した状態なのだ。
ちなみにそれはheavenlyのサイトのcssでは使用しております(笑)
ジックリ読んでやってみます・・・(^-^;
投稿： reine | 2005.03.24 15:42