CSS記述メモ
- 2009/06/16(Tue)
ちょっと面白くなって来たので、ちょっとスタイルシートについてのメモ。
まず、普通に文章流し込む時の記述。ページ左寄りに表示。
☆ 白背景 (ごく薄い水色に黒がひと色薄目)
body { line-height:17pt;
font-size:10pt;
color:#191c1c;
background-color:#efffff;
margin-top:3%;
margin-left:3%;
margin-right:40%;
}
* 別タイプの配色 (末尾の数字は意味なし)
◎ 紫味の灰色背景 (42)
color:#191c1c;
background-color:#eff4ff;
◎ ベージュ&緑味の鉄色 (54)
color:#223945;
background-color:#ffffea;
★ 黒背景 (白背景の、文字背景色逆転バージョン)
body { line-height:17pt;
font-size:10pt;
color:#efffff;
background-color:#191c1c;
margin-top:3%;
margin-left:3%;
margin-right:40%;
}
* 別タイプの配色 (やや褪せた黒&灰色、上が眩しい場合に)
color:#c6c6c6;
background-color:#303030;
☆ 中央配置バージョン (色は適当、薄いピンク背景)
body { line-height:17pt;
font-size:10pt;
background-color:"#f5f5f5";
margin-top:5%;
margin-left:10%;
margin-right:10%;
}
☆ テキスト両端を揃える記述
text-align: justify;
text-justify: inter-ideograph;
☆ 単発DIVの記述例
div style="FONT-SIZE: 10pt; MARGIN-LEFT: 7%; COLOR: #efffff; LINE-HEIGHT: 17pt; MARGIN-RIGHT: 40%; BACKGROUND-COLOR: #f5f5f5"
☆ そこだけDIV&水平線
div style="margin-right: 40%; color: #c0c0c0"
hr align="left" noShade size="1"
CSSを自分でやり始めてから、タグ打ちが楽しくなった。
とは言え、使ってるTTTEDITはタグ挿入タイプなので、いちいち全部打ってるわけじゃないけど、やっぱり自分でひとつひとつやって行くと、ソースの見た目がきれいにできていい。
コラムとかは、ひとつ作ってしまえば他は応用なので、これでいいと思ったのをコピペ。
形を見るためにalphaEditaを使うけど、雛形ができてしまった後は全部タグをひとつひとつ打ってゆく。
テーブルでレイアウトを作るよりも、もっと表現が柔軟な感じ。できる形は同じだけど、修正とかが簡単な気がする。
だーっと打った文章を、後でまた別のファイルに移動させるとか、そういうことを考えると、CSSの方が一気に大量コピペとかはやりやすいかな。
フォントを選んで、なるべく行間の大きい見かけのをと必死になってたのがウソみたい。いちいち字のサイズだの色だの、心配しなくてもCSSで一発。ありがたやありがたや。
ネスケの頃のソースの汚さが、今は耐えられない。
初めてHTMLやった時に、レイアウトもへったくれもなく、とにかくだーっと字を並べるだけ。その後、テーブルでレイアウトができるということに気づいて、ずっとそれ一辺倒だったけど、敷居が高いと思ってたCSSに、思い切って手を出してみてよかった。
大量に貼り付けた文章を一瞬で表示してくれるありがたさ。読みやすいのもとにかくありがたい。
これからは、なるべくタグ直打ちを心がけてみようと思う。
しかし、インストールして以来、CGIの記述変更くらいにしか使ってなかったTTTEDIT、あまりの便利さ、高機能さにびっくり。よくできたソフトだ。ほんとにびっくり。
いずれいずれ、ブログのテンプレートとかもいじってみたいなあ。Javaとかは使わないけど、レイアウトだけ、ちょっと自分の好きにやってみたいなあ。
今なら記述も、少しくらいならわかるし、ちょっと勇気を出して。新たな野望。えへへへへ。
* タグをそのままコピペしたら表示してくれなかったorz というわけで記述の一部を削除。