キューピーＴＶ３分間クッキング® みたいなお手軽モード仕様でホームページをデザインしたいと、個人的にすぐ使えそうなTipsをメモしました。それがSS.ORIANA lighthouse をアップした2003年頃のお話し。当時は、CSSが持っていた本来の機能を充分理解していなくて「テキスト主体でもここまで表現できる」という乱暴な考え方の下このエディションを発行したのです。
Contents
Index
| タイトルをタイトルっぽく | ブラウザによって見え方が変わるのが欠点 | ||||||||||||||
| やっぱスタイルシート | 見た目にはわからないんだけどcssはやっぱ必須 | ||||||||||||||
この Tips↓は成人Ｒ指定番組です クリックする前に周辺の環境にお気をつけあそばせ |
|||||||||||||||
| HTMLの醍醐味はリンクにあり | ねっとサーフィンとはよく言ったもんだ | ||||||||||||||
| 検索エンジンに直接行こう | Google®さんのサイトに行くとソースがあります | ||||||||||||||
| ひと文字だけ強調する | すっごい簡単なのに意外とアーティスティック | ||||||||||||||
| 見出しはそれらしく | ゑぶぃかるサイトでは微調整こそが命 | ||||||||||||||
| グラフィックイメージを片側に寄せる | 見た目重視のゑぶぃかるサイト用必須テク | ||||||||||||||
| 或いは文章を回り込ます | やっぱ全体のレイアウトバランスが大事っしょ | ||||||||||||||
| リンク色指定とホバリングタグ | hoveringタグはリピートできないところが惜しいよネ | ||||||||||||||
| インラインスタイルで変化を | これはちょっと邪道臭いんだけど | ||||||||||||||
| 透明画像を準備します | これは邪道臭い、どころか邪道です!（キッパリ!!） | ||||||||||||||
| 簡単なjavaスクリプトを使う | javaスクリプトはブラウザ依存するので要注意 | ||||||||||||||
| 枠線無しの表組み | W3Cでは邪道、このIndexレイアウトにも使っています | ||||||||||||||
| クリッカブルマップで遊ぶ | これってスゴイよね、とっても重宝するお奨めテク | ||||||||||||||
| 署名を個性的に演出 | ワザと文法を間違うという反則技が予期せぬ効果 | ||||||||||||||
| ページ内ジャンプの設定 | これぞ身近にあった便利テク。HTMLえらい!! | ||||||||||||||
| ここで言う『ゑぶぃかる』は造語。なんとなくわかった気になっておきましょうね | |||||||||||||||
● Googleでヒット率をあげる
Google で検索してん SS ORIANA が引っかからんとか、あんましと思わん？ (/o＼) リンクを増やすのが良いみたいけど、他人のサイトソースには手が出せへんし、フリーのレンタルサーバーみたいなヤツをあちこちに増やして細工するしかなさそう。まっ、その前に「工事中」をなくさなあかんみたいけど。
その後、google でヒットさせるための Key Word がわかったにぃ。oriana、beppu、ymd で絞り込むとかかるごたる。半角英数字のまま、ちゅうのが味噌やねんけど (^-^)v 問題はこの key word を SS Oriana lighthouse のサイト名から連想してもらわなあかんちゅうこと。それも半角英数字を使用して検索かけるとバッチシ上位表示されるけど、２バイトで「オリアナ」とか使うとやばい！
Google は見直しが頻繁で、ヒットする時期があったり、なかったり。 で、今度はナント Yahoo! search でもヒットし始めた。Key word は oriana ymd 。同じ Key word で検索して、ヒットする検索エンジンサイトと当たりもかすりもせん検索エンジンサイトに二分さるるごたん。MSN サーチでヒットしたのには驚いた。要は、Google エンジングループか、それ以外のエンジンか、で違うみたいな気がする。。。
● 透明画を使って配置調整したり javascript で小細工
この左側に旧式ブラウン管サイズ(４:３型)の長方形透明画像（マジェンタの枠線）を貼り付けているので、テキスト原稿（シアンの枠線）だけを見ると左端をインデントしているように見えます。このやり方をコンテンツの配置手法に使うと、簡単に微調整できるのですが、W3C文法的には、立派にイリーガルです (^-^;
今度は左側に何も置いていません。テキスト原稿をインデントしています。このやり方はW3C文法上リーガルです。htmlでは、ブラウザから見たときは同じように見えるけど、実は記述が違うというやり方が幾通りかあります。この点が理解し難い言語の一面を助長しているんだろうと思います。
マウスがホヴァリングするとフォントカラーが変わる簡単な javascript event です
● ボーダーレスのTableをレイアウトデザインに利用する
| 縦方向(＝行)や、横方向(＝列)を連結することで変則的な レイアウトができますが、その設計たるや生半可じゃありません。 | |||||||||||||||
| World Wide Web Consortium（Ｗ３Ｃ）さんはデザイン重視のレイアウトについてはCSSに任せるよう勧告を出しているようです。右隣の赤丸画像は背景が透明です。レイヤーを駆使することでこうした画像を適宜効果的に配置できますが、レイヤー |  |
(重ね構造)概念の html 記述に対する解釈はブラウザに依存しているので、MSIEさんとNCさんでは見栄えがでんでん違ってきます。わたしのお気に入りブラウザであるOpera | |||||||||||||
|
でも然りです。製作者側の記述に対するブラウザ依存と言う観点では、 | CSS の解釈もまた同じ運命です。アプリケーション側でタグに対する解釈や反応が違うのは今に始まったことではありません。世界中に馬鹿が溢れているみたいです。最近では、 | Java Script が注目ですが、これすらブラウザ側の解釈でまったく予期せぬ動きになります。巷で大流行の | ||||||||||||
| ダイナミックHTMLは、HTMLとCSSとJava Scriptをそれぞれ効果的に使って、見た目の訴求力を際立ったものにしようというもの。身勝手なブラウザ側に依存するやり方を必死で覚えたってなぁ。ぶつぶつ....Java Scriptと呼んでいるのは、MSではJScriptを、NCではJavaScriptを指すんだそうです。ったく、笑っちゃいますよね。 | | ||||||||||||||
| このレイアウト手法はW3Cでは邪道扱いなのに、サイトのあちこちで用いられています。 わたしも自分しか利用しない（ので誰か他の人に迷惑がかかるわけでもない）ＰＣのアクティブ・デスクトップ・カスタマイズで 自作ウェブサイトリンク集 をこの手法を使いながら作っちゃいました (^^ゞ | |||||||||||||||
● クリッカブルマップを作る
'95年生まれ朝陽に映える２代目オリアナ号(左)と、'60年生れの薄暮が似合う初代オリアナ号
● hogehogeしてみる
dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. do-gen ko-gen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. n'toji dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai. tta'ck dogen kogen naran, hogen-jo shichikara oredo'n teni oenki mo doeden shichikurenai.半角文字では単語を途中でラップさせないようにブラウザ側で改行位置を任意に決めているらしいというサンプルです。
