zCSSをホームページに使いましょ。その1
ホームページってのはブログと違って、文字の大きさや行間、文字色はもちろん、文字の背景色まで自由自在に変えられるのがいいですね。だからこそ、作るのがちょっと面倒くさいかな。でも、たかが文字です。そのCSSとやらを活用して、文章をもっと読みやすく、印象の強いものにしてみたいと考えました。
言っておきますが、私はホームページやCSSに関しては全くの初心者です。それに覚えたことはかなり忘れてしまいがちな還暦過ぎのじいさんなので、覚えたことをこのホームページに書き留めながら、勉強していきます。さあ、皆さんもご一緒に、どうぞ。
ところで、CSSというのは、タイトルの下に、 <style type="text/css">を入れたらいいそうです。
<title>Untitled Page</title>
<style type="text/css">
てな具合にね。
で、早速、試してみました。
ほらね、文字の大きさが
24ピクセルになっているでしょ。
<style type="text/css">
.ookisa24 {
padding: 10px;
font-size: 24px;
}
</style>と定義づけて、
で、ソースの方に、
<div class="ookisa24" align="left">
<p>で、早速、試してみました。<br />
ほらね、文字の大きさが<br />
24ポイントになっているでしょ。</p>
</div>
と書いたのです。
ところで padding: 10px; というのは、文字の上下左右をどれくらい空けるか
という、幅を10pxにしています。
ほらね上下左右の隙間、paddingが5ピクセル。
ほらね上下左右の隙間、paddingが50ピクセル。
この文字列の周囲との隙間が、かなり空きましたねえ。
とりあえずはこんな感じで、どんどんお勉強お勉強。
ところで、上の、青色で書かれた文字部分は、文字色をブルーに指定し
フォントサイズを12ピクセルに、フォントをゴシック系に、
行間は20ピクセルです。
.gyoukan01 { color: blue; font-size: 12px; font-family: "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka−等幅, Osaka, 平成角ゴシック; line-height: 20px; }
と、CSSを定義づけます。
あ、そうそう <style type="text/css">で、始めたら、
</head>のタグの前に、 </style type>で閉じることもお忘れなく。
行間を30ピクセルにすると
<div class="ookisa124" align="left">
<p>で、早速、試してみました。<br />
ほらね、文字の大きさが<br />
24ポイントになっているでしょ。</p></div>
となるし。
行間を14ピクセルにすると
<div class="ookisa124" align="left">
<p>で、早速、試してみました。<br />
ほらね、文字の大きさが<br />
24ポイントになっているでしょ。</p></div>
と、窮屈になりましたね。
こんな風に行間で読みやすさが変わるのです。
私の個人的な意見ですが、一番バランスが良く、
見やすく、読みやすいのは、
文字が13pxで、line-heightが26pxくらいが
一番読みやすいのではないでしょうか。
この文章は文字13pxで、line-height26pxです。
12pxの文字は若い人には読めても、私のような
還暦過ぎのじいさんには文字が小さすぎるかな。
反対に 14pxより文字を大きくするとダサくなるから難しいところですね。
書体の明朝系、ゴシック系は読む人の好みだろうな。
縦書きなら明朝、横書きならゴシック、が良いような気がするけど。
もういちど、文字の大きさのおさらい。
で、早速、試してみました。
ほらね、文字の大きさが
24ピクセルになっているでしょ。
ソースは、フルに書いてみると、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>24px Page</title>
<style type="text/css">
.ookisa24 {padding: 10px; font-size: 24px;}
</style>
</head>
<body>
<p><div class="ookisa24" align="left">
<p>で、早速、試してみました。<br />
ほらね、文字の大きさが<br />
24ピクセルになっているでしょ。</p>
</div>
</body>
</html>
となるんですよ。これは、今は無き懐かしのソフト、Adobe GoLive CS2
で、作っています。ドリームウイーバーは使いにくいよー。
次は枠線にトライしてみますね。
つまりは囲み罫のこと。
カツオ節の健康効果
どうしたかというと、CSSの定義を
p.sample1 {border: solid 1px #ff0000;}
としました。ソースは、
<p class="sample1">カツオ節の健康効果<br /></p>
これだけです。
solidというのは実線。 1pxは実線の太さ。#ff0000は枠色で赤ですね。
上の赤系囲みは、中の文字が窮屈なので、
もうちょっと余裕を持たせてみます。CSSの定義を
p.sample2 {border: solid 2px #0000ff; padding: 10px;}
とすると
鰹節には美肌効果があります。
囲みの中が窮屈ではなくなりました。
ところで、CSSを使わなくても、枠線を作る方法があるんですね。それが、これ。
鰹節に多く含まれる旨み成分、イノシン酸は基礎代謝の向上や細胞の活性化を促進します。つまり強力に肌を修正する美肌効果があるのです。この他、必須アミノ酸のヒスチジン、抗疲労作用のあるアンセリン、エネルギー源となるクレアチン、EPA・DHA、ビタミンB群を豊富に含んでいます。
ソースを、<blockquote style="border:1px solid #ff0000;padding:10pt;">鰹節に多く含まれる旨み成分、イノシン酸は基礎代謝の向上や細胞の活性化を促進します。つまり強力に肌を修正する美肌効果があるのです。この他、ヒスチジン、アンセリン、クレアチンなどのアミノ酸、EPA・DHA、ビタミンB群を豊富に含んでいます。</blockquote>
という風に、タグで挟めばいいだけ。でもこれは引用を意味するので、引用文で利用してくださいね。
次は、囲み罫でベタ背景色の抜き文字に挑戦してみましょう。
カツオ節の
すごい健康効果
大雑把ですが、こんな感じです。
方法としては囲み罫と背景色（background-color）を、同じ色にします。
文字を、白い文字、または薄い色の文字にすると
出来上がりというわけです。簡単でしょ。
CSSの定義は、
p.sample3 {border: solid 1px #0000ff; padding: 5px; color: #ffffff; font-size: 20px; font-family: "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka−等幅, Osaka, 平成角ゴシック; line-height: 28px; background-color: #0000ff;}
で、
ソースは、
<p class="sample3">ぬきもじ<br />
抜いた文字<br /> </p>
の、これだけです。
大特価!! 花かつお1キロ2,376円
これはCSSの定義が、
p.sample4 {border: dotted 2px #0000ff; padding: 5px; color: #ff0000; font-size: 36px; font-family: "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka−等幅, Osaka, 平成角ゴシック; line-height: 28px;background-color: #ffff66;}
です。系囲みを、点々のドット線にしてみました。
ソースは、<p class="sample4">大特価!! 花かつお1キロ2,376円<br />
</p>
とすればいいだけ。簡単でしょ。
border: dottedは、線を点線、ドットにするということ。
ところで、上に書いた大特価の花かつお1キロ2376円は、本当ですよ。
場所はね、大和郡山市の国道25号線沿いにある、奈良県中央卸売市場にある
「奈良鰹」というお店で買ったものです。
中央卸売市場だけど、私たちのような一般人でも気軽に買うことができます。ぜひ、行ってみてくださいな。
枠の中が窮屈なので、paddingを12pxにすると見やすくなりました。ほらね。
大特価!! 花かつお1キロ2,376円
ところで、だらだらと縦長になりましたね。
文字組も、圧倒的に左に寄っているし、読みにくいったらありゃしない。
ま、そんなわけで、次回からはセルというか、テーブルの箱組を上手く活用して
見やすく、読みやすくしましょうね。
日々、勉強勉強です。ふーう。
ちょっと、テーブルとセルの勉強もしておこう。
下が、基本的な3行3列のテーブルで、合計9つのセルがある。
私は、この枠線が好きじゃないので、実線にしてしまったのが
下のCSSを使ったテーブルです。
このように、枠の色を赤に変えることもできる。
ちなみに、黒枠はCSSの定義を、
table.tanasam1 {border: solid 1px #000000; border-collapse: collapse;}
td.tanasam {border: solid 1px #000000}
にして、テーブルのソースを
<table class="tanasam1">
<tr>
<td class="tanasam">あ</td>
<td class="tanasam">い</td>
<td class="tanasam">う</td>
</tr>
<tr>
<td class="tanasam">か</td>
<td class="tanasam">き</td>
<td class="tanasam">く</td>
</tr>
<tr>
<td class="tanasam">さ</td>
<td class="tanasam">し</td>
<td class="tanasam">す</td>
</tr>
</table>
赤枠はCSSの定義を、
table.nemu1 { border: solid 1px #ff0000; border-collapse: collapse; }
td.nemu { border: solid 1px #ff0000;}
| あ |
い |
う |
| か |
す |
け |
| さ |
し |
| た |
て |
と |
| な |
に |
ぬ |
ね |
このようにセルを結合したりもできる。
ま、そんなわけで、4行1列幅600ピクセルのテーブルを作り。
枠線は色が999999のグレーにしました。
この中に、上から大きなタイトル文字。
次のセルには小さな文字で撮影日。
3段目には写真と文章。
最後の行セルは、キャプション。
| おいしい、玉子とじうどん、360円なり。 |
|
撮影日時 2015年3月9日12時40分
|
奈良市宝来町に位置し、かつては県立奈良病院と呼ばれていた、現在の奈良県総合医療センターの地階にある食堂は、それぞれのメニューが安くって、なかなかおいしい。もちろん、病院のリーズナブルな食堂で、隔てられたジャバラカーテンの向こうは、医療センターの職員、医師や看護師たちも食べに来る場所になっている。なので、私たちのような一般利用客もセルフサービスとなる。この数々のメニューの中で、とりわけ私の好みなのが、この玉子とじうどん360円である。料理の受取口の横に、天かすが入った碗があるのだが、もちろん好きなだけ入れて良し。私は写真のように、結構放り込んだ。左上の白いカップは、コーヒー用だ。1杯だけ無料で飲める。ランチ時は、なにかを注文すれば、コーヒーがおまけで飲めるのである。さてさて、このうどんだが、麺はまるで普通のスーパーで売っているなんの特色もないうどんだ。しかし、出汁がいい。たっぷりとかつおと煮干しを使い、とってもおいしい出汁が出ているのだ。これでコーヒー付きで360円、文句の付けようがない。
|
|
撮影場所 奈良県立総合医療センター地階食堂
|
| おいしい、玉子とじうどん、360円なり。 |
|
撮影日時 2015年3月9日12時40分
|
奈良市宝来町に位置し、かつては県立奈良病院と呼ばれていた、現在の奈良県総合医療センターの地階にある食堂は、それぞれのメニューが安くって、なかなかおいしい。もちろん、病院のリーズナブルな食堂で、隔てられたジャバラカーテンの向こうは、医療センターの職員、医師や看護師たちも食べに来る場所になっている。なので、私たちのような一般利用客もセルフサービスとなる。この数々のメニューの中で、とりわけ私の好みなのが、この玉子とじうどん360円である。料理の受取口の横に、天かすが入った碗があるのだが、もちろん好きなだけ入れて良し。私は写真のように、結構放り込んだ。左上の白いカップは、コーヒー用だ。1杯だけ無料で飲める。ランチ時は、なにかを注文すれば、コーヒーがおまけで飲めるのである。さてさて、このうどんだが、麺はまるで普通のスーパーで売っているなんの特色もないうどんだ。しかし、出汁がいい。たっぷりとかつおと煮干しを使い、とってもおいしい出汁が出ているのだ。これでコーヒー付きで360円、文句の付けようがない。
|
|
撮影場所 奈良県立総合医療センター地階食堂
|
このように背景に色を入れると感じが変わる。
じゃー、これを応用して、
ブログ風のページを作ります。