ブログに<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
「パソコン・インターネット」カテゴリの記事
- Google Bardと思考実験「トロッコ問題」の会話してみた(2023.05.12)
- チャットAIはコンテンツを衰退させ自らも衰退する?(2023.04.27)
- BingのチャットAIと神様について会話してみたら(2023.04.22)
- AIチャット検索でドラえもんのアスキーアートを頼んだら(2023年4月1日時点)(2023.04.03)
- Twitterで世界初のつぶやき(Tweet)が投稿される(2006年3月21日)(2023.03.21)
コメント