html と css の 関係

歓迎猫 歓迎猫 ここから css ファイルを 作成することになります。"お断り" 前ページで html の 作成は終了の筈ですがここで、騙すようで申し訳ないですが、htnl ファイル の作成で <head> と </head> の 間に 何も記入しなかった事を思 いだしてください。もし無くてもいいのなら省略したいのが、にゃん情ですがど うも必要のようです。ここには何を記入するかというとは、ネットワークの検索に て”css html head ”なんぞ入力して見て下さい、資料、質、量ともに一杯あり ます。このページからそこへいってもう帰ってこないほうが、皆様のためである と、にゃんたろうは信じます。

それはさておき、記入項目を見てみましょう。 html には バージョンがあるということ、また html の規格が色々あるというこ と(xml とかあるらしい)、次にこれを見る ブラウザ とかいうものも 種類、 バージョンが いろいろあるということ、これらを詳細に見てゆくことや理解す ることは、にゃんたろうにとっては苦痛以外のなにものでもない。(単に 出来な いだけです)したがって詳細についてはネットワークの世界にお任せして、にゃんたろうは独断と偏見に満ちた方法ですすめるもの としませう。(律義な方は sgml なんぞから ネットワークの世界で御ゆっくり お過ごし下さい。お止めしません、むしろお薦めです。)

唐突に始める、まず おまじないの数々
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- html の バージョンと種類の
簡易な 宣言 色々ありますまた書き方もこれが決定ではない。-->
<html lang="ja"> <!-- 日本語ですよー と のたまっておきます --> <head> <!-- head がここからですよー --> <meta http-equiv="content-type" content="text/html;charset=EUC-JP"> <!-- 日本語コードは EUC-JP ですよー 他にも"Shift_JIS"、"ISO-2022-JP"等色々あります。 皆様の環境に合わせてお使い下さい、ゐン同図関連では "Shift_JIS" かな? --> <meta http-equiv="content-style-type" content="text/css" > <!-- やってきました css を 使いまっせ と いう 宣言文 -- > <meta name="keywords" content="KEYWORD1,KEYWORD2,KEYWORD3" > <!-- meta name="description" content="キーワード を記入" --> <meta name="description" content="css の 説明始めに"> <!meta name="description" content="ここのページの説明文"> <link rel="start" href="a_listcss.html" > <! start する ページの 場所、無い場合は省略> <link rel="prev" href="f002.html" > <! 前のページ 、無い場合は省略> <link rel="next" href="f004.html" > <! 次のページ、無い場合は省略> <link rev="made" href="mailto:cricri@nyanta.no-ip.info" > <!-- 上記は rel でなくて rev で良いが 正式ではないそうだ --> <!-- 作成者の メールアドレス 記入 --> <link rel="stylesheet" type="text/css" href="../102_file_css/f002.css" > <!-- css は いずこに おわしますか? そこですよー と いうこと 。--> <title>html & css 試行錯誤 css の 作成</title > <!-- このページの タイトル ”タイトルです” -- > </head> <!-- head はここまで -->

まあこんなところでしょうか?騙したなー!そんなこと言わないで下さいどうせ html を記述し表現するには避けて通れないのですから、ここはひとつ鷹揚にそ うかそうか、と言って下さい。さてここは css についての話の筈ですがもうす こしつき合って下さい。上記の説明で <!-- css は い ずこに おわしますか? そこですよー と いうこと。-->のところを思 いだして下さい、御存じであればいいのですが、蛇足を 少々付け加えると皆様 は、ファイル、ディレクトリ、フォルダー等の言葉は存じているものとします。 もし御存じで無ければネットワークの世界を游弋してきて下さいすぐに理解でき るでせう。にゃんたろうはそうではなかった、悔しいー

理解できたとして話を進めると。何か文字のまとまりを表示するにはただ文字を並べていくだけでもいいのですが、何かその並びに変化をつけたいときには、 皆様はどうされますか?

例えばここは注意だから 赤い文字で下部に線をひいておいて字体も変えておきたい場合はきっと 赤色えんぺつ等でその部分を書いて定規でその下に線を引くと言う作業をするこ とになると思います。つまり css を作るということは ブラウザに (見るもの に)この作業をしてもらう方法を記載することです。<body> と </body> の 間に文字を並べてゆきそこで文字の表現を変える場合 その文 字の間に、お願いの印を 書いておく そうすると 、ブラウザ(見るものが)そ の印の意味はなんかいなと思いそれはどこに方法をかいてあるのかなーと考える (真偽は別にゃんたろうはそう考えてる。)例え ば、”ここは赤えんぺつで書いて下部に線を引いてやる のだ”としましょうその場合文字の並びの始めににある印を書きますそ して”ここまで”の場所にそれを"ここまでですよー"とするおまじないをかきま す。そうするとブラウザ(見るものは)その印をどのように解釈すればよいかを その内容を書いた css ファイルを 見にゆきますそこで 解釈方法を手に入れて ここは赤えんぺつで下部に線を引いてあるようにみせようと努めます。当然ブラ ウザ(UA)の 種類やバージョンが異なればその努力にもかかわらず出来ないこ とも発生しますし、文字の並べかたの 方法で使用する html の バージョン(種 類 は いいすぎか? xml を 考慮すると 、種類になるかも)が異なれば、 表示の印も変わるであろうし印も異なる場合があると思われます。つまり、文字を 並べてゆきその表示方法に対してある印をつけるまたその印の有効場所の範囲を 指定する<印始め>文字、もじ、もんじ...<印終>の様に指定する。 こうすることで、<body> と </body>の 間にある文字の並びの 表現を変化させることが可能になる。これの様式のファイルを css ということで 、にゃんたろうは理解しています。 何か騙し騙しの説明になってしまったがこれが css ファイルの説明です。ファ イルやホルダーの話はどうなるのということですがこれは html ファイル や css ファイルの保存先つまりどこにあって(どこの ディレクトリ;どこの フォ ルダー)その相互のファイルの位置関係;お互いの情報が行き来出来るようになっていればよいのでそのためにこれらの用語を理解しておいて頂ければ良いということです。”君の名は”ということは避けなければ行けません。今回は css ファイルの作成までは 出来なかったがこの後いくらでもできますので御容赦お願い致します。


前へ
前へ
次へ
次へ
戻り猫
戻る

Copyright © 2004.-2007. nyantarou All Rights Reserved.