晴交雨獨 No.21 | prev | next |

気楽に書くHTML 2

日記程度のスタイルシート

実際日記程度を書く場合に必要な構成要素はどんなものでしょう？まず全体のタイトル。「7月の日記」といったもの。次は日付です。必要なら天気もいれます。その次に本文ですね。あとはたまに使う強調、引用といったところでしょうか。これに翌日との間に区切り線が欲しいですね。HTMLの要素としては「h1」「h2」「p」「strong」「blockquote」、これに区切り線には「hr」を使わず、一日を「div」で区切る形でセットとしましょう。つまり使うのはこの位で済みます。

では個々に設定してみましょう。「7月の日記」は大見出しになります。h1をつかいます。

h1 {font-size:2em;color:white;
background-color:blue;
margin:1em 2em;
padding:0.2em 1em;}

つぎは区切りの線を上下に配します。これを一日のユニットにします

div.day{
border-top: 3px double blue;
border-bottom:3px double blue;
margin:1em 3em 0.5em;
padding:1em;}

日付は中見だしで行います。

h2 {font-size:1em;
    color:blue;
    background-color:transparent;
    margin:1em 2em;
    border-top: 3px double blue;
    border-bottom:3px double blue;
    padding:0.2em 1em;}

これに本文

p {font-size:1em;
    color:black;
    background-color:transparent;
    margin:1em 1em;
    line-height:150%;
    text-indent:1em;
     padding:0.2em 1em;}

とりあえず以上を「diary.css」とでもしておきます。これを本体部分の日記を書いたファイルの＜ｈｅａｄ＞と＜／ｈｅａｄ＞の間に次の
　<LINK rel="stylesheet" type="text/css" href="diary1.css">
を書きこみリンクします。ちなみに指定する順番はバラバラにしました。もっとも実際には自分なりのルールで書かれたほうが修正が楽です

ちょっと用語の説明

単位で使っている「em 」は文字サイズを意味しています。文字のサイズ、それもフォントの幅－上下方向－を基準としているますす。この単位を使うのは画面サイズ（20インチ、17インチ、15インチ）に画面の領域（800 x 600、1024 x 768、1280 x 1024など）もあり、絶対値pxを指定した場合あまりにも表示され方に差異がでると思われるからです

「maragin」はページに収納される箱同士の間隔を決めます。設定しないと箱は上下で密着します。ひとまとめにしていする場合は「margin:1 1 1 1」の場合は「上　右　下　左」との間隔を指定します。個々に「margin-bottom 」（下側）だけという形でも指定できます。

「padding」は日本語にすると詰め物です。例えばヘルメットの中の白いスポンジ・フォームのものをパッドと呼んだりしますよね？あぁ言ったものだと思ってください。これも「上　右　下　左」と指定できます。個別にもしていできます。この padding はちょっとすっきりと見せる場合に随分と効果的です。
これはパディングがないもの



これはパディングがあります。

いかがでしょう？微妙な違いかもしれませんが、ちょっと受ける感じが変わるとおもいます。

「border」は枠線です。色、幅、形（二重線、点線、など8種類）が指定できます。組み合わせることも上下のみ、右－下の組み合わせも様様なバリエーションが作れます。

表示指示の要素から開放

まず書きこんだ日記をみてみましょう。 「7月の日記」のHTMLで札をつけたものです。ただし日記の内容に意味はありません(^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-2022-JP">
<TITLE>7月の日記</TITLE>
<LINK rel="stylesheet" type="text/css" href="diary1.css">
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY>
<h1>文月</h1>
<div class="top">
<h2>七月一日</h2>
<P>朝からどうも調子が悪い。午後から寒月が来訪。このところまた疼痛がするこ
とを話すと修善寺に行けと言う。行きたいのはやまやまなれど大患のことがあるゆえな
かなか難しいと言うと、いや、修善寺ですよ、あなた。などと続ける。痔には修善寺、
修繕　痔ですよ、と詰まらないことを続けるので猫をけしかけて追い返す</P>
</div>
<div class="day">
<h2>七月二日</h2>
<p>朝からどうも調子が悪い。午後から寒月が来訪。このところまた疼痛がする
ことを話すと修善寺に行けと言う。行きたいのはやまやまなれど大患のことがあるゆえ
なかなか難しいと言うと、いや、修善寺ですよ、あなた。などと続ける。痔には修善寺、
修繕　痔ですよ、と詰まらないことを続けるので猫をけしかけて追い返す</p>
</div>
</BODY>
</HTML>

この「<div class="day">」から「</div>」のなかにある日付を更新して 「p」の間に文章を書いて行くだけです。取り合えずこれだけ。文字のサイズや色を一々指定するような面倒なこともありません。これだったら気楽に書けるのではないでしょうか？またよく使うであろう「<p></p>」は「ほんぶんっ」とでも単語登録してしまえばキーボードから手を離すことなく作業できます

さてスタイルシートと組み合わせるとどんな風に見えるのか
7月の日記　タイプ　１をみてください

背景が寂しいなら後ろにちょっと絵をつけて、区切り線の色を変更してみます。日付の背景にもちょっと画像を配します。上下だけだった枠を回りに配します→diary2.txt(参照用に拡張子をテキストにしてあります）。本文は同じものです。7月の日記 タイプ　２

ちょっとだけ、雑談風にあれこれ
→気楽に書くHTML　3

| prev | next |
cheer down