ブログに＜ｄｉｖ＞タグで矩形（ボックス）を描く

ブログ記事を書いているときに、文章を引用したい場合などがあると思います。

引用した文書を矩形（ボックス）で囲むと、引用がわかりやすくなります。

たとえば次のような感じです

「MobileMe」から「iCloud」へ--アップル新旧クラウドサービスの違い

Josh Lowensohn （CNET News） 翻訳校正： 川村インターナショナル 2011/06/13 07:30

　ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。

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

<div style="border: 1px dotted currentColor;">
<div style="margin: 10px;">
<strong>「MobileMe」から「iCloud」へ--アップル新旧クラウドサービスの違い</strong>

<p>Josh Lowensohn （CNET News） 翻訳校正： 川村インターナショナル 2011/06/13 07:30 </p>

<p>　ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。 </p>

</div>
</div>

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

試しに、2px solidにしてみると、次のようになります。

「MobileMe」から「iCloud」へ--アップル新旧クラウドサービスの違い

Josh Lowensohn （CNET News） 翻訳校正： 川村インターナショナル 2011/06/13 07:30

　ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。

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

「MobileMe」から「iCloud」へ--アップル新旧クラウドサービスの違い

Josh Lowensohn （CNET News） 翻訳校正： 川村インターナショナル 2011/06/13 07:30

　ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。

やはりマージンを取った方が見やすいと思います。

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

人気ブログランキングへ