[PR]100万円が無料で当たる!:今すぐ応募して現金を当てよう!


HTML Tips

Last Update 9999.99.99.

ホームページ作成に伴って気がついた小ネタあれこれ。落ちも特になし。タイトルも脈絡なし。
しかもW3Cの推奨基準なんか見てないから、「かいてあるじゃん、当然」「変だ」なこともあるかもしれませんが、つっこまんといてね。
#最近はタグをガリガリ書くアナログウェブエディターは少数派だろうから、どこまで役に立つかは知りません。

LINKの冒険2002.05.09.
 なんか当たり前だと思っていたから別に気にもしていなかったんだけれど、関連会社のSEさんに「へぇ。」と言われたんで書いときます。

 HTMLでは「<A>タグを使ってリンクを貼る」ことができます。通常<A HREF="xxx.htm">なんて感じで、別のページにジャンプするのに使います。
 実はこのタグでリンクできるのは.htm(.html)ファイルだけではありません。ブラウザで解釈(=表示)できるものであれば表示しますし、そうでないものはHTTPを使ったファイルのダウンロードができます。

 例えば、<A HREF="title.jpg">とすれば、画像だけが表示されます。.txtにリンクを貼った場合も同様です。.pdfではAcrobatReader(R)が自動的に立ちあがり、表示されます(関連付けがされていれば、ですが)。
 また、.lzhや.xlsではHTTPによるダウンロード→保存が可能です。まあ、ブラウザの設定を勇者モードにしている方は、保存せずにそのまま開いてしまうようですが。

 ダウンロードはFTPが禁じられた環境では良く使います。わたしゃ業務でも使っていますぜ。自分のサイトにインストール用のバッチを置いといて、手ぶらで出張してインストールしたり、電話先の人間を遠隔操作してインストールさせたり。

 おかげで少々運動不足かも(いや、そのせいじゃないか)。
ルーズ・スペース2002.05.08.
 HTMLタグは大抵本文を書いてから挿入されます(あ、いや、そうでない場合もあるが、ここではそういうことにしておいてくれい)
 文章てのはこんな駄文のようにだらだら書く場合もあるけれど、きちんとまとめるには適当に改行しながら書いた方がよいですね。また、HTML化したときに<LI>が使用される場所には、頭下げなんて手法も使われます。これは国語教育における作文作法指導が摺り込まれたの結果ではないかにゃと考察されますが、まあとにかく。

 結果、本文というものは改行や空白を入れつつ作成されます。
 ところがHTML化にあたっては、これら改行や空白(しかも日本語IMEによって全角と半角が混在するのだ)が非常に邪魔になります。美しくない。

 例えば、

 「今日はいい天気で気分がいいが機嫌が悪いので帰らせてください。」
 「今日はいい天気で気分がいいが 機嫌が悪いので帰らせてください。」
  「 今 日 は い い 天 気 で 気 分 が い い が 機 嫌 が 悪 い の で 帰 ら せ て く だ さ い 。 」

なんてのはどうか。
 微妙に隙間が開いているのは改行が入っているところです。空白でも同様のことが発生します。
 #同じに見えます?それはIEだからです。改行はIE5.5では無視されるみたいです。

 文章を書いた後にHTMLタグを書いていくと、<BR>入れ忘れなんてのが結構発生します。そうするとこのように微妙に隙間が開きます。改行は大抵句点の後に入れますが、それでも微妙に目立ちます。特に等幅フォントを使用しているときや、リンクを貼っているときなんかは妙に気になってしまいます。リンク用の文字・画像の後ろにぴょこんとリンクアンダーバーが飛び出ているのは情けないです。
 逆に改行した先に字下げ用空白を入れ忘れたとか、そんなことも良くあります。
 後は冒頭で述べたように<LI>箇所の空白取り忘れとか。

 これらを防ぐ方法は今のところ「気をつける」のと「生成されたページを良く見る」のが一番と思われるので、皆さんちまちまがんばりましょう。

 いや、改行コードを判断できるエディタで確認しつつきちんとチェックして<BR>を挿入するとか、改行の前には特殊な記号を入れておいて後で一括して<BR>に置換するとか、右・左揃えできるツール(Excelでも可)を使って平常文の各行末に<BR>がついているか、行頭にスペースが入っているかを確認するとか、<LI>〜</LI>間を範囲指定して空白を一括削除するとか、方法は色々あるけど費用対効果(費用には人件費=労力含む)に見合うとも思われないので。


 #まあ、この事象を逆手にとって、隙間がほしいところに改行やスペースを入れる、なんて手法もあるんですけどね。
へっぽこ実験デスクリプション2002.04.12.
 Excelを使ってHTMLスクリプトを書こう、ってな話です。
 「ExcelでHTMLを〜」というと、通常ExcelシートをHTML化してブラウザで見よう!ってな話になります。マクロ使ったりとか。最近のExcelには標準でHTML出力ついてるし。
 ここで書くのはそんな話ではありません。ExcelをHTMLにするのではなく、HTMLを書くためにExcelを使おう、ってなことです。
 キーワードは「めんどくさいことは避けよう」です。

 私はHTMLをエディターで書いていますが、めんどくさいのがTableの処理です。まあ、通常のTable処理なら良いんですが、背景やフォントをカラムごとに設定したり、表の形式を変更したりがめんどくさくて。Tableが大きくなればなるほど、その負担はただならぬものになります。

 そこでExcelの登場です。

 まずExcelに本文を書きます。特に考える必要はありません。Table表示した時のイメージそのままをExcelのセルにたたけば良いだけです。セル連結処理が好きな人は使っても結構です。
 ま、こんな感じですか?


 次に、HTMLタグ(<TR>、<TD>など)を入力します。Table表示した時のイメージを忘れずに。spanでのカラム連結なども、そのままに。
 こんな感じ。

 Excelですから、セルのコピーや一括入力も楽々です。なにより視覚的にTableを認識できるので、タグ漏れがありません。

 さて、これをcsv出力します。「名前を付けて保存」でファイルの種類を [CSV(カンマ区切り)(*.csv)] にして保存してください。
 最後に、保存したcsvファイルをエディターで開き、「,」と「"」を削除します。これは「,」と「"」をブランク置換処理すると一発です。

 さあ、これを<TABLE>〜</TABLE>に貼りつければ、これで完成。
14月1日160
22日181

 csv出力する時に.xls形式でも出力しておけば、いつでも仕様変更が可能です。行を挿入したり、削除したりはExcelの得意技ですから。
 また、csv出力せずにエディタに直接貼りつけることも可能ですが、TABが入ってしまうので美しくありません。

 #ちなみに、本文中に「,」「"」を使わないこと。どうしても使いたい場合は別の記号で入力して後で置換えてください。「,」「"」置換処理が一斉にできないので、めんどくさいです。

 本日の実験....成功?
ハナ差2002.04.11.
 <UL>と<Hx>のどちらを上行にするかで、titleの位置がずれます。

1.<ul>

    TITLE

  • 一番
  • 二番
2.<h2>TITLE<h2>
3.<li>一番
4.<li>二番
5.</ul>
1.<h2>TITLE<h2>

TITLE

  • 一番
  • 二番
2.<ul>
3.<li>一番
4.<li>二番
5.</ul>

 考えて見りゃ、ListのなかにHeadingが含まれるので字下げになるのは当たり前じゃん。
ちゃんと表示しろよ2002.04.11.
 Table の中で画像サイズを決めるのは結構大変。
 画像の大きさは、 <IMG> の中で width か height のどちらかを指示することで設定できるはず。で、width や height の値には、そのまま pixel 数を設定する方法と、画面の百分率を設定する方法があるはず。
 pixel で設定すると、画面が小さい場合画面からはみ出してしまうことがあるので、私は通常パーセンテージで指示を出していました。2〜3年前は率の設定が難しくてねぇ。電卓たたいて設定しても、table との関係で変な感じになっちゃったり。なんとかなんねぇかな、これ、と思ったりしたもんです。
 ところが最近はブラウザも進化したらしく、パーセント表示でも結構思った通り表示してくれるようになりました。

 まず Table 外の場合。
 パーセンテージ(30%)指定すると、

 pixel(300)で指定すると、


 で、 Table 内がこれ。
30%
(カラムの30%になる)
300pixel

 どうですか、きちんと表示されてますか?
 表示されていない貴方、ネットスケープを使っていませんか? 私のネスケはいつのまにかパーセント表示に対応しなくなってしまいました。ちなみに、IEは5.5SP2、ネスケは4.7です。

 前述しましたが、pixel で指示すると画面幅を小さくした場合にはみ出てしまうので、好きじゃないんですよ。横スクロール嫌いだし。「画像はサイズまで固定するのが芸術ってもんだ」なんてのはご勘弁を。画面の全体イメージってのも大事です。
 まあ仕方がないんで、今のところ pixel 指示してます(敗北者)。なんとかなんねぇかな、これ。

Copyright (C) 2001- MINatsuki(June Arai)
http://min888.at.infoseek.co.jp/

[PR]≪無料≫100万円懸賞:スピード抽選で大当たり