30秒で解決する文章を枠で囲んだりするHTML

ブログを書いたりしてると、ここだけ枠で囲いたいなと思うときがあるよね。

そのたびに、調べてコピペするけど、終わったらいつの間にか捨てて(消して)、ありゃ?この前のどこにやったっけ…ってなる。

僕はもう、そんな過ちを冒したくないんだ。

シンプルな枠で文章を囲う

ここに本文
あっあっあっあっ
あっあっあっあっ
あっあっあっあっ

<p style="border:1px solid #888888; font-size:14px; font-color:#808080; line-height:120%; padding:10px; width:200px;">ここに本文
あっあっあっあっ
あっあっあっあっ
あっあっあっあっ
</p>
  • borderは線の指定。左から太さ、線の種類、色。
  • fontサイズは文字の大きさ。
  • fontカラーは文字の色。
  • lineなんちゃらは行間。
  • paddingは余白。
  • widthはワイド。
角が丸くなる

ここに本文
あっあっあっあっ
あっあっあっあっ
あっあっあっあっ

<p style="border:1px solid #888888; font-size:14px; font-color:#808080; line-height:120%; padding:10px; width:200px; border-radius:10px;">
ここに本文
あっあっあっあっ
あっあっあっあっ
あっあっあっあっ
</p>
  • 角の調節は最後の10pxを変える。
文字のハイライト

ハイライト

<mark>ハイライト</mark>
シンプルなテーブル

セル1セル2セル3
セルaセルbセルc
セルdセルeセルf

<table>
<tr bgcolor="#f5f5f5"><td>セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セルa</td><td>セルb</td><td>セルc</td></tr>
<tr bgcolor="#f5f5f5"><td>セルd</td><td>セルe</td><td>セルf</td></tr>
</table>
  • セルの中に文字を書き換えます。
マーキー( marquee )

あっあっあっあっあっ

<marquee>あっあっあっあっあっ</marquee>
オマケ

http://b.hatena.ne.jp/guide/bkuma_girls

<marquee width="201px" behavior="alternate" scrollamount="10" >
ここに画像
</marquee>
  • width(幅)は、画像サイズにプラス1pxしてください。
  • アドセンス(広告)を揺らすとグーグル神が雷を落とします(たぶん)。
まとめ

うん。よし。

検索してると、やたら凝ったデザインが多くて困るよ。ぜんぶコピペしてペタっと貼ってもいいんだけど、パクった感があってなんかモヤモヤするし。

ここに集めたのは、なんの手も加えていない純真で無垢な子たちばかりなんだ。いつだって安心して抱きしめることができる。

CSS書けってのは、もっともなんだけど、そんなに頻繁に使わないし、反映されなかったときのストレスが尋常じゃないからね。


お役に立てば幸いです。