ブログに<div>タグで矩形(ボックス)を描く
ブログ記事を書いているときに、文章を引用したい場合などがあると思います。
引用した文書を矩形(ボックス)で囲むと、引用がわかりやすくなります。
たとえば次のような感じです
Josh Lowensohn (CNET News) 翻訳校正: 川村インターナショナル 2011/06/13 07:30
ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。
これはどのようなタグで実現しているかというと、次の通りです。
<div style="margin: 10px;">
<strong>「MobileMe」から「iCloud」へ--アップル新旧クラウドサービスの違い</strong>
</div>
最初の<div>タグのスタイルのborder: 1px dottedが矩形の枠を定義しているところです。1pxは線の太さを1ピクセルにする、dottedは線を点線にするということを意味しています。
試しに、2px solidにしてみると、次のようになります。
Josh Lowensohn (CNET News) 翻訳校正: 川村インターナショナル 2011/06/13 07:30
ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。
その次の<div>タグのスタイルにmargin:10pxとありますが、これは矩形の中に上下左右10pxのマージンを取るという意味です。これを0にすると、次のような感じになってしまいます。
Josh Lowensohn (CNET News) 翻訳校正: 川村インターナショナル 2011/06/13 07:30
ハリウッドの映画スタジオが、人気のないスーパーヒーロー映画を復活させようとするように、Appleは米国時間6月6日、自社の製品の1つについて、元からある数多くの欠点を修正した新製品として復活させることで、その製品自体は終了させることを発表した。同社は同時に、「MobileMe」は失敗だったことを認めている。「iCloud」はMobileMeの苦い記憶を過去のものにできるだろうか。Appleはぜひそうしたいと考えている。
やはりマージンを取った方が見やすいと思います。
このようにタグを直接書けるブログでは、<div>タグを使って矩形を描くことによって、記事を見やすくすることができます。
| 固定リンク | 0
「パソコン・インターネット」カテゴリの記事
- マイナンバーカードのマイナポイント第二弾で「MKCZ346E」エラー(2022.06.30)
- Goole Mapが衛星3D表示やストリートビューで真っ暗になり落ちる(2022.03.20)
- Yahoo Inc設立(1995年3月2日)(2022.03.02)
- 【解決方法】一太郎2022でATOK Passportの利用開始手続きができない(2022.02.18)
- ATOKオンメモリマネージャを停止する方法(2022.01.05)
コメント