雑談１回目 「筆者はなぜHTMLを知っているのか」
雑談２回目 「よくHTMLチェックで怒られました」
雑談３回目 「なんでTWのサイトなのに、こんなサイト作ったのかｗ」
雑談４回目 「思わず使っちゃう<pre>」
雑談５回目 「このサイトを作ってみての感想」
雑談６回目 「境界線『<hr>』」
雑談７回目 「同ページ内をリンクで飛びたい」
雑談８回目 「<br>も<pre>使わずにいっぱい改行したい」
雑談９回目 「検索エンジンに引っかかるためには？」
雑談１０回目 「wikiの情報の移植作業が大変；ｗ；」
雑談１１回目（New! 2009/06/11） 「肝心なのは中身」
まぁ、もとより自分のサイトを持つということはしたかったのよ。 便利そうだし。何よりも、ネット内で誰かからの『評価』を受けたかった。 でも自分から勉強するという行為は、筆者のスキルにないｗ 何かフラグが立たないと勉強できない体質なのだ。 そんな中で、私の高校時代にHTMLを作る授業があった。 そのときはなぜかMacOSを使って、Macの古〜〜〜い歴史のあるPCを使って HTML文叩いて表示していた。
こんなしょぼいのじゃ、満足できん！
そして適当なサイトを見る。 かたっぱしからコピペして表示を見る。 んで、いつのまにかサイトっぽいサイトが出来た。 知る人ぞ知る（内輪ネタ）、運命共同体 双誠 である。 当初製作していた『東方戦闘紙』という東方二次製作（カードゲーム）を筆頭に、 超てきとーなコンテンツ盛りだくさんのサイトである。 （しかし、サイトの容量がいっぱいになり、2009/04/01現在でサイト圧縮した） 日記、小説、手書きのへぼい絵、写真、アプリ、動画、レポート、 ほかイベント企画とか、とにかくいろんなものが置いてあった。 そう。 やりたいことを全部ぶっこんでみたって感じだ。
まぁ、そのうちだれることは想像できた。だから2009/04/01にサイト圧縮したし。 そんなこんなで、HTML文書は高校時代の青春（？）の１つなので知っているのです。 |
HTMLの入門サイトで出てくるタグ。 それらはとてもシンプルで使いやすい。とっかかりがいい。 高校時代に作った筆者のサイトも、この入門サイトに則って作成していた。 ほー。文字色は<font>でやるのか〜。 指定は…おぉ、英語表記か。『red』とか『blue』とか、簡単だね！ お、これはframeかぁ…難しそうだけど、 とっても高度なサイトではみんな使っている！ よし、私もそんな高度で優秀なサイトの仲間入りだーー！！ …。 ……。 ………。
どこが優秀だ。何が高度だ。
そう実感させられたのが高校卒業後、専門学校に通っていた時期。 色とりどりのフォントを使いまくり、 フレームによって切り分け、見やすいサイト作りをして 有頂天になっていた時期だった。 HTMLの授業。高校の「おまけでやりました☆」みたいなノリではなく、 正真正銘のHTML、Webサイトの授業だ。
「は！いまさらだし超らくしょーだし！」
そう思って自主サイトの製作の課題をぱっぱと済まし、提出。
怪しく光る先生の眼鏡
筆者の態度は、先生を本気にさせた…！！ まず、とあるサイトを教えてもらった。 それこそが、今の筆者の原点、そしてこのサイトの存在理由。 Another HTML このサイトでもたびたび出ている、 『HTMLチェック』と言っていたサイトである。 どうやらHTML文をチェックして採点してくれるらしい。 どれどれ、筆者の華麗なHTML文は何点をはじき出すのか…ｗｋｔｋ …。 ……。 ………。
−５８６点
はぁ？？？！！！！ マイナス…？しかも１００とか生ぬるいもんじゃない。 ５８６？何それ。限界突破してんじゃん。 それを見て「ちょｗｗｗｗｗｗ」って言ってる筆者に近寄る先生。 そして、名言を残す。 「見た目はまずまず。しかし中身がこれでは真のサイトとは呼べない。 まずは何が良くて、何がいけなかったのか。 このサイトを眺めて１つずつ潰していくといい。 その先にこそ、真の美しいサイトが待っている」 そう、それは見せかけの……ハリボテのようなHTML文だった。 ハリボテのサイトは、いわゆるPCへの負担とか、ブラウザへの依存とか、 色々と内部的問題を抱えている。携帯から見ることさえ出来ない。 『<font>』は文書構造を記述するという本来の目的からは 外れたタグであるとか、 『<frame>』は別のHTMLバージョンではサポートされてないとか、 色々ありまくりだった。 そして、frameに変わるスタイルシート設定や文字色等を先生に 教わりながら、ついに１００点のサイトを作り終え、提出したのだ。 だが、あのHTMLをチェックするサイトでさえも、 採点できないもっと深い領域があるのだと、そこで知った。 先生曰く 「このタグは本来こういった使い方じゃないよ、 これはスタイルシートを使えば解決する」 「HTML文全体のタグが、大文字や小文字でばらばらだ。 どちらかに統一したほうが、誰がソースを見ても きれいに見れる」 「文章全体のインデントを整えよう。 後で修正、管理する際にこうゆうのは大事だからね」 そう、タグに問題はなく、ようするにHTML文を書く本人のマナー。 そこも重要だった。 HTMLチェックでは、人間のモラルやマナーを採点できない。 真の美しいサイト それは、ほかの人に見せるためだけではない。 自分も含め、万人に美しくあれ。 裏方であっても、その姿勢は大事である。 つまり、チェックで１００点を取りつつ、見やすいサイト内容、 見やすいコードを目指すことが大事である。 （とかいいつつ、このサイト自体見にくいじゃん。という人はいるがｗ） これが、筆者が専門学校で習ったHTMLの全てである。 |
雑談３回目 「なんでTWのクラブサイトなのに、こんなサイト作ったのかｗ」
まぁ、ほかに置いとく場所がなかったというのと、
誰かサイト作ってくれねーかなぁ！
という期待があるｗｗ サイト作りの面白さを知ってほしいのだよ。 まぁ、ブログもありっちゃありだけど、 なんせ自由度が足りない。 日記機能としてブログを使って、ほかのコンテンツは 普通のWebサイトにするとか（このサイトみたいに）、いいと思うんよ。 TWの情報が載っている個人サイトというのは、 しかも同じ鯖であるというのは非常に強力だ。 ブログだと記事の検索がめんどいし。ここは特化できる。 そしてもう一度言うけど、
サイト作りの面白さを知ってほしい。
てかTW仲間に限った話じゃないけどｗ 逆に、サイトを作ろうって人がTWにハマり出すという目的も 大いにあるのだよ！ｗ あと、特に作りたいコンテンツが思いつかなかったってのが 全体の７５％を占める（ぉぃ |
実はこのサイトには、<pre>というタグが使われている。
なんだこのタグ？
今文字を打ってるこれも、table内にpreを埋め込んで使っている。 では、『pre』ってなんぞや？？ 正式には、PREformatted text（整形済みテキスト） の略。 ソース中のスペースや改行をそのまま表示するときに使用するためにあるタグ。 こいつの一番のメリットは、
「改行するのにいちいち<br>を使わない」 ところ。
とにかく、HTML文の中に書いたものがそのまま出てくる。 （ただし、『<』や『>』や『&』は特殊文字のため表示されない。 表示させたい場合は『<』、『>』、『&』と書く） しかし、専門学校の先生曰く、「使わないほうがいい」とのこと。 表示しているウィンドウの幅に合わせて折り返ししてくれないため、 ウィンドウのサイズを小さくすると、横スクロールバーが 現れてめんどい。 ちゃんと<br>やスタイルシートを使って、文字の間隔を空けるように 心がけるのがよい。 |
まずはここまで読んでくれた方々に
感謝してもしきれねぇ！！
よくこんなてきとーなサイトを見てくれたものだｗ あぁ、とりあえず
よく２日で作れたなぁ。
というｗ感想としてはいまいち？ ちびちび参考にしたサイトはいくつかあるけど、タグとかそのほとんどが 『筆者が覚えているもの』なので、ちゃんとした説明が見たかったら 次のページのリンクで、別サイトに飛ぶべし！だな。 特にスタイルシートについては、十分に時間を有して勉強したほうがいい。 しかしこのサイト……どうなんだろう。 筆者が一番見やすい形なんだわ、これが。残念なことにｗ つらつらと「これがあるよ」「あれがあるよ」というリストが ずらーーーっと出ていても、筆者は無理です。 どこから手をつけていいのか。まるでわからないサイトは無理です。 なので、サンプルを手元で作りながら、 『自分で書き込んでいいところ』と、 『ここはコピペでいいところ』をわかりやすいように書き、 作成の流れを追って、いつのまにかなんか出来てるー みたいな状況が、 一番わかりやすいと思っている。 独断と偏見だけど。 この手法はもとより『完成品(サンプル)をばらして解読する』、いわば
『ラジオは分解して中身見なきゃ気が済まない』
な精神から来ているｗ（中身の意味は判らないが、見るだけで満足 あと、たびたびサンプルコードを全て記述したのも、 自分は今どこにいるんだっけ？を把握するために、 ところどころに散りばめたりした。 ……何度も言うけど、
筆者はとても見やすいと思う（言い訳
ん〜、あと感想？？ なにがあるかなぁ〜。 あ、そうそう。最近こういった解説サイトの人の日記とかを見るのが、 とても面白いと感じているｗ javaのstrutsの解説とかしている人のブログに 晩御飯は焼きそばだった。 とか乗ってるだけで とっても生活感が感じられていいｗｗ大好きｗｗｗｗ ほかにも生活を話題にしたブログはあるのに、なんでだろうね。
この人は私生活でも、こんな解説サイトみたいな
かたっくるしいことをしてるんだろうか。 というイメージをぶち壊してくれることに、 異常な快感を得ているｗｗｗ うん、これが正解っぽいな。
って、これは感想じゃねーーｗｗｗｗ
まぁ、雑談になってればそれでおｋなんだけどね（爆ステ この雑談の更新、どうしようかな。 この第５回で終わってもいいんだけど。
ま、フラグが立ったらまた書くということで。
以上です。見てくれてありがとうございましたっ！！ 今度はTWの世界で逢おう（ちょ （ーｗ−）ノッ |
『<hr>』を使うと、境界線を引くことができる。 ↑こんな感じ。まぁ、テーブル内なら<tr>があるからいらないかもだが…。 このサイトの一番下にある線も、この境界線です。 結構便利。 ただし、<pre>内には書けない。 一応、『hr』には属性が指定できるが、 属性入れるとHTMLチェックにひっかかります。 一応乗せとくけど、 「width="300"」「size="20"」「color="#FF0000"」「align="right"」とかある。 （イコールの後の数値とかは適当）
スタイルシートで指定できるから、
そっちでやればおｋ。
文字色に使ってた『color』だけど、『<hr>』で使うと線の色になる。 筆者の場合、ぶっちゃけ文字色変更用のクラスと併用しちゃってます。 |
今、一番上のリンクからここへ飛んできたように、 （上から流して見てる人はわからないかもだがｗ） 同じページ内の、ある箇所にリンクで飛ぶようにするには、 『<a href>』 と 『<a name>』を使うんよ。 ↓例 <a href="#z07">飛ぶ！</a> … <a name="z07">ここに飛ばされる</a> 注意するのは、hrefで指定する名前には必ず『#』をつけること。 そして、nameのほうには『#』がいらない、ということだ。 これは主に、同ページ内にある文章が縦にくそ長かったり、 別のページを作るのが面倒で１ページに全部作ったが、やっぱり飛びたかったり、 ページ内の目次みたいにしたかったりするときに便利である。 ていうか、このページ自体がその例であるｗ |
雑談８回目 「<br>も<pre>使わずにいっぱい改行したい」
<br>は連続で置くことができない（HTMLチェックでエラーになる）ことは知ってる。 <pre>もあまり使うなと言われた。
じゃあ、どうすりゃいいんじゃ。
雑談４回目にもほのめかしているが、これは
スタイルシートだ。スタイルシートを使え。
スタイルシートには『margin』というすばらしいものがある。 marginは余白を設定できる。 うん、改行というよりは、余白を空けるイメージになる。 ↓設定例
.mar { これは、それぞれ『上=10px』『右=20px』『下=30px』『左=40px』 の余白を空けている。
pxってなんじゃ？
ピクセルの略。まぁ、単位なんだけど。 大きくすれば余白も大きくなる。 今回は下にいっぱい改行したいように見せたいため、 『margin: 0px 0px 50px 0px;』 とかにすれば、下に余白が50px分空くことになる。 50pxというと、ここから ここぐらいまで空く。 しかし、ただ下に余白を空けたいなら、 わざわざほかの上とか左右に0を入れるのもめんどい。 ということで、『margin-bottom』というのがある。 これは、下の余白だけを設定できる。 例で言うと、『margin-bottom:50px』みたいな感じ。 ・上の余白『margin-top』 ・右の余白『margin-right』 ・左の余白『margin-left』 なんかもある。 あと、『px』じゃなく、『em』なんかにすると、 大まかな余白の設定が可能になる。 『margin-bottom:3em;』とかすると、ここから ここぐらいまで空くことになる。 ちなみにemの意味は、 『文字の高さを基準とした1文字分の長さ』 らしい。 だから3emは３文字分の高さ（改行３回）という意味かもしれん。 しかし、このmarginを使うと、コピペしたときに
改行１回分しかコピペ出来ない。
たぶん、このクラスを『p』タグに入れてるから１行改行されてるかもだが、 コピペさせたい文で改行を正しく表したいときには、注意が必要っぽい。 |
このサイトも検索エンジンに引っ掛けるためにと思い、 色々探してみたんだが、どうにもねぇ……。 なんか、 <meta name="robots" content="all"> <meta name="description" content="このサイトの説明文"> <meta name="keywords" content="検索されたいキーワード１,検索されたいキーワード２,……"> というみたいなのがあるようだが、
意味ないかもしれないという意見が多数ある。
上のやつはそれぞれ、 『検索を定義するロボットに認知されるようになる』 『検索されたときに出てくる説明文（検索ワードにも引っかかる）』 『検索したときにこのキーワードが引っかかる』 というものだが、スパムとかが多いため、ほとんど使われなくなったとか。 検索で引っかかるのに重要なのは、
別のサイトからいっぱいリンクされていること
らしい。 てことは、サイトの内容がいかにも「リンクしてーー！」な内容でなければいけないし、 相互リンクを頼み込んだりも大事だ（相互リンクを売り込む際にも、サイト内容は重要）。 あとリンクフリー、アンリンクフリーね。 しかし、今実は製作して３日目（2009/05/22）なんだけど、 googleの検索で『BloodyRosary』でで検索すると、 なぜかブログよりも…、ＴＷな内容よりも…、
初めてのHTMLの目次が一番上にヒットして出てくる
確かにmeta文は置いてある。むしろmeta文をその目次と、 BloodyRosaryの別館TOPにしか書いてないわけだが。 結局理屈はわからない。 しかも次の検索で出てきているのが、別館TOPではなく
マキシの命中率計算なのだ。
しかもマキシの命中率計算機は『cgi-bin』の中に入っているため、
infoseekの契約上、 「クリックしても飛べない」。
サイトにアクセスするには、同じサイト内からのリンクか、 アドレスバーに直接URLを打たなきゃ表示できないのだ。 （なので今さっき、cgi-binから出してみたｗ 検索しても表示できないとか悲しすぎるしね；ｗ； 場所を変更したら検索に引っかからなくなったとか、ありそうねｗ まぁ、いいけど。TOPさえ検索されればおｋだし。） |
今『BloodyRosaryの知恵袋』というサイトを作っているわけだが、 どうにもぱぱっと移植するのは難しいらしい。 TW wikiのレイアウトそのままで表示！ってんならそもそも作る必要はないｗ それならwikiに行け！ってことだ。 やりたいこと、それは軽いwikiみたいなサイト、かつテイルズウォーカーよりは 情報が最新、ということだ。 情報サイトを作りたい！という人は、それなりの素質が必要だということを身に染みる。
でも、素質がなくても作ろう。
ぶっちゃけ私はそのサイトが必要だ そう、この情報サイトは何より、自分のために作るのであるｗｗ もし他の方も見たければどうぞ〜というノリ。
まず、wikiのコピー作業から始まった。
とりあえずエクセルに貼り付けて、そこから関数使って 一気に作れないかなー ということで、がんばってみた。 まず、最初の難関
コピー先の自動日付変換の問題
これは、エクセルの仕様で「5-7」とかやると、「2009/5/7」とかに変換され、 さらに表示的には「５月７日」で表示されることだ。 TWでは数値幅を「5-7」とかであらわすため、コピーすると 日付に変わってしまう！ ならば秀丸（メモ帳みたいなやつ）に貼った後、 エクセルのほうを書式を文字列にして貼ればいいのでは？と思い、やったが…。 あぁ、テーブルを秀丸にそのまま貼ると、タブじゃなくて半角空白になるのか。 では変換で半角空白をタブにするのはどうだ？と思ったら、 今度は不必要な半角部分までタブにする始末。 で、色々やった結果、こうなった。 1.まず新規テキストファイルに、wikiのソースを貼り付ける 2.Sell:<br class="spacer" /> と <br class="spacer" />Stab とかを、改行なしに変換する 3.htmlファイルに変更したあと、開いて、内容をエクセルに貼り付ける 4.エクセルに貼り付けたものをコピーし、秀丸に貼り付ける 5.秀丸に貼り付けたものを、月を-に、日を空白に設定（名前や説明等に月や日がないか確認 6.エクセルに貼り付けたほうの、書式を文字列に変更する 7.秀丸の内容を上から貼り付ける 8.エクセルの内容を微調整、体裁を整える 9.タグ変換させる行を名前の一番右に書いていく 10.コピーした計算結果を秀丸に貼り付ける 11.貼り付けたやつの\tを\nに変換、\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nを空白に変換 12.合成参照を変える等、htmlを微調整 13.本番用のhtmlに貼り付ける 14.できたものを6個単位で分割して表示するように調整 と、アホみたいな作業量になった。 でも仕方がなかった。他に思いつかないｗ もうひとつ思い出ついたのは、いったんTWの情報をデータベース化して やるというもの。MicroSoftのAccessがないので、MySQL辺りか？ でも結局どれもめんどいからやらないｗ データベース化してれば、それに沿ってレイアウトをループ処理してくだけなんだが、 とりあえずあきらめた。 データベース化してれば後々の運用、保守が楽になるのになと、 きっと後悔するだろう。これは断言できる。 いや、エクセルでもデータベース化できるので、そっちでやるけどね。 あーめんどいｗ というわけで今ちまちま製作中。 これを書いた段階では、武器と防具の兜、鎧、盾まで作れた。 あとはくそ多そうな体とかだ……。 その後も、クエストとかマップとかダンジョンとかフィールドとか 色々ある。 やばそうなのはアイテムとモンスター。 無駄にあいうえお順にするとか自分で勝手に決めたおかげで 作業が増えそうである…。モンスターはすでにあいうえお順だからいいけど。 HTMLを覚えようとした理由が情報サイトを作りたいからだ、という人へ。 HTMLを覚える前に、まずはデータベースのノウハウを知っておくことをお勧めする；ｗ； |
例えば本屋などで売っている本は、そのどれもが 原稿チェック、編集、校正が行われているのに対して、 個人のWebサイトというのはそういった流れはないだろう。 だから破綻した文章が書いてあったりするサイトも少なくはない。 その文章によって人を不快にさせることもあるだろう。 それが本であれば容赦なく
ゴミ箱行き
にする人だっている。 残念ながらサイトはゴミ箱にぶち込むことは出来ないため、 そのまま残る形にはなるが、そんな文章は誰だって避けたい。 どうすれば？まぁ、今までご覧になられたとおり、筆者のこのサイトは ゴミ箱にぶち込むレベルのものではあるので、語れはしないがｗｗ まぁ、「正しい文章の書き方」について言及した本はたくさんある。 それらを買うのもいいだろう。 （むしろ検索しても本の販売がどかっと出てくるので見つけにくい） んで、今ぱっと見たサイト（中身は見てないが）で、情報が 豊富そうなサイトを見つけたので貼っておく。 文章の書き方・文書の作り方 というよりも、自分が知っているサイトで読みやすいなぁ、と思った文章を見て、 そこから学ぶのが一番自然だ。 ……これって、小学校とかで国語の授業中にちゃんと国語の本を読んでたかどうかに かかっている気がするｗｗｗ ちなみに筆者は全授業らくがき時間でした（爆ステ |
ふぅ。 雑談が終わったら、ほかのサイトも見てみようっと。 次へ(参考サイト) 前へ(超まとめ) 目次へ 別館TOPに戻る
ブログに戻る
