ブログ記事で引用文書などを<div>タグで矩形（ボックス）で囲む方法

ココログ「夜明け前」公式サイトで読む

　ブログ記事を書いているときに、文章を引用したい場合などがあると思います。引用した文書を矩形（ボックス）で囲むと引用がわかりやすくなります。たとえば次のような感じです。

　実際にこの記事中で実現してみると次のようになります

所得税法ヲ裁可シ茲ニ之ヲ公布セシム 睦仁 内閣総理大臣伯爵伊藤博文 大蔵大臣伯爵松方正義 勅令第五号 所得税法 第一条 凡ソ人民ノ資産又ハ営業其他ヨリ生スル所得金高一箇年三百円以上アル者ハ此税法ニ依テ所得税ヲ納ムヘシ 但同居ノ家族ニ属スルモノハ総テ戸主ノ所得ニ会算スルモノトス 第二条 所得ハ左ノ定則ニ拠テ算出スヘシ 第一 公債証書其他政府ヨリ発シ若クハ政府ノ特許ヲ得テ発スル証券ノ利子営業ニアラサル貸金預金ノ利子株式ノ利益配当金、官私ヨリ受クル俸給、手当金、年金、恩給金及割賦賞与金ハ直ニ其金額ヲ以テ所得トス 第二 第一項ヲ除クノ外資産又ハ営業其他ヨリ生スルモノハ其種類ニ応シ収入金高若クハ収入物品　

　どのようなタグで実現しているかというと次の通りです。

<div style="border: 1px dotted currentColor; padding: 10px;">所得税法ヲ裁可シ茲ニ之ヲ公布セシム 睦仁 内閣総理大臣伯爵伊藤博文 大蔵大臣伯爵松方正義 勅令第五号 所得税法 第一条 凡ソ人民ノ資産又ハ営業其他ヨリ生スル所得金高一箇年三百円以上アル者ハ此税法ニ依テ所得税ヲ納ムヘシ 但同居ノ家族ニ属スルモノハ総テ戸主ノ所得ニ会算スルモノトス 第二条 所得ハ左ノ定則ニ拠テ算出スヘシ 第一 公債証書其他政府ヨリ発シ若クハ政府ノ特許ヲ得テ発スル証券ノ利子営業ニアラサル貸金預金ノ利子株式ノ利益配当金、官私ヨリ受クル俸給、手当金、年金、恩給金及割賦賞与金ハ直ニ其金額ヲ以テ所得トス 第二 第一項ヲ除クノ外資産又ハ営業其他ヨリ生スルモノハ其種類ニ応シ収入金高若クハ収入物品　</div>

　<div>タグのスタイルのborder:1px dottedが矩形の枠を定義しているところです。1pxは線の太さを1ピクセルにする、dottedは線を点線にすることを意味しています。試しに boder:2px solidにしてみると、次のようになります。

所得税法ヲ裁可シ茲ニ之ヲ公布セシム 睦仁 内閣総理大臣伯爵伊藤博文 大蔵大臣伯爵松方正義 勅令第五号 所得税法 第一条 凡ソ人民ノ資産又ハ営業其他ヨリ生スル所得金高一箇年三百円以上アル者ハ此税法ニ依テ所得税ヲ納ムヘシ 但同居ノ家族ニ属スルモノハ総テ戸主ノ所得ニ会算スルモノトス 第二条 所得ハ左ノ定則ニ拠テ算出スヘシ 第一 公債証書其他政府ヨリ発シ若クハ政府ノ特許ヲ得テ発スル証券ノ利子営業ニアラサル貸金預金ノ利子株式ノ利益配当金、官私ヨリ受クル俸給、手当金、年金、恩給金及割賦賞与金ハ直ニ其金額ヲ以テ所得トス 第二 第一項ヲ除クノ外資産又ハ営業其他ヨリ生スルモノハ其種類ニ応シ収入金高若クハ収入物品　

　同じ<div>タグのスタイルにpadding:10pxとありますが、これは矩形の中に上下左右10pxのマージンを取るという意味です。これを０にすると、次のような感じになってしまいます。

所得税法ヲ裁可シ茲ニ之ヲ公布セシム 睦仁 内閣総理大臣伯爵伊藤博文 大蔵大臣伯爵松方正義 勅令第五号 所得税法 第一条 凡ソ人民ノ資産又ハ営業其他ヨリ生スル所得金高一箇年三百円以上アル者ハ此税法ニ依テ所得税ヲ納ムヘシ 但同居ノ家族ニ属スルモノハ総テ戸主ノ所得ニ会算スルモノトス 第二条 所得ハ左ノ定則ニ拠テ算出スヘシ 第一 公債証書其他政府ヨリ発シ若クハ政府ノ特許ヲ得テ発スル証券ノ利子営業ニアラサル貸金預金ノ利子株式ノ利益配当金、官私ヨリ受クル俸給、手当金、年金、恩給金及割賦賞与金ハ直ニ其金額ヲ以テ所得トス 第二 第一項ヲ除クノ外資産又ハ営業其他ヨリ生スルモノハ其種類ニ応シ収入金高若クハ収入物品　

　このようにタグを直接書けるブログでは<div>タグを使って矩形を描くことによって記事を見やすくすることができます。

ココログ夜明け前｜Googleニュース

にほんブログ村

人気ブログランキングへ

Amazonアソシエイトとしてブログ「夜明け前」は適格販売により収入を得ています。

プライバシーポリシー