Google+ で検索 input!output!: [Web] ブログ記事内の引用をHTMLのみ装飾する方法:【<blockquote>タグ】 Google

2/18/2011

[Web] ブログ記事内の引用をHTMLのみ装飾する方法:【<blockquote>タグ】

このエントリーをはてなブックマークに追加
当たり前の方、知っている方はスルーして下さい。HTMLを全く知らない"超"初心者向け内容です。

お気に入りのブログを見ると、他の方からの引用や書評で文章の引用の際に、引用部分を枠で囲ったりしているのをよく見ます。
どのようにするのかが気になっていましたが、知識がないため今まで避けてきました。しかし、よくよく考えると検索すると一発でわかることで、これをキッカケに興味がある部分からHTMLを学んでいこうを思います。

今回は、第一弾として引用の際に、引用部分を枠線で囲むコードです。

【<blockquote>タグ】

① <blockquote>タグ 
引用文を罫線(枠線)で囲む、また、背景色を変更する。

② 使い方
 <blockquote>~~~~ 
※~~~:引用したい文章を記載する

③ 上下左右に余白をつける方法【padding属性】
padding:15px 15px 15px 15px

④ 枠線を付ける
border:1px solid;#A9A9A9


全てまとめるとこんな感じ ↓↓↓↓
背景色の周りに線をつける


HTMLを全て知ろうとすると、ハードルが高く感じなかなか前に進めませんが気になる部分から学び始めると取っ付き易いですね。
 <blockquote>について、囲み線を太線にすることや背景色を変更するなど、まだまだ色々できる余地があるそうです。
参考にさせていただいた記事は、下記です。
もっと知りたい方はぜひ御覧ください。

Special Thanks