« 大王ウチワ Opuntia robusta | トップページ | 増える地球 »

2011年6月13日 (月)

ブログに<div>タグで矩形(ボックス)を描く

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

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

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

「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のマージンを取るという意味です。これを0にすると、次のような感じになってしまいます。

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

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

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

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

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

人気ブログランキングへ

| |

« 大王ウチワ Opuntia robusta | トップページ | 増える地球 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: ブログに<div>タグで矩形(ボックス)を描く:

« 大王ウチワ Opuntia robusta | トップページ | 増える地球 »