back to the top

2nd editions here!

キューピーTV3分間クッキング® みたいなお手軽モード仕様でホームページをデザインしたいと、個人的にすぐ使えそうなTipsをメモしました。それがSS.ORIANA lighthouse をアップした2003年頃のお話し。当時は、CSSが持っていた本来の機能を充分理解していなくて「テキスト主体でもここまで表現できる」という乱暴な考え方の下このエディションを発行したのです。


Contents


Index


タイトルをタイトルっぽく ブラウザによって見え方が変わるのが欠点
やっぱスタイルシート 見た目にはわからないんだけどcssはやっぱ必須
この Tips↓は成人R指定番組ですクリックする前に周辺の環境にお気をつけあそばせ
HTMLの醍醐味はリンクにあり ねっとサーフィンとはよく言ったもんだ
検索エンジンに直接行こう Google®さんのサイトに行くとソースがあります
ひと文字だけ強調する すっごい簡単なのに意外とアーティスティック
見出しはそれらしく ゑぶぃかるサイトでは微調整こそが命
グラフィックイメージを片側に寄せる 見た目重視のゑぶぃかるサイト用必須テク
或いは文章を回り込ます やっぱ全体のレイアウトバランスが大事っしょ
リンク色指定とホバリングタグ hoveringタグはリピートできないところが惜しいよネ
インラインスタイルで変化を これはちょっと邪道臭いんだけど
透明画像を準備します これは邪道臭い、どころか邪道です!(キッパリ!!)
簡単なjavaスクリプトを使う javaスクリプトはブラウザ依存するので要注意
枠線無しの表組み W3Cでは邪道、このIndexレイアウトにも使っています
クリッカブルマップで遊ぶ これってスゴイよね、とっても重宝するお奨めテク
署名を個性的に演出 ワザと文法を間違うという反則技が予期せぬ効果
ページ内ジャンプの設定 これぞ身近にあった便利テク。HTMLえらい!!
ここで言う『ゑぶぃかる』は造語。なんとなくわかった気になっておきましょうね

● Googleでヒット率をあげる

3rd deck of Oriana

Google で検索してん SS ORIANA が引っかからんとか、あんましと思わん? (/o\)   リンクを増やすのが良いみたいけど、他人のサイトソースには手が出せへんし、フリーのレンタルサーバーみたいなヤツをあちこちに増やして細工するしかなさそう。まっ、その前に「工事中」をなくさなあかんみたいけど。


with sail boat

その後、google でヒットさせるための Key Word がわかったにぃ。oriana、beppu、ymd で絞り込むとかかるごたる。半角英数字のまま、ちゅうのが味噌やねんけど (^-^)v 問題はこの key word を SS Oriana lighthouse のサイト名から連想してもらわなあかんちゅうこと。それも半角英数字を使用して検索かけるとバッチシ上位表示されるけど、2バイトで「オリアナ」とか使うとやばい!

Google は見直しが頻繁で、ヒットする時期があったり、なかったり。 で、今度はナント Yahoo! search でもヒットし始めた。Key word は oriana ymd 。同じ Key word で検索して、ヒットする検索エンジンサイトと当たりもかすりもせん検索エンジンサイトに二分さるるごたん。MSN サーチでヒットしたのには驚いた。要は、Google エンジングループか、それ以外のエンジンか、で違うみたいな気がする。。。

back to Contents Index

● 透明画を使って配置調整したり javascript で小細工

spacer

この左側に旧式ブラウン管サイズ(4:3型)の長方形透明画像(マジェンタの枠線)を貼り付けているので、テキスト原稿(シアンの枠線)だけを見ると左端をインデントしているように見えます。このやり方をコンテンツの配置手法に使うと、簡単に微調整できるのですが、W3C文法的には、立派にイリーガルです (^-^;

今度は左側に何も置いていません。テキスト原稿をインデントしています。このやり方はW3C文法上リーガルです。htmlでは、ブラウザから見たときは同じように見えるけど、実は記述が違うというやり方が幾通りかあります。この点が理解し難い言語の一面を助長しているんだろうと思います。


マウスがホヴァリングするとフォントカラーが変わる簡単な javascript event です


サブウィンドウをポップアップする java script のテストです
button

back to Contents Index

● ボーダーレスのTableをレイアウトデザインに利用する

縦方向(=行)や、横方向(=列)を連結することで変則的な
レイアウトができますが、その設計たるや生半可じゃありません。
World Wide Web Consortium(W3C)さんはデザイン重視のレイアウトについてはCSSに任せるよう勧告を出しているようです。右隣の赤丸画像は背景が透明です。レイヤーを駆使することでこうした画像を適宜効果的に配置できますが、レイヤー sun (重ね構造)概念の html 記述に対する解釈はブラウザに依存しているので、MSIEさんとNCさんでは見栄えがでんでん違ってきます。わたしのお気に入りブラウザであるOpera
sun でも然りです。製作者側の記述に対するブラウザ依存と言う観点では、 CSS の解釈もまた同じ運命です。アプリケーション側でタグに対する解釈や反応が違うのは今に始まったことではありません。世界中に馬鹿が溢れているみたいです。最近では、 Java Script が注目ですが、これすらブラウザ側の解釈でまったく予期せぬ動きになります。巷で大流行の
ダイナミックHTMLは、HTMLとCSSとJava Scriptをそれぞれ効果的に使って、見た目の訴求力を際立ったものにしようというもの。身勝手なブラウザ側に依存するやり方を必死で覚えたってなぁ。ぶつぶつ....Java Scriptと呼んでいるのは、MSではJScriptを、NCではJavaScriptを指すんだそうです。ったく、笑っちゃいますよね。 sun
このレイアウト手法はW3Cでは邪道扱いなのに、サイトのあちこちで用いられています。
わたしも自分しか利用しない(ので誰か他の人に迷惑がかかるわけでもない)PCのアクティブ・デスクトップ・カスタマイズで 自作ウェブサイトリンク集 をこの手法を使いながら作っちゃいました (^^ゞ

back to Contents Index

● クリッカブルマップを作る

new oriana in the dawn old oriana in the sunset

'95年生まれ朝陽に映える2代目オリアナ号(左)と、'60年生れの薄暮が似合う初代オリアナ号

back to Contents Index

● 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.
半角文字では単語を途中でラップさせないようにブラウザ側で改行位置を任意に決めているらしいというサンプルです。

もどる


SS ORIANA Lighthouse のトップページへ戻ります