- ねこのこべや -
- ねこのこべや -
先週は非常に眠い週でした。 でもそれは、いろんないいことが沢山あったから。
今まで会えなかった人に会えたり(それも複数件!)、 予期せぬ依頼が舞い込んだり、 当たりくじ付き自動販売機でジュースが当たったり(笑)
そうそう、自販機で「もう一本」が当たったとき 120円のジュースしか選べないの、初めて知りました。(自販機によりけり なんでしょうけど)
前回までで、ごくごく基本的なHTMLの解説をしました。 いちおう「マークアップとはなんぞや」に重点を置いて説明してきたのですが、 HTMLの本質には迫るものの世間一般で言う「ホームページ」とは ちょっと遠い気がします。
HTMLはまだまだ勉強するところがあり、また基礎を学びきったというわけでもないのですが、 ここで少しだけ、「ホームページ」的アプローチをしてみましょう。
前回までのマークアップで以下のようなHTML文書を作るのはマスターしたと思います。
<H1>キーボードの評価要素</H1>
<P>
本章ではキーボードの評価要素について記す。
</P>
<H2>クリック感</H2>
<P>
キーをある程度押し込んだとき、カクッと級にキーが押し込まれる感触。
打鍵者にキー入力されたことを触知させる役割を持つ。
タクタイルとも呼ばれる。
</P>
<P>
メンブレン・ラバードーム式キーボードではラバードームの特性が大きく影響する。
機械式キーボードではクリック感を出すための専用の機構をもつ場合もある。
尚、クリック感があるからといって必ずしもクリック音がするわけではない。
</P>;
<H2>スムースさ</H2>
<P>
キーを押し込むときブレはヒッカガリ、打鍵ノイズがないかを指す。
キーの中心をミートしたときにスムースに流れるのはもちろんだが、
キーの端をミートしたときもスムースに流れるかは打鍵の快適さに強く影響する。
</P>
<P>
スムースさはキーの支持構造であるスライダ、スライドレールの精度に強く依存する。
近年のキーボードではコストダウンのためキートップとスライダが一体成型されることが多く
及第点のものは多くとも良い感触のものは少なくなった。
また、ノートパソコンでは短いストロークでスムースさを実現するため、
パンタグラフ構造をとることが多く、かえってノート向けキーのほうが打鍵感が良いという
逆転現象すら起こっている。
</P>
これをIEで表示するとこんな感じになると思います。 （スタイルシートで似せてるだけなので、本当に一致するかといえばそうでもないのですが(^^;) )
本章ではキーボードの評価要素について記す。
キーをある程度押し込んだとき、カクッと級にキーが押し込まれる感触。 打鍵者にキー入力されたことを触知させる役割を持つ。 タクタイルとも呼ばれる。
メンブレン・ラバードーム式キーボードではラバードームの特性が大きく影響する。 機械式キーボードではクリック感を出すための専用の機構をもつ場合もある。 尚、クリック感があるからといって必ずしもクリック音がするわけではない。
キーを押し込むときブレはヒッカガリ、打鍵ノイズがないかを指す。 キーの中心をミートしたときにスムースに流れるのはもちろんだが、 キーの端をミートしたときもスムースに流れるかは打鍵の快適さに強く影響する。
スムースさはキーの支持構造であるスライダ、スライドレールの精度に強く依存する。 近年のキーボードではコストダウンのためキートップとスライダが一体成型されることが多く 及第点のものは多くとも良い感触のものは少なくなった。 また、ノートパソコンでは短いストロークでスムースさを実現するため、 パンタグラフ構造をとることが多く、かえってノート向けキーのほうが打鍵感が良いという 逆転現象すら起こっている。
これでも見出し要素が強調されているため、見るのには困らないのですが、 少々かざりっけが無さすぎです。 ここは少し見栄えにも手を加えてみたいと思います。
HTMLは文章の見栄えを指定できません。 （昔は指定しようといろいろブラウザメーカによる拡張合戦が続いたのですが、 或るブラウザではちゃんと見えるけど他のでは意図したデザインでは見えないってのが 関の山でした。）
かといってHTML文書に見栄えを埋め込む方法が無いわけではないのです。 HTML文書に見栄えを盛り込むにはスタイルシートという仕組みを使います。
さて、実際に上のHTML文書に見栄えを盛り込んでみましょう。
要素に文書スタイルを指定するには、その要素の開始タグに
STYLE属性を追加します。
例えば H1要素に文書スタイルを指定するとこうなります。
<H1 style="color:red;">キーボードの評価要素</H1>
これを表示するとこんな感じになります。
文字色が真っ赤になったと思うのですが、どうでしょう?
「style=""」の「""」の中に文書のスタイルを表示していきます。 「""」の書式は CSS(カスケーディング・スタイル・シート)というHTMLとは別の スタイル定義言語を使って書きます。
CSSの文法は、基本的に
スタイルの項目:スタイルの値;
と言う風に書きます。つまり上の例では「color（フォント色)」が「red(赤)」と指定したわけですね。
一つの要素に複数の項目を指定することも可能で、
<H1 style="color:red;font-size:120%;">キーボードの評価要素</H1>
とすれば、
のように、フォントサイズと文字色の両方を指定することが出来ます。
ちなみに「スタイルの項目」をホントはプロパティといいます。
さて、基本的な使い方が解ったら当然色々やってみたいなと思うでしょう。 ここではウダウダ例題を出すのじゃなくって、スタイルの項目と値の指定の仕方を 一覧でババッと説明しちゃいますので、色々遊んでみてください。
フォントの色を指定するプロパティです。 (正しくは前景色という意味ですが、事実上フォントの色になると思います。)
色の指定は、「キーワード（色名）」で指定する方法と、 RGP値を数値で指定する方法があります。
キーワードは aqua、 black、 blue、 fuchsia、 gray、 green、 lime、 maroon、 navy、 olive、 purple、 red、 silver、 teal、 white、 yellow になります。
これ以外の色名が指定できる場合もありますが、それはブラウザの独自拡張ですので、ブラウザに依存します。
RGB値を直接数値で指定するには 「rgb(255,0,33)」のように「rgb(赤,緑,青)」に その色の度合いを 0〜255の数値で示します。255が一番強く(明るく)、0が一番弱く(暗く)なります。
以下に記述例を示します。
color:red; /* キーワード指定 */ color:rgb(255,0,68); /* RGB値での指定(各色0〜255)*/
ホントはこの他にもrgb()の%指定や、RGB値の16進数指定、システムカラーでの指定が出来ますが、割愛します。
背景色を指定します。
指定書式については基本的に「color」と一緒です。 「color」で指定できる値はすべて指定可能です。
更に「background-color」では値として「transparent」が指定できます。 これは「透過」(というか「背景色無し」)という意味で、下の画像や背景がそのまま透けて見えます。
フォントのサイズを指定します。
サイズの指定の方法はいろいろあるのですが、ここでは % による指定だけ説明します。
%による指定は、
<DIV>
<H1>見出しです</H1>
</DIV>
の場合、H1要素の親要素はDIVになります。 ちなみに、
<HTML>
<HEAD>
<TITLE>親要素って?</TITLE>
</HEAD>
<BODY>
<H1>見出しです</H1>
</BODY>
</HTML>
の場合、H1 の親要素は BODY になります。
以下に記述例を示します。
font-size:120%;
この場合、きっちり120%になるのではなく、 120%に一番近いフォントサイズになるだけですので、 例えば120%と121%を指定しても、両方とも同じサイズに描画されるかもしれません。
フォントの太さを指定します。
これも色々指定方法があるのですが、ここではキーワードによる絶対指定のみ 説明します。
フォントの太さは(キーワードによる絶対指定では)、 「normal(通常)」、 「bold(太字)」が指定できます。 要は二者択一です。
フォントのスタイルを指定します。
指定出来る値は、 「normal(普通のフォント)」、 「italic(イタリック書体)」、 「oblique(斜体)」 になります。 イタリックフォントが無い場合には斜体で代用し、 斜体フォントが無い場合は通常のフォントを無理やり傾けて表示するそうです。
日本語だと、「italic」ってほとんど斜体になっちゃうような・・。
テキストを装飾します。
「none(何もしない)」、 「underline(下線)」、 「overline（上線)」、 「line-through(取り消し線)」、 「blink(点滅)」 を指定できます。ただ「blink」は、無視するブラウザもあるので(仕様上無視しても良いことになっている) あんまり使わないほうがいいかな?と猫は思います。
以下は扱うにはまだHTMLやCSSの基礎知識が足りないものです。 今回はとりあえず紹介だけします。
テキストの水平配置を指定します。
「left(左寄せ)」、「right(右寄せ)」、「center(中央寄せ)」、「justify(均等割付)」 を指定できます。
text-align は HTMLのボックス要素 というものを理解していないと、上手く扱うことが出来ません。 とりあえず、Hn要素やP要素では、直感どおりに使えますので いろいろ試して見てください。
要素の境界線のスタイル(線の種類)を指定します。
指定出来る線種は、
になります。(この例では線の太さを太め(4ピクセル)に指定しています。)
指定は、「上下左右」すべて同じスタイル、 「上下」「左右」毎に違うスタイル、 「上」「下」「左」「右」ですべて違うスタイル、 のいずれかで指定できます。
以下に指定例を記します。
border-style:solid; /*「上下左右」同じ */ border-style:solid dotted; /*「上下」「左右」 */ border-style:solid dotted double dashed; /* 上・右・下・左(時計回りに指定します) */
四辺で違う値を指定する場合は スペースで区切ってください。順番は「上」から時計回りになります。
ちなみに「none」と「hidden」の違いは、 今のところ考えないでいてください(^^;
境界線の色を指定します。
色の指定の仕方は「background-color」とまったく一緒、 上下左右への指定の仕方は「border-style」と一緒です。
境界線の太さを指定します。
値の指定法はいろいろありますが、 基本的に「値+単位」という表記になります。
いろんな意味の単位があるんですが、 今回はピクセルを表す「px」のみ、覚えておいてください。
と、なるべく楽しくって使うのがやさしいプロパティを集めてみました。
とりあえずコレだけあれば、Hn要素なんかはかなりいろいろ出来ちゃうと思います。 最後の方のは、扱うには今の段階ではチョット基礎学力不足な 項目ですが、とりあえずやってみるのも面白いでしょう。
最初のHTML文書にちょっとだけスタイルを指定してみると
<H1 Style="background-color:green; color:white; text-align:center; font-size:150%;">キーボードの評価要素</H1>
<P>
本章ではキーボードの評価要素について記す。
</P>
<H2 Style="border-style:solid; border-width:0 0 5px 2px; border-color:teal; color:blue; font-size:120%;">クリック感</H2>
<P>
キーをある程度押し込んだとき、カクッと級にキーが押し込まれる感触。
打鍵者にキー入力されたことを触知させる役割を持つ。
タクタイルとも呼ばれる。
</P>
<P>
メンブレン・ラバードーム式キーボードではラバードームの特性が大きく影響する。
機械式キーボードではクリック感を出すための専用の機構をもつ場合もある。
尚、クリック感があるからといって必ずしもクリック音がするわけではない。
</P>
<H2 Style="border-style:solid; border-width:0 0 5px 2px; border-color:teal; color:blue; font-size:120%;">スムースさ</H2>
<P>
キーを押し込むときブレはヒッカガリ、打鍵ノイズがないかを指す。
キーの中心をミートしたときにスムースに流れるのはもちろんだが、
キーの端をミートしたときもスムースに流れるかは打鍵の快適さに強く影響する。
</P>
<P>
スムースさはキーの支持構造であるスライダ、スライドレールの精度に強く依存する。
近年のキーボードではコストダウンのためキートップとスライダが一体成型されることが多く
及第点のものは多くとも良い感触のものは少なくなった。
また、ノートパソコンでは短いストロークでスムースさを実現するため、
パンタグラフ構造をとることが多く、かえってノート向けキーのほうが打鍵感が良いという
逆転現象すら起こっている。
</P>
本章ではキーボードの評価要素について記す。
キーをある程度押し込んだとき、カクッと級にキーが押し込まれる感触。 打鍵者にキー入力されたことを触知させる役割を持つ。 タクタイルとも呼ばれる。
メンブレン・ラバードーム式キーボードではラバードームの特性が大きく影響する。 機械式キーボードではクリック感を出すための専用の機構をもつ場合もある。 尚、クリック感があるからといって必ずしもクリック音がするわけではない。
キーを押し込むときブレはヒッカガリ、打鍵ノイズがないかを指す。 キーの中心をミートしたときにスムースに流れるのはもちろんだが、 キーの端をミートしたときもスムースに流れるかは打鍵の快適さに強く影響する。
スムースさはキーの支持構造であるスライダ、スライドレールの精度に強く依存する。 近年のキーボードではコストダウンのためキートップとスライダが一体成型されることが多く 及第点のものは多くとも良い感触のものは少なくなった。 また、ノートパソコンでは短いストロークでスムースさを実現するため、 パンタグラフ構造をとることが多く、かえってノート向けキーのほうが打鍵感が良いという 逆転現象すら起こっている。
のように、ぜんぜん印象が変わるでしょ？
CSSについては、回をあたらめてシッカリ、基礎から、解りやすく 解説しますので、 とりあえず今回はHTML文書の作成を楽しんじゃってください。(^^)
今回使用している CSS という仕組みは、
いまどきのブラウザならば大抵サポートしているのですが、
DreamPassport(Dreamcastのブラウザ)や携帯電話などでは
解釈されませんので注意してください。
また、HTMLにスタイルを定義する仕組み「スタイルシート」で 使用できるスタイル定義言語は CSS だけでは有りません。 つまり、「スタイルシート」に何を使っているかを HTML中に記述する必要があります。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<HEAD>
<BODY>
・
・
・
</BODY>
</HTML>
META要素でCSSを指定するわけですね。 ・・・・って「METAって何よ」、「なんで</META>がないの?」 などと突っ込まれるかと・・・。
というわけで、次回は正しいHTMLのお約束事とか、 HEAD要素内に指定できる項目とかを説明しようかと思います。
ちょ〜っと次回は、つまんないかにゃぁ・・。
今回 CSSの文法で、「<H1 style="color:red;">キーボードの評価要素</H1>」 という定型を用いましたが、ちょっと嘘をついています。
スタイル定義は実は末尾に「;」をつけるのは必須ではありません。 ただ、定義項目と定義項目の境目を「;」を使って区切る必要があるだけです。 つまり、一つだけの時 or 一番最後の項目 は「;」をつける必要がありません。 (この場合「;」をセパレータといいます。 ちなみに一番最後に常に「;」をつける場合はターミネータといいます。)
ただ、スタイル定義であとから項目を増やしたときにこの「;」を忘れやすいので、 つける癖をつけといた方がいいかも、と思うのです。 最後の項目に「;」が付いていてもCSSとしては間違いにはならないので、 初心者には「末尾は";"」と覚えてほしいな〜、と思ってこういう説明にしたわけです。
また、スタイルの適用ですが、style属性への書出ししか紹介しませんでした。 <STYLE>要素の利用やcssファイルのリンク(インポート)だと、どうしても 「Class」という概念に踏み込まなくてはいけなくなるので、 今回は一番シンプルなstyle属性の利用のみを取り上げました。
それと、「単位」ですが、今回は意図的に「em」、「ex」を排除しました。 ホントは盛り込もうか迷ったのですが、これはボックス要素を覚えて、 marginとかpaddingの指定の仕方を説明するときにとっておくことにしました。
そんな風にあくまで講座内限定のリファレンスですので、実はかなりいいかげんなものに仕上がっています。(^^; 今回のCSSつまみぐい解説は「基礎知識なしでとりあえず遊べるもの」をコンセプトにしているからです。
この講座は「HTMLを勉強したい人」ではなくって「ホームページを作りたい人」を ターゲットにしています。ホントは順番にHTMLからマスターしていったほうがいいのですが、 そうはいっても、つまんないと飽きちゃうので、 なるべく「やりたいこと」を先に教えてあげたいと思い、こんな初期にCSSについて 取り扱ったわけです。
もっとも、HTMLの知識だけで使える物理スタイル指定要素(<FONT>とか<CENTER>とか<BLINK>とか)なんかもありますが、 IE・NN戦争時代に勝手にぽこぽこ作られちゃった負の遺産に手を出した日には、 後で泥沼にはまるのは必至です。
そんなこんなで、いろいろ小手先を労しながら 書いているHTML講座ですが、ホントに解りやすいのか、猫はとっても不安です。
いきなり番外編で申し訳ありません。でもHTMLを解説するに当たって、 論議に上げておいた方が絶対に良い項目だと思うのです。
HTMLの要素「P」は "Paragraph"の「P」です。 Paragraphは日本語に訳すと「段落」という意味ですので、段落毎に<P>で マークアップして言えば良いことになります。 ところが、日本語の段落って「形式段落」と「意味段落」というのが有るのです。
一度は国語の授業でならっているハズの「形式段落」・「意味段落」ですが、 ほとんどの人が忘れちゃてると思うのでちょっとおさらいです。
単に文頭の文字が一段下がって、改行するまでの所。 (つまり、「書式」の問題であり、意味はない)
文章を意味の最小単位で区切ったもの。 一つ以上の形式段落から成る。
日本語の段落表現は「頭一時下げ + 改行」です。 ところが、この表現で表された一塊りが一つの意味に成っていないのが日本語のミソで、 これが一つ以上連なることで意味を持った固まり=意味段落になるのです。
つまり、意味段落の区切りは見栄え上区別が付かないってわけです。
さて、ここで問題になるのはこの日本語の段落構造をどういう風にマークアップするのかと言うことです。 使えそうなHTML要素を列挙すると、
P要素
ブロックの最小要素。英語文法の段落を表す。
ブロックの最小要素のため、中にブロック要素を含められない。
DIV要素
匿名ブロック要素。特に意味づけは無いが、文章のブロック構造を表すことに使われる。
DIV要素はClass属性に意味を持たせて使う自由定義ブロック要素として
扱う事が多い。
BR要素
強制改行を行うインライン要素。
文章の構造をマークアップするのではなく、ただ単に「そこで強制改行しますよ」という印に過ぎない。
(そのため要素に「中身」を指定出来ない。=</BR>タグが無い)
と言った感じになります。
「英語文法の段落」に一番近いのは「意味段落」になるので、
これを<P>でマークアップしてあげるのが自然なのですが、
英語の段落って、それ以上小さなブロックが存在しないため
P要素は中にブロックのマークアップを含むことが出来ません。
よって、<P>で意味段落をマークアップすると形式段落をマークすることが出来ないのです。
こういったジレンマがあるので、なかなかちゃんとしたマークアップの標準が 日本語文章では確立していないのです。
意味段落=<P>でマーク。
形式段落は<BR>でお茶を濁す。
意味段落=<DIV Class="imi-danraku">のように自分で定義。
形式段落は<P>でマーク。
意味段落はマークアップしない
形式段落のみ<P>でマーク。
日本語に「英文法の段落」を持ち込む。
(=意味段落のみマーク)
まず大きな問題に<P>を意味段落にふるか、形式段落にふるかということが上げられます。
HTMLの精神からいうと<P>は意味段落に降るのが正しいかと思われますが、
一方の形式段落を表現する手段が有りません。
マークアップ出来ないので<BR>(強制改行)で表現することしか出来ませんが、
これは意味を見た目に頼る事になります。(ここからここまでが○○という要素、なんて意味づけができない)
つまり、視覚ブラウザでないと形式段落を捉えることが出来なくなります。
一方<P>を形式段落に降るという方法もあります。
あくまで段落は段落というスタンスですね。
この方法だと意味段落を表現することが出来なくなりますが
幸い日本語の意味段落は、表示書式として現れることは無いので、
形式段落のみマークアップしても「日本語の表示」に問題は有りません。
しかしこうなると意味段落の括りだしは読者の読解能力に頼ることになり、
コンピュータによる意味段落の把握などは無理に成ってしまいます。
この両方の条件を満たす形式段落=<P>、意味段落は<DIV>を用いて自己定義という方法があります。
これは非常に論理的整合性が取れること、スタイルシートで自在に形式段落・意味段落の表現書式を
操れるなどのメリットが大きいですが、
段落という基本要素にDIVを持ち込むのは好ましくないという見解もあります。
DIV要素にClass属性で意味を付けたところで、それは文書を作った人だけに通じるマイルール以外の何者でも有りません。
世間一般にみれば匿名ブロックに過ぎませんから、意味段落として扱ってくれるのを見る人(やユーザエイジェント)の好意にゆだねるしか無いからです。
そんなこんなで日本語を英語文書構造を表すためのHTMLでマークアップするには土台無理があるわけですが、 では現在のWeb文書はどうなってるのというと、日本語に「英文法の段落」を持ち込む(=形式段落を無かったことにする)が大多数になっています。
この背景にはスタイルシート登場前に要素の見栄えをページ制作者が定義することが 出来なかったということもあるわけですし、 そもそもHTMLのP要素は"Paragraph"であり、一つ以上の文のまとまりで、一つの内容を示す という意味を素直にマークアップすれば、日本語文法の「形式段落」というものは Paragraphにあらず、表示上もマークアップ上も無視して構わないとなる訳です。
これは「制服に体を合わせろ」ならぬ「HTMLに日本語をあわせろ」な訳です。 本来日本語は特に意味的まとまりが無くても適当な単位で「段落」となり、 意味上のまとまりは文章から追ってくれというスタンスなのですが、 この「英文法風段落」に、もうみんな違和感を持っていないわけで、それならそれでOKということでしょう。
とにかくいろんな意見・方法があり、それこそ宗教戦争の様相を呈してる日本語のマークアップですが、 新聞系ニュースサイト(asahi.comや Yomiuri ON-LINEなど)を見ると、 頭一文字空けはしてるものの、改行と同時に必ず空白行が挟まっている、英文法的マークアップに成っています。
この論争の背景にはそもそも「形式段落」というモノが日本語にある事が原因です。
これは私の私見ですが、形式段落というものはあくまで「読みやすさ」の為に存在します。
日本語の文章は文字が長く続くと大変よみずらいという宿命を持っていて、
例え意味的に一塊りであろうとも適当な所で改行を挟まないと文章を把握しづらくなります。
形式段落は例えていうなら一口サイズのショートケーキのようなもの。
出来ればきれいに切りたいけれど、それよりも「一口サイズ」にすることが最優先で、
やむ得ない場合は上にのってるイチゴを分断しちゃってもOKなんです。
さて、ジュニアノベルを書く時よく言われることに「改行はこまめに」があります。
青少年に読まれる文章を書くには、なるべく見やすい文章にしようという意味ですが、 裏を返せば意味的連続性があっても改行するであり、 こうして改行されたもの =「形式段落」が、マークすべき意味を持たない、 あくまで視覚上の要素であることを示してるとも考えることが出来ます。
HTMLを論じた技術的サイトには<BR>要素の使用を悪癖として斬って捨てる所も多いですが、 猫は形式段落に<BR>を使用することは有る意味理にかなっている面もあると 思うのです。
ただし、日本語の「形式段落」と「意味段落」の差は とても曖昧であり、その境目は完全なグレーゾーンです。 それゆえ日本語の「意味段落の括りだし」は非常に難しい(というか、読み手により解釈が変わっちゃう)事柄であり、 だったら形式段落のみをマークアップするのも有りだとも思えるのです。
(「意味段落」はもともと日本語には無い概念であり、 日本語の文法を定義するに際に、無理矢理"Paragraph"に相当する「段落」を作ったため、という見解も有るそうです。 意味の纏まりは段落ではない別の文書要素、という訳です。)
そんなこんなでいろんな方針がある日本語の段落マークアップですが、 このHTML入門講座では英文法式、 つまり意味の固まりで一つの段落とする方針を取ります。
HTMLに沿ったマークアップが一番楽で覚えやすいからですが、 皆さんがHTMLの入門をクリアした後は自分のポリシに従って マークアップしてみてください。
捨て猫のように惨めにずぶ濡れになった私を、最後に優しく包んでくれたのは 東京都指定のゴミ袋(70リットル)だった。
・・・てな具合で今年は大雨だったコミックマーケット、 傘は雨漏りするし（傘って布なので、長時間差していると水がしみこんでいってしまうのですね。) 横殴りの風は凄いしで、最終的には底に頭の潜る穴を空けたゴミ袋を簡易カッパ宜しく被りながら 猫も全身ずぶ濡れになってガタガタ震えながら一般行列に並んでいました。
コミケ自体はとぉっても楽しかったんですけどね♪
猫が初めてコミケットに参加したのはちょうど10年前の夏コミでした。 そのときはまだ開場は晴海の国際展示場で、開催日も2日間と今から思えば 隔世の感があります。
そのころから頑なに信じられていたことに「コミケットは雨が降らない」というモノがあります。 それは信仰にも似て一般参加者はジンクスというよりも事実として受け止めていました。 だって、「折り畳み傘を持っていけ」と言うのに、 雨が降るかもじゃなくって、日傘の変わりになるから日射病予防には必須です、って 説明をしていたくらいですから。
実際に天気予報で雨と言われようと、台風が直撃しようとも、 コミケ会場だけ(しかも開場期間のみ)ふらなかったりしたもので、 超能力者説から、オタクが集まって上昇気流が発生する説が真面目に唱えられたりもしたものです。
そんな神話も会場が有明に移ってから崩壊しだし、 遂に今回、3日とも雨が降るという決定的な黒星を付けてしまったのです。
ではなぜ、コミケットで雨が降るようになったのか・・。 それは会場が有明に移ったことに原因があるのでは無いでしょうか？
コミケットは晴海時代も有明でも全館貸し切りが基本であり、 参加者は館と館を渡り歩かねば成りません。 ところが晴海は館と館の間は屋根も何もない屋外であったのに対し、 有明では館と館の間も一体に繋がっている構造をしています。
つまり晴海では開催中に雨でも降ろうモノなら、 せっかく買った同人誌をぬらさないように多大な労力を払わねば成らず、 また休憩できるベンチも屋外にしか無いことから、正に雨=地獄のコミケットとなるわけです。
一方の有明では開場待ちの一般行列は大変ですが、 一度ビックサイトに入ってしまえば雨だろうと雪だろうとほとんど関係有りません。
このことが参加者の「雨よ降るな」という念を弱らせ パワー不足に陥った雨よけマジックは有効に働かなくなった、というのが猫の持論です。
ちょっとSFチックですが量子力学の不確定性原理や、ユング心理学の集合的無意識による共時性は、
人の「確信する心」がしばしば因果律に影響を及ぼすことを示唆します。
ある実験ではサイコロを「ロクよ、出ろ〜っ」と念じながら降ると
本来1/6の確率であるべき所がロクの出る割合が高くなる、なぁんて報告もあったりします。
ようするにエスカフローネでいうところの「信じる心が力になる」ってやつですね。
コミケといえば40万人からの参加者が集まる大イベント。 40万人が「降るな！」と念じたり、「降るわけ無い」と確信したりすれば、 たかが一地区の天候に影響を及ぼすなんて造作もないことでしょう。
つまりコミケットと雨の関係は、量子力学における事象の観測者がユングの唱える集合的無意識である説を 裏付ける壮大な実験と言って過言ではありません！
冗談(?)はともかく、今年のコミケは大変でした。 なんてったて並んでいるだけで体力がえらい消耗したので、 日頃運動してない猫は直ぐに活動限界、2時頃にはもうヨレヨレという醜態をさらしてまいりました。 体力的には10年前と大分格差があるようです。(TT)
今回はマリみてにハマって初のコミケットでしたので、いやがおうにも注目しちゃってるせいかもしれませんが、
それにしてもマリみて本多かったような・・。
どのジャンルいっても必ず転んでいるサークルがあって何処に行っても「新刊マリみて本」の文字が絶えません。
他にもいつも回っているご贔屓のサークルさんとかを巡ったのですが、
さすがに10年もいるとご贔屓だけでも半端じゃない件数に。
会場が混んでいなければすべて回るのは造作のないことですが、なにぶんとってもに混んでいるため、
移動で一苦労、サークル覗くのにもう一苦労といった調子です。
そしてそこを通過するだけで本が増えていくので、しまいには熱帯雨林を行軍する陸戦用ガンダムの気分でした。
さて、決まったルートを巡るのもまた楽しいのですが、
やっぱりコミケットの醍醐味は「ないジャンルはない！」といわんばかりのベラボウなまでのジャンルの広さ。
評論、技術資料、創作小説や漫画、ゲーム、ユーティリティ、ハードウェアから
石鹸、香水、アクセサリー、フィギュアの洋服、オリジナル楽曲のCDまで、
個人で作れるありとあらゆるものが揃っています。 エッチ同人誌だけがコミケットじゃないです。
(今年は印鑑屋さんまで見つけちゃいました。その場で彫ってくれるのです。)
これを巡り歩かにゃ損そんです。
こういったブースはカタログだけじゃなかなか良さが解らないというもの、
ブース全体をブラっと回るのがとても楽しいジャンルです。
猫はご贔屓めぐりが終わったら毎回残りの時間をこういったチェックしてないサークルを巡るのに
費やしています。
こういったサークルは閉館まで残っていらっしゃるところも多くってとても助かります。
ところが今年はなんだかとってもヘバってしまいまして、この至福の時間も半ばで活動限界。
う〜っ、、動きたいのに動けない〜。動け、動け、動け、今動かなくっちゃ何もならないのよ!
だからお願い、動いてよ〜っ!と思うもののお尻に根っこが生えたように動けません。
そういうわけで今年は創作漫画の収集はいまいちな成績でした。
も〜これは、体を鍛えて冬コミでレベンジです!
そんなこんなで、時間・金銭の限界よりも先に体力の限界になってしまった今回の夏コミですが、
交通費・食費その他コミですが、なんのかんので3日間で10万円も出費してしまいました。
(3万×3万×4万)
・・・ああっ、私もフデ子ちゃんに成る日は近いわ。
いよいよ今週はコミケです。うれしいにゃ〜♪たのしみだにゃ〜♪ 猫がコミケに行くようになってちょうど10年。通算20回目の参加です。一般参加者としてはバリバリ現役ですが ここ1年はサークル参加をしていません。 今年の冬はサークル結成10周年なのですが・・・(えらい年をとった物だわ^^;) なんかやりたいから一応申し込んでみようかしら？ へみへみ。
以前お伝えしたとおり、 猫のうちのPCのHDDがそのデータ諸共お亡くなりになりました。 現在はPCも元気に復帰し(しかも静かになって更に気軽に使えるようになりました♪) 僅かながら他のPCにバックアップが残っていたデータもあり、 何とかページの更新も再開できる状態になりました。いろいろお騒がせしました。
そんなこんなでお家のPCトラブルは収束した猫ですが、 先週の月曜日、朝会社に出社すると、会社のMyマシンが起動しない・・・。 ええ、壊れました。幸いデータのバックアップは取ってあったので致命的な事態には成りませんでしたが、 代替マシンの環境構築にえらい時間が掛かってしまいました。へみへみ〜。
たかがPCのセットアップでなんでそんなに時間が掛かるのかというと VisualStudio.NETでWebアプリ開発ということで、とにかく入れるものが多いんです。 リソースがネットワーク上にあり、ダウンロードにも時間が掛かったのも一因です。 とにかく、SQL Serverやら VisualSouseSafe、VS.NET、MSDNライブラリといった重量級が目白押しで、 なんのかんので丸2日掛かってしまいました。
まあインストール中はときたまマウスクリックをするだけなので、
その待ち時間、自分の私物ノートでセッセと猫日誌を書いていました。
（それが先週のHTML入門講座です。)振って沸いたプライベートタイムです。
定時が暇なのは大歓迎なんですがそのまま残業に突入というのはなんともやってられないもんですね。
ネットワーク運用のお仕事をしている人の苦労をはじめて実感しました。
そんな訳で、なんでもかんでも壊れまくりの猫です。 ここまで壊れると2度あることは3度あるじゃありませんが、ついつい「次は何!?」と疑ってしまいます。 と思っていたら案の定「次」がありました。
つい先日I・OデータのPCマニア向けブランド「挑戦者」が 出したUSBメモリキー 「Eazy Tank ET-120M」を購入しました。 このURBメモリーキーは128MBという大容量ながら4500円程度とお買い得なことも売りですが、 なんと言っても異様なまでの小ささも魅力です。 なんていったらいいでしょうか、USB機器のコネクタだけ外れちゃったような外観には 非常に魅力を感じます。しかもアクセスランプが青色LEDで、ピカピカ光る様子もGoodです。 猫としてはノートPCにつけたとき、出っ張りが最小になるのが魅力的で購入に至りました。
ところがこのUSBメモリキー、届いてみればなんと初期不良で、今か今かと待ち構えていた 三猫さんはなんとも「しょぼ〜ん」な感じなのです。 へみぃ・・・・、なんか呪われてる？私・・・(TT)
話は変わりますが、最近ウイルスさんがよく届きます。
三猫宛てのメールアドレスに、毎日2、3通づつ届きます。 このウイルス(というかワームなんですが)はSobigと言うもので、 添付ファイルを実行しなければ感染しないタイプのウイルスで、 送信元が常にbig@boss.comなのでメーラのフィルタ設定で即効消すこともできて 現在のところそれほど実害を被っていないのですが、 本当の送信元が特定できないので、感染しているであろう人にお知らせできないのが 辛い所。
Sobigは、.txt、.eml、.html、.htm、.dbx、.wabファイルで発見したメールアドレスに自分自身を送信するワームなので、 私のサイトに掛かれているアドレスをゲットした場合も考えられるので、 本気でどこの誰が感染してるかわかりません。念のため一度ウイルスチェックしてみて下さいね。
さて、Sobigには実害を被っていない三猫さんですが、 今日は会社ではW32.Blaster(またはLovSan)というワームに してやられました。 このワーム、RPC(Remote Procedure Call)の脆弱性を利用したワームで、 感染するとシステムを不安定にしたり、"windowsupdate.com"にDoS攻撃をしかけたりと なかなか凶悪なワーム。
もともとRPCの脆弱性はSQL Slammerの二の舞になると言われていただけに、 前回SQL Slammerが大流行した猫の常駐先さんでは、今回も予想にたがわずの大フィーバー。 あちこちで「ExcelがOCXエラーで動かない」、「カウントダウンが表示され、PCがリブートする」、「ファイルのコピーが出来ない」といった 典型的な症状が聞こえて来ます。
猫のPCはこのセキュリティホールをすでに塞いでいたので感染しなかったのですが、 念のためにウイルススキャンをしたら90分以上も掛かっちゃったり、 他の人の感染パソコンの対応を頼まれたりしているうちに午後はまるまる潰れてしまいました。 へみぃ、今日も元気に残業です。(TT)
そんなこんなで、PCトラブルに恵まれている最近です。 最初の一発以外はそれほどダメージが大きくはないものの、ちりも積もればなんとやら。 いったい次は何でしょう(TT)。
最近日記が書きたいと強く思います。
本来この猫日誌は「日記」だったのですが、 コラムのネタを思いついたとき、忘れないように書くこともしていました。 仕事が忙しくなったおり、とてもこのネタを猫言として起こす時間が取れず、 ドントン貯まる一方ですし、なによりあまり寝かせすぎるとネタが腐っちゃうし、 と言うことから「日誌」のまま公開してしまいました。
結果、見てのとおり日誌とは名ばかりのコラム集に成ってしまったので、 猫は日記を各フォーマットを失ってしまったのです。 猫言のニッチェが無くなってしまいましたし、今は真剣にこの猫日誌の名前を 「猫言」に変えちゃおっかな〜、と悩んでいます。
それはそうとして、HTML入門講座、二回目です。 （これは既に日記ともコラムとも違うものよね・・・(^^; )
前回は「HTMLとは何か」に付いて説明しました。 ちょっとおさらいすると、
と言ったところでしょうか？
前回は薀蓄ばっかりで余り面白くなかったと思います。 お待たせしました。今回はいよいよ実際にマークアップをやってみましょう。
マークアップの練習ということですが、 その為にはまず、マークアップを行う対象となるテキスト文書が必要です。
HTMLの構造を十分理解していないうちは、
マークアップしながら作文すると、HTMLに振り回されてしまうので、
「入門者」を卒業するまでは、
自分の作りたいコンテンツをまず、ただのテキスト文書として作ってください。
最終的に出来るものは一緒ですしね。(^^)
取り合えず講座では、以下のテキストを例に説明します。
エヴァンゲリオンの癒し アニメ界の新風 〜ガンダム以来のパラダイム・シフト〜 新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。 1995年当時、アニメ業界は閉塞状態にあった。 子供とオタクに向けたテンプレートを繰り返し使いまわす作品に誰もが飽き、 そのような環境に置かれたアニメファンの多くは作品を見る眼を失っていた。 つまり、良い作品が生まれてもそれを評価する市場が無かったのである。 こうした悪の循環により縮小再生産の袋小路から救い出したのがエヴァである。 エヴァは如何にもオタク向けなインターフェイスを持ってアニメオタクの 懐に忍び込んだが、一皮向いたその本質は富野由悠季ばりの「純文学」であった。 そして「純文学」に曝されたアニメオタクは再び作品を評価する目を取り戻し、 また野心作の成功というモデルケースを得たアニメ業界はようやく「創りたい物」を 創れる環境へとステップアップした。 TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。 こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。 エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。 心地よい鬱 〜可愛そうな自分が好き？〜 しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。 エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？ それでも最終的に救われればいい。だが、劇場版エヴァンゲリオンが見せたものは TV版で見せた救いをさらに突き落としている。そして、次への救いを見せずにエヴァは終劇しているのだ。 これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？
というわけで、サンプルです。「中の人」から貰ってきました。 なんか内容がアレなのは別にして(^^;)、ちょっと長いのでザクっと編集です。
エヴァンゲリオンの癒し アニメ界の新風 〜ガンダム以来のパラダイム・シフト〜 新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。 (中略) TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。 こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。 エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。 心地よい鬱 〜可愛そうな自分が好き？〜 しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。 エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？ (中略) これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？
今回のサンプルはコレにしましょう。
文章をざっとみて目に付くのは 文章全体に掛かっている「エヴァンゲリオンの癒し」というものと、 その下のブロックに掛かっている「アニメ界の新風」、「心地よい鬱」という見出しです。
図にするとこんな感じです。
まずはコレをマーク付けしましょう。
<H1>エヴァンゲリオンの癒し</H1> <H2>アニメ界の新風 〜ガンダム以来のパラダイム・シフト〜</H2> 新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。 (中略) TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。 こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。 エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。 <H2>心地よい鬱 〜可愛そうな自分が好き？〜<H2> しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。 エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？ (中略) これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？
と言うわけで、見出し個所を<H1>や<H2>
タグでマークアップしました。
前回でもチョットだけ触れましたが、HTMLでマークアップするには
<はにゃ〜ん>お姉さまがタイを直してくれる</はにゃ〜ん>
（※注意!! あくまで例です。HTMLに<はにゃ〜ん>なんてありません。）
のように、マーク付けする要素を <○○>と</○○>で囲ってあげます。 <○○>を開始タグ、</○○>を終了タグと言います。 そして開始タグ、終了タグ、マーク付けされた内容を全てをまとめて○○要素と呼びます。
（というか、文章にもともと「○○」という要素が先にあって、それを明示的にマークアップするのに、 同じ名前のタグを使うといった方が良いかも知れません。）
さて、HTMLで見出しを表す要素と言えば Hn 要素です。
Hnの「H」は "Heading"のH、つまり見出しです。 そして「n」の部分は数字で 1〜6までが入ります。 つまり、H1 〜 H6 までの6種類の見出し要素があるわけです。 「Hn」というのはこれらの総称で、ホントに <Hn>世界の中心でアイを叫んだケモノ</Hn> なんてマークアップがあるわけではないです。念の為。
Hn要素はnの値が若いほど上のレベルになります。 たとえば、そのHTML文書が一つの章を示している場合、「H1 = 章タイトル」「H2 = 節タイトル」「H3 = 項タイトル」みたいな 振り方になります。
文章には必ず段落があります。 段落は文章の最小の単位で、これ以上は分割できない・・・らしいです。 要は普通に文章を書いていて1行あけたり区切りたくなる部分が、段落の区切りです。
<H1>エヴァンゲリオンの癒し</H1> <H2>アニメ界の新風 〜ガンダム以来のパラダイム・シフト〜</H2> <P> 新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。 </P> <P> (中略) </P> <P> TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。 </P> <P> こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。 </P> <P> エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。 </P> <H2>心地よい鬱 〜可愛そうな自分が好き？〜<H2> <P> しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。 </P> <P> エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？ </P> <P> (中略) </P> <P> これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？ </P>
見てのとおり、一つの段落が<P>と</P>で囲まれています。 この 「P」 は、"Paragraph"の「P」です。まんま段落ですね。
この <Hn>と<P>は、基本的なマークアップ要素なので、 覚えちゃいましょう。
ここまでで、すべての文章がマークアップされました。
HTMLはすべての文章が何らかのマーク付けを去れていないと行けない規則です。
マークアップされてない裸の文があったらそれが何だか解らなくなっちゃうので当然ですね。
つまり、すべての文がマーク付けされるまでは、マークアップ作業は終わらないのです。
ここまでで、文章の本文のマークアップは終了しました。 しか〜し！、わざわざ「本文」と断っているとおり、HTML文書全体の マークアップは終わっていないのです。
でも、ここからはあんまり考えることは無いので、 手順どおりにやって行けば平気です。
「本文」であることをマークアップする訳です。
この文書の名前を付けましょう。 ちょうど背表紙とかのイメージです。
今度はタイトルである事を示します。
TITLE要素が文書情報であるとマークアップします。
TITLE一個だけだととても不自然な感じがしますが、 実は文書に関するの情報としては、タイトル以外にも 作者名とか（当然ですね）、概要とか（小説の折り返しや裏表紙に書いてあるアレと一緒です） その他色々書けるんです。
これで本文と文書情報あわせて HTML文書だよ、と示す訳です。
実際にやってみるとこんな感じです。
<HTML><HEAD> <TITLE>エヴァンゲリオンの癒し(要約版)</TITLE> </HEAD><BODY> <H1>エヴァンゲリオンの癒し</H1> <H2>アニメ界の新風 〜ガンダム以来のパラダイム・シフト〜</H2> <P> 新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。 </P> <P> (中略) </P> <P> TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。 </P> <P> こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。 </P> <P> エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。 </P> <H2>心地よい鬱 〜可愛そうな自分が好き？〜<H2> <P> しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。 </P> <P> エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？ </P> <P> (中略) </P> <P> これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？ </P> </BODY></HTML>
以上で取り合えずマークアップは終了です。お疲れ様でした。 とりあえず、このマーク付けが三猫のスタイル定義ではどう見えるかやってみましょう。
新世紀エヴァンゲリオンはアニメ史に残る名作である。 さまざまな功績を残した本作品ではあるが、 一般的に最大の功績は、アニメ業界を再生したことであろう。
(中略)
TOY業界にしても、本作品以降大人向けアニメから「子供・オタク向け」の建前が消えたことにより、 大人向けTOY 〜場合によっては10万円もの定価をつけたものもある〜 という新たな市場が開かれたのだ。
こうして'80年代のオタクが描いていた「夢の世界」は実現した。 日本人の一億５千万総オタク化し、もはや魔女狩りを恐れる魔女のような生活を送らなくとも済む。 閉じた仲間の間だけでなく日常生活で好きな作品を「好きだ」と叫べる。
エヴァの前は誰もが望みつつ、無理と諦めていた世界が実現したのだ。 この功績は偉大であり、長く語り継がれるべきものであろう。
しかし、エヴァンゲリオンの真の実績は「癒し」であったのではないかと私は思うのである。
エヴァはどうしようもなく救いの無いストーリの作品である。 碇シンジは本作品中で何度「救われた」と思っただろう。そして何度それを幻想だと突き落とされたのであろうか？
(中略)
これだけ救いの無い作品なのに、なぜか私は見ているとどうしようもなく落ち着くのだ。 しかもその効果は本当に辛い時ほど大きい。これはいったい何故だろうか？
シンプルなマークアップだけど、それなりに見えるでしょ？ 実は皆さんがこれ通りに創っても、こんな見栄えには見えないのです。
「同じマークアップなのになんで〜?」と思うでしょうが、 マークアップは基本的に文章の意味をマークするだけなので、 見栄えはブラウザにお任せしちゃうのがHTMLなんです。
でも猫は見せたいように表示させたいので、 このページに 「H1要素だったらこういう風に表示する」と言った 定義を書いて、ブラウザに表示させているのです。
この定義をスタイルシートと言います。 次回はチョットだけ表示スタイルを変更する方法を説明しましょう。 ではでは〜♪
猫はこの講座では正しいHTMLを取得できるようにと思っています。 某朝日新聞のHTML講座は「初心者だから正しいよりも・・」という弁明をしていましたが、 記事を見る限り正しい文法で書いても複雑にもならないですし、 単に書いてる人が正しいHTMLを書けないのを初心者向けを口実に言い訳してるだけに感じます。 間違いを仕様にしてしまうのは、IT業界の最先端を行く感じでGoodなのですが、 どうもマスコミってこの手の身近な技術に弱い気がするのは気のせいかしら?
猫はこの講座を書くに当たって、正しくて簡単 を目指しています。 「正しいけれど覚えにくい」とか「覚えやすいけど間違ってる」とかにならないように いろいろ考えて書いているのですが、それ以前に、肝心の教えるセンスがないのよね、私(TT)
とはいうものの、今回の講座はまだ「正しくない」部分はあるのよね〜。 今回つくったHTML文書を文法チェックに掛けると怒られちゃったりします。 最大の難点はDOCTYPE宣言を書いていないことでしょう。
ここら辺は「手順」的に説明できちゃうんですが、 そもそもDOCTYPE宣言って「マーク宣言」なので「マークアップ」を教えている最中に 割り込ませると混乱しそうなので、マークアップが一通り終わったら解説しようと思っています。 同じ理由で空要素に登場してもらうのもちょっと先を考えています。 でもまだまだ先が長いし、そこまで間違ったHTMLのままというのはちょっとアレだし。う〜ん難しい。
HTMLは正しい文書は構造を持っている、それに明示的にマークを付けるという シンプルなポリシーに則って作られていますから、 レイアウトやメニューといった本来文章でない部分を頑張ろうとしない限り意外にマーク付けは楽なんです。
ですが日本語の文章をマークアップしようとすると、なかなか直感的に行きにくい、ちょっと困った所もあるんです。 つまり英語文化で生まれたものだから英語の文章構造をマークアップするように作られている、 というのがあります。
例えば日本語の段落は普通、改行して 頭一字開けするだけで、空白行の挿入はしません。 ですが、英語の段落は空白行の挿入で判断します。HTMLは英語圏の人が考えてますし、 ブラウザも英語圏の人が実装しているので、P要素でマークアップしたときのデフォルトの見栄えと 日本語の「段落」の間に大きな違和感が残るのです。
また、質の悪いことに、「章」「節」「項」などの見出しを表現できる要素はあるくせに 「章」「節」「項」そのものを表現できる要素はHTMLにありません。 つまり、日本語で空白行を挿入すべきシーンをマークアップする方法が無い。
今ならばスタイルシートがあるので、ちゃんとしたマークアップを行っても 期待通りの見栄えにすることも可能ですが、逆にいえばきちんとスタイル定義しないと、 文章の意味からのマーク付けと、日本語的なスタイルが一致しないのは今でも変わらないわけで・・。
これが日本で<BR>のウケが良い理由でしょうね。
ちなみにWebでは段落の扱い方を英語的にアレンジしているのが、
事実上の標準になっています。
（しかもそれが違和感無いのが日本語の凄いところよね）
HTMLにはもう一つ、
HTMLの出発点が「論文調」な文章に最適化されていた、という問題もあります。
文ブロックの重み付けを間に挟まる<Hn>に頼っていることなんて、
必ず見出しの入る「論文調」文書をターゲットにしているからじゃないでしょうか？
世間一般を見渡せば、文書構造の区切りに常に見出しが付くとは限らないでしょうに、ねぇ(^^;)
これは 匿名ブロック要素「DIV」にクラス定義して回避している人も多いですが、 DIVをあんまり使うとHTMLの意味がなくなっちゃうのが難点です。
そんなこんなで微妙に痒いところに手が届かない感のあるのHTMLですが、
これらを解決したXMLの使いにくさを考えると、テキストエディタで快適にマークアップが出来る
HTMLは、時に機能不足な程シンプルであるが故に扱いやすくも有るんだね、ということなのでしょう。
ようするにバランスが取れてるんだにゃあ。
シンプル イズ ベスト。ZZより νガンダム。 スマートで機動力があるのがヒーローの条件ですにゃ。
それにしても今回の例文、中の人の原稿から拝借したのですが、 長いわ、オタクぽいわ、訳わかんないなわで、絶対失敗よね。へみ〜っ
先月はマリ見てに壊れたと思ったらHDDが壊れちゃうわで、 いろんな意味でも壊れまくりの1ヶ月でした。猫日誌も例外ではなく、 悪い電波を受信しちゃったとしか思えない雑文が並びまくっています。 う〜ん、これじゃお客さん居なくなっちゃうわ・・。
ここで心機一転、今月の猫日誌はキチっと行こうと思っています。目指せ！常識人！！
ことの発端は私の何気ない一言でした。
世の中には「ホームページ」なるものがあって、それを作りたいという人が居ます。 猫はそんな席で何気なく「HTMLなんて簡単ですよ。」と言ったのですが、 いろいろ話しているうちに「HTMLを習得するのは簡単 = ホームページを作るのが簡単」なのかな？ って疑問をもったんです。
そんなこんなで今日はHTMLとホームページの関係についてのお話です。
HTMLというのは、ハイパーテキストマークアップランゲージの略で、 日本語に訳すと「超テキスト マーク付け言語」になります。 ・・・えぅ、訳になってないですね。
まず「
テキストというと実世界では「英語のテキスト」とか言う使い方が一般的です。
英語辞書で調べると「文章（おもに文字だけ）」、「本文」、「文字」、「教科書」という 意味だそうで、イメージとしては絵や装飾のない文字だけの文章みたいです。
コンピュータの世界でも概ねそんなイメージで「テキスト」とは文字のサイズや色をいぢったり、
レイアウトを工夫したり、挿絵を入れたり出来ない文章を指します。
Windows環境でしたら「メモ帳」で編集できる形式(=テキストファイル)ですね。
(HTMLファイルもテキストファイルの一種です。)
次に
突然ですが、皆さんは学生のころ試験勉強ってしませんでした？
ま〜っ、「頭が良くって勉強しなくてもいい点取れた」って祥子さまみたいな人は、
きっとこんなの読まなくってもHTMLなんてスラスラでしょうから、読んでる人は試験勉強の経験がある人ということにしましょう。
試験勉強でよく教科書に「ここは重要」とか、「ここからここまでが暗記する部分だよ」とか
蛍光ペンでなぞったり、囲んだりしませんでした？
(中には緑のペンと赤透明の下敷きで、下敷きを重ねると見えなくなる・・なんてのを
やってた人も多いと思います。)
これをマーク付けといいます。
さっきの試験勉強の例だと、黄色い蛍光ペンでなぞった部分は重要とマーク付けされた部分になります。 同じようにHTML文書では、
ペルリは黒船で<STRONG>浦賀に</STRONG>来訪した。
という風に「浦賀に」という要素を「<STRONG>」と「</STRONG>」で囲んで STRONG(=強調)というマーク付けを行っているわけです。
このときの「<STRONG>」、「</STRONG>」をタグと言います。 HTMLはテキスト内の要素をタグでマーク付けする言語なのです。
HTMLは元々研究者間でいつでもどこでも論文を閲覧出来るシステム「WWW」の文書記述用言語として生まれました。
WWWとは HTMLで記述された言語を HTTPを使って転送し、その所在をURLで示すシステムです。 ・・・といってもあまりピンとこないと思いますが、要するにホームページとそれを見る仕組みのことです。
HTMLは文章の構造をマークアップする為に生まれました。
「文章の構造」っていうとなんだか難しい感じがしますが、 こんな感じの文章だと、判りやすいと思います。
1章 三猫オンラインとは
本章では三猫オンラインの概要について述べるものとする。
1.1 三猫オンラインの歴史
1.1.1 黎明期
三猫オンラインは当初、キャラクタ「三猫」を主軸に置くサイトではなかった。
しかし、PSOにハマりまくっていた作者は、PSO上でのキャラクタをメインナビゲータに
急遽据えることにした。
これが三猫オンラインの始まりである。
1.1.2 邂逅期
以下略・・・
よくビジネス文書や、教科書なんかで見る形式ですね。 基本的に文章はどんな文章でも構造を持っていますが、こういう無味乾燥なものだと 判りやすいですね。
さて、テキストでこのように書いても人が見れば意味が伝わります。
どこが見出しでどこが本文だか迷ったりしなかったでしょう？
でもコンピュータはバカなのでわかりません。 また、人間でももうちょっと入り組んじゃったりとか、 ハッキリしない構造を持った文章ですと何処がどういう構造なのか、書いた人間にしか判らないかもしれません。
コンピュータでも人間でも、文章の構造が一目瞭然にするために 文章の構造をマーク付けする必要があるんです。 このために作られたのがHTMLと言うわけですね。
ちなみに上のテキストをHTMLでマーク付けするとこんな感じになります。
<H1>1章 三猫オンラインとは</H1>
<P>
本章では三猫オンラインの概要について述べるものとする。
</P>
<H2>1.1 三猫オンラインの歴史</H2>
<H3>1.1.1 黎明期<H3>
<P>
三猫オンラインは当初、キャラクタ「三猫」を主軸に置くサイトではなかった。
</P>
<P>
しかし、PSOにハマりまくっていた作者は、PSO上でのキャラクタをメインナビゲータに
急遽据えることにした。
</P>
<P>
これが三猫オンラインの始まりである。
</P>
<H3>1.1.2 邂逅期</H3>
<P>
以下略・・・
</P>
「<H1>」「<H2>」 というのが「見出しだよっ」というのを表すマークです。 「<P>」と言うのは「段落だよ」というマークになります。 （ここら辺は後日説明しますので、今は覚えなくてもOKです。)
これをブラウザが解釈して表示すると、こんな感じになります。 （猫日誌のスタイル定義が適用されているので、IEやNNのデフォルトの見栄えとは異なってます。）
本章では三猫オンラインの概要について述べるものとする。
三猫オンラインは当初、キャラクタ「三猫」を主軸に置くサイトではなかった。
しかし、PSOにハマりまくっていた作者は、PSO上でのキャラクタをメインナビゲータに 急遽据えることにした。
これが三猫オンラインの始まりである。
以下略・・・
これがHTMLです！
最後に引っ張りに引っ張った「
ハイパーテキストとは、リンクをたどるだけで何処のどのような文書も 参照できる凄いシステムを持ったテキストのことです。今ではクリック一発で他のサイトにいけるなんて あたりまえですが、それはそれはハイパーなことなんです。
- おことわり -
ホームページって言う言葉、いろいろ問題をはらんでいます。
本当は日本だけでしか通じないトンデモ用語で、外国や日本でも技術者さん
にとっては別のモノを差す言葉なんです。
でもここではそれには余り触れないで、いわゆる世間一般でいうホームページを
ホームページと呼称し続ける事にします。(ホントは嫌なのよね・・)
さて、本題。ホームページというと皆さん何を思い浮かべるでしょうか？
リンクがあって、広告が出てて、まるで雑誌のようなページを思い浮かべる方が
殆どだと思います。
これらホームページの殆どはHTMLで記述されています。
先にも述べたとおりHTMLは論文やビジネス文書等の無味乾燥なドキュメントを記述するために生まれたため、 広告や、雑誌に見られるレイアウトに凝った文書を記述するようには出来ていないのです。
本来の目的以外で道具を使うのって難しいです。 （例えばハサミで魚をさばくのって、すっご〜く難しそうでしょ？）
「ホームページを作るのが難しい」、「HTMLって訳判らない」と言う意見が多い本当の原因は、
HTMLを本来の目的以外に使おうとするからです。
HTMLはDTP的なこと・・・見栄えに凝ったり、レイアウトを工夫したりして、
雑誌のような綺麗なホームページを作ることが出来る言語では有りません。
ですが、頑張れば何とかハサミで魚を3枚に下ろせるように、
HTMLでレイアウトをなんとかやっちゃってるんです。そりゃあ、難しいのは当たり前ですね(^^;
というわけで、猫のHTML入門は入門ですしHTMLを無理なく使う方法を説明しようと思います。 無理なく使っている限りHTMLは簡単です。
と言ってもお堅い文章しか作れないわけでなく三猫OnLineのようなページは作れるので安心して下さい。 (多少、無理していますが・・(^^;) )
HTMLをマスターするとホント便利です。テキストファイルより艶やかに、ワープロより手軽に文章が書ける HTMLはパソコン生活を豊かにします。ぜひ、マスターしてくださいね。
さて、今回はつまらないお話ばかりでしたが、次回は実際にHTML文書を作ってみましょう。
なにをとち狂ったか、HTML講座なんかを連載しちゃおうと思います。
やろうって気になったのは一つはネットゲームの友人にHTMLなんて簡単だよっ と言ってしまった手前。もう一つは最近 Slashdot JAPANで 朝日のメチャクチャなHTML講座に対する話題が挙がった時に 「じゃあ、"ホームページ"を作ろうとしている初心者にどういう風にHTMLを教えるか」が議論されたのに 触発されちゃったことです。
いろいろ考えてみると、フツ〜の人が思っている「ホームページ」があって、 自分がどういう「ホームページ」を作ろうか想像して、 HTMLを触ってみるとやっぱり思い通りに出来ない、する方法が解らない、 やったつもりだけど動かないで、挫折しちゃう人が多いんだろうな、って思います。
じゃあ、どうやって教えればいいのかしら？という 私なりの回答を作ってみたいな、ってのが正直なところ。 ただ私は薀蓄大好きなので、どこまで語りたい衝動を抑えられるかが勝負の分かれ目です。
| SEO | [PR] おまとめローン 花 冷え性対策 坂本龍馬 | 動画掲示板 レンタルサーバー SEO | |
