*
ブログを書いたりしてると、ここだけ枠で囲いたいなと思うときがあるよね。
そのたびに、調べてコピペするけど、終わったらいつの間にか捨てて(消して)、ありゃ?この前のどこにやったっけ…ってなる。
僕はもう、そんな過ちを冒したくないんだ。
シンプルな枠で文章を囲う
ここに本文
あっあっあっあっ
あっあっあっあっ
あっあっあっあっ
<p style="border:1px solid #888888; font-size:14px; font-color:#808080; line-height:120%; padding:10px; width:200px;">ここに本文 あっあっあっあっ あっあっあっあっ あっあっあっあっ </p>
- borderは線の太さ、線の種類、色。
- 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>
まとめ
うん。よし。
検索してると、やたら凝ったデザインが多くて困るよ。ぜんぶコピペしてペタっと貼ってもいいんだけど、パクった感があってなんかモヤモヤするし。
ここに集めたのは、なんの手も加えていない純真で無垢な子たちばかりなんだ。いつだって安心して抱きしめることができる。
CSS書けってのは、もっともなんだけど、そんなに頻繁に使わないし、反映されなかったときのストレスが尋常じゃないからね。
お役に立てば幸いです。