人気ブログランキング | 話題のタグを見る
2006年 03月 13日
最新の台風のHTMLファイル

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>台風14号</title>
<link href="../newspage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="contents">
<div id="header">
<h1>台風14号</h1>
</div><!-- /header -->

<div id="kiji">
<h2>記録的豪雨 泥の海 竹田市倉木で900ミリ超</h2>

<p>台風は六日夕方から夜にかけて県内に最接近。台風を取り巻く発達した雨雲の影響で猛烈な風雨に見舞われ、竹田市倉木では降り始めからの雨量が九〇〇ミリを超えるなど記録的な大雨となった。台風は七日朝には日本海に進み、県内は同日未明に暴風域から、夕方までには風速一五メートル以上の強風域から抜ける見通し。</p>

<p>大分地方気象台によると、六日は県全域で強い雨が降り続き、日田市前津江で一時間に五二ミリを観測するなど局地的に非常に激しく降った。中津、中津市耶馬渓、宇佐市院内、湯布院、豊後大野市温見、竹田、佐伯市宇目の七カ所では二十四時間雨量の最多記録を更新した。</p>

<p>最大瞬間風速は大分市で三七・五メートル(午前十時二十四分)、日田市で二一・三メートル(午後十時三十九分)を観測。沿岸の海域ではうねりを伴う猛烈なしけとなった。</p>

<p>七日は朝まで所によって雨が残るが、天候は回復する見通し。これまでの大雨で地盤が緩んでいる所があるため、土砂災害への厳重な警戒とともに、海上のしけや吹き返しの風にも注意が必要という。</p>

<p>降り始め(四日午前五時)から六日午後十一時までの総雨量は▽竹田市倉木 九一四ミリ▽佐伯市宇目 七四〇ミリ▽湯布院 七二六ミリ▽佐伯 五六三ミリ▽臼杵 五四六ミリ―など。</p>
</div><!-- /kiji -->
<div id="footer">
<p><a href="news2005.htm">ニュースのリストに戻る</a></p>
</div><!-- /footer -->
</div><!-- /contents -->
</div><!-- /container -->
</body>
</html>


# by snocentral | 2006-03-13 10:17 | memo
2006年 03月 12日
ホームページ no.42
台風のファイルを編集します。
no.41でheaderが出来ましたね。

次に記事本体をくくります。
名前は「kiji」にしましょう。
<div id="kiji">
<p>~~~</p>
<p>~~~</p>
<p>~~~</p>
<p>~~~</p>
<p>~~~</p>
</div>
となります。
この際だから、
<p><a href="news2005.htm">ニュースのリストに戻る</a></p>
これもdivでくくりましょう、名前は「footer」とします。

<div id="footer">
<p><a href="news2005.htm">ニュースのリストに戻る</a></p>
</div>
上記のようになります。

だいぶdivが増えてきました。
上から順番に数えると、
「container」「contents」「header」「kiji」「footer」と5つあります。
これらのdivには終了タグの</div>がありますが、どれがどれだか分からなくなります。
そこでそれぞれの</div>にコメントをつけます。
今の段階ではコメントをつけたほうが間違えないと思います。

コメントとは
<!-- コメント -->と書きます。
こう書くとブラウザでは表示されません。
コメントと書いてあるところにIDを書き込めばOKです。
その時IDの前に/を入れておけばいいでしょう。

一番下にある</div>は以下のようになります。
</div><!-- /container -->
残りは皆さんで記入してください。

# by snocentral | 2006-03-12 12:48 | HP作成
2006年 03月 10日
ホームページ no.41
h1タグの文字の大きさを指定。

<h1>タグでくくった部分が大見出しとなります。
文字も大きくしましょう。
文字を大きくするのは、CSSで行います。
「newspage.css」の編集をします。
前回、header で枠線の色を指定しました。
今度はそのheader枠の中のh1に指定をします。
以下のように書きます。
#header h1 {
    font-size: 24px;
}
これは、header という枠の中の、h1 というタグの
文字の大きさ「font-size」を「24px」にします。
ということです。
CSSはこのように書きます。
どこの部分かを示すのが適用先(セレクタ)と言います。
今回の場合、セレクタは「#header」です。
セレクタの後に{と}でくくり、その中に表示方法の指定を行います。

表示方法は、
プロパティと値となります。
今回の場合
プロパティが、「font-size」で値が、「24px」ということです。
書き方は決まっていて
プロパティの後にコロン「:」値の後にセミコロン「;」となります。
それが
font-size: 24px;
ということです。
値を変えることで文字の大きさが変わります。
いろいろ変えてみてください。

#header h1 {
    font-size: 24px;
}
上記を前回の#headerの後に追加してください。

# by snocentral | 2006-03-10 15:48 | HP作成
2006年 03月 05日
新しいホームページのデザイン
近年ホームページの世界ではWeb標準化への動きが活発になっています。
Web標準とは何かというと、ホームページはHTMLという言語を用いて書かれていますが、そのHTMLでは発信すべき情報のみをHTML言語を使って書くということです。

従来は(というほどの歴史はありませんが)、HTML言語で画面のデザインやレイアウト及び文字の装飾等を行ってきましたが、これらのことは本当に発信すべき情報ではないということです。

発信すべきは情報そのもの、例えばメールを見れば一目瞭然です。
必要なのはメールの本文そのもので、それから先の文字を大きくしたり色をつけたりするのは情報そのものではないということです。
でもそれでは単なる文字の羅列になりまことに味気ない代物になってしまいます。
デザインは不必要ということではありません。

そのデザインの部分はCSS(カスケーディング・スタイル・シート)で行ってくださいという事なんです。
HTMLで書くことは情報そのものだけにしましょうというのがWeb標準化という事です。

HTMLでFONTやALIGN、CENTERという属性は非推奨となり、それらのことはすべてCSSで行うようになりつつあります。
実際にそうして書かれているホームページ(サイト)はブラウザ(IEやFirefox)でCSSを無効にしてみるとすぐに分かります。
いわゆるデータそのものだけが浮かび上がります。

HTMLをより厳格にしたものをXHTMLといい、XHTMLとCSSで作られたサイトをWeb標準化に準処したサイトと言っています。
簡単に述べていますがより正確な表現はWeb標準やXHTMLで検索して調べてください。

現在私はHTMLタグでホムペを作ろうというメールを発信しておりますが、その一部始終はブログにも掲載しております。
途中から内容は完全にXHTMLとCSSでホムペを作ろうに変化しています。
メールでは細かい質疑応答をしていますが、ブログでもコメント欄がありますのでそれが可能です。

現在既に作成したサイトを少しずつWeb標準に書き換えの作業をしながらのメール発信となりその中身の進行は遅々としていますが少しずつ理解してもらっております。
今からでも遅くないメールを受け取りたいという希望の方がありましたらこれにメール希望とタイトルを変更して返信して下さい。

ブログの方もメールを発信したら同じ内容をアップしておりますので、そちらをごらんになってもよろしいかと思います。
対象はHTMLを知らない方でも、HTMLは十分ご存知の方でもかまいません。
全く新しい流れですから、こんなこともあるんだということを知るだけでもよいと思います。

なお、CSSでのデザインはブログの世界ではあたりまえになっております。
ですからCSSでのデザインを覚えると自分独自のデザインのブログが作成できます。
以上

# by snocentral | 2006-03-05 10:58 | HP作成
2006年 03月 01日
ホームページ no.40
ホームページ no.40
最近進みかたが遅いですが、質問に答えたりしていると時間がとられます。
でも、この質問が必要なわけで、こちらから一方的に情報を流しっぱなしでも役に立たないのでご了承ください。

さて、前回の質問のメールで

<div id="header">
<h1>台風14号</h1>
</div>

というところがありましたね。

<h1>台風14号</h1> というh1タグをheaderという名前を付けたdivタグでくくるわけです。

これはheaderという名前の範囲にあるh1タグということです。

こうするとCSSでデザインの指定をするのに便利なわけです。

というわけで、一緒にCSSファイルの方も変更しましょう。
#containerから下の部分だけ表示しますね。

#container {
    margin: 1em auto;
    width: 600px;
    text-align: center;
}

これに
    border: 1px solid #f00;
追加して
    widthの値を%に変えます。
    width: 80%;

こうなります。
#container {
    margin: 1em auto;
    width: 80%;
    text-align: center;
    border: 1px solid #f00;
}
この
    border: 1px solid #f00;
これが、枠線の表示です。
1ピクセルの実線で色は赤という意味です。

その下にこれを追加します。

#contents {
    margin: 1em auto;
    width: 90%;
    border: 1px solid #00f;
}

no.39で追加したcontentsという範囲に対しての指示になります。
これにも枠線の指示を追加します。
実線の色は青にしましょう。
実際のホームページには不必要ですが、この場合分かり易いですからこうします。

その下にさらにこれを追加します。

#header {
    margin: 0 auto;
    width: 90%;
    border: 1px solid #0f0;
}
ここでwidthの値を90%にしているのは分かり易いからです。
パーセント表示は親の枠に対してのパーセントです。
containerで80%、contentsで90%、headerで90%となっています。
幅の値はピクセルでもいいのですが、パーセントの場合はブラウザの画面のサイズで変わります。
ピクセルの場合はブラウザの表示画面を変えても中身は変わりません。
画面が小さくなるとスクロールバーが出てきます。

今回はパーセントの値ですから画面が小さくなるとそれにつれて中身の幅も小さくなります。
文字の大きさは変わりません、あくまでも赤や青の枠の幅のことです。

今回のCSSの#container以下を表示しておきます。

#container {
    margin: 1em auto;
    width: 80%;
    text-align: center;
    border: 1px solid #f00;
}
#contents {
    margin: 1em auto;
    width: 90%;
    border: 1px solid #00f;
}
#header {
    margin: 0 auto;
    width: 90%;
    border: 1px solid #0f0;
}

# by snocentral | 2006-03-01 18:16 | HP作成