Cox Café

Opera 9.5β2が公開されたというニュースを見たので、久しぶりにOperaをインストールしてみました。

普段全く使っていないので何がどう違うのかはよくわからないのですが、うちのブログを何気なく見て驚きました。CSSのドロップシャドウに対応していたのです。

上の画像は、各Webブラウザでうちのブログのトップページの一部を表示させたものです。

CSSのドロップシャドウをタイトル部分に設定しているのですが、これまで対応していたのはSafariだけでした。ところが、画像の通り、Opera 9.5β2も対応しているのがわかります。

個人的にCSSのドロップシャドウは好きなので、Firefoxも対応してくれないものかと思ってしまいました（CSS2.1では外されたけど、CSS3では復活予定？）。

CSSをオフにしてWeb標準について考えよう、という趣旨のCSS Naked Dayが4月9日にあります。

Web標準に準拠したWebサイトならば、仮にCSSをオフにしても利用するのに大きな支障はないので、あえてCSSを切ることでWeb標準への意識を高めていこうという狙いがあるようです。

このブログのトップページをCSS無しで見ると、上の画像のようになります。

ここのWordPress用のテンプレートはWeb標準に準拠するように作られているため、利用するのに大きな支障は確かに生じません。しかし、だからと言ってCSSを切ることがWeb標準への意識を高めるというのはちょっと違う気がします。

多少Webサイトを作る知識を持っている人ならば、プロアマ問わずどういう意図があるのかを言われればわかります。しかしWebサイトを作る知識がない大多数の人から見れば、単に「内容はともかく、そっけないサイトだな」という印象を与えるだけで終わってしまうでしょう。

主な閲覧者がWebに関わっている人というようなWebサイトならば意味があることかも知れませんが･･･。

そんなわけで、私はこの企画には賛同出来ないので参加はしません。ただ、賛同出来る人も当然いるでしょうから、そういう人は参加してみてはどうでしょう。今のところ、日本をふくめて全世界で200超のWebサイトが参加しているようです。

Web Designingという雑誌で紹介されていましたが、面白いWebサイトがありました。

e-Toile Graphicというサイトで、何と5024x3791pxという巨大な背景画像の上に各ページをCSSで絶対位置指定し、リンクをクリックすると背景画像上をウィィィンと移動するという仕組み。

確かに面白くはありますが、若干重いのも事実。自分の会社のWebサイトに導入出来るかと言えば、正直なところちょっと勇気が必要ですね。

ただ、こういうやり方もアリなんだなぁと、固定観念を打ち砕かれるような気分になりました。

リンクでは行けませんが、スクロールバーを動かして一番右下に行くと、こんな背景画像ですよーとわかる縮小画像が設置されています。まあ、Firefoxなら背景画像をいつでも表示させられるので特に必要ないかも知れませんね。

色々とHTMLやCSSをチェックしてくれるWebサイトはありますが、XHTML-CSS Validatorは使い勝手が良さそうです。

チェックしたいURLを入力して”CHECK IT”をクリックすると、HTMLとCSSを同時にチェックしてくれるのです。そして、ダメな部分はどこだというのも明記してくれるので、修正の参考には丁度いいかも。

うちもチェックしたところ、上図のような感じになりました。HTMLは問題なしだったのですが、CSSがいささか汚いようです。まあ、よろしくないHACKなども使っているので無理もないですが･･･

ここの便利なところは、複数のCSSファイルがあったとしてもご覧の通り一発で調べてくれるところでしょうか。うちが使っているテーマは多くのCSSファイルを使用しているので、こういうところはありがたいですね。

HTML同様、なるべくCSSもValidに近づけたいと思います。

realab.org – 影響を受けた方を紹介してみる (前編)というのがあったので、私もふと思い出してみました。

私がWebサイトを初めて作ったのは1999年か2000年。一応CSSは存在したけど、あまり注目されていない時代でした。私も一応”スタイルシート”という言葉は知っていましたが、どのようなものかはよく知らなかったし、興味もありませんでした。

時代はテーブルレイアウトで、Dynamic HTMLやJava Appletなどが幅を利かせていました。個人サイトでは”波紋アプレット”などが人気で、今にして思えば何て閲覧者のことを無視したものだったかと・・・。

参照：波紋アプレット ポインタを画像に重ねてみると・・・

今のPCなら処理速度も向上してブロードバンドも普及しているのでマシですが、当時はまだまだナローバンドが主流（というかISDNが速いと謳われており、1.5MbpsのADSLサービスが東京の一部で始まったばかりの頃だった）でPCの処理速度も遅く、Java Appletなどをサイトに置かれると非常に動作が鈍重になったものなのです

それから2年か3年ほど自分の好きなようにWebサイトを作っていたのですが、デザインが好きだったあるWebサイトのソースを覗いた時、謎に直面したのです。

ソースでは

<h2 class=”abc”>タイトル</h2>

となっていたのですが、見た目は

タイトル

となっていたのです。

今見れば、いかにもCSSの定番中の定番な飾り付けなのですが、HTMLしか知らなかった私にはさっぱり理解出来ませんでした。「ソースにあるclass=”abc”とはなんだ？」と。

そこで、隅々までソースを見てみると、見慣れない一文を発見しました。

<link rel=”stylesheet” type=”text/css” href=”style.css” />

これが何らかの手がかりに違いないと、早速そのstyle.cssを覗いてみると、見たこともない世界が広がっていたのです。そして、例のabcの文字列も発見しました。これだ。

早速そのstyle.cssを全て保存し、元のHTMLも保存し、私のサーバーにアップしました。そしてabcの部分の数字を変更してみると、線の太さが変わったのです。CSSというものを私が初めて理解した瞬間でした。

それからネットでCSSに関する知識をかき集め、書籍も読みあさり、何とか時代がCSSレイアウトに変わろうという流れにあまり遅れることなく乗ることが出来ました。今でもあのWebサイトには感謝していますが、残念ながら今はなくなってしまいました。

また、CSSを調べる過程で、realab.orgでも紹介されているAlternative Design Projectにも行き着きました。ものすごく勉強になるブログで、一時期全く更新されない時期があって残念な思いを抱いていましたが、最近はリニューアルされて更新も再開されています

よくFirefoxのエクステンションであるStylishの名前は聞くのですが、今までは使ったことがありませんでした。

で、最近色んな新聞のサイトを巡回しているのですが、やはり見にくいサイトもあるわけで、重い腰を上げてやっとStylishをインストールしてみました。

そしたらまあ、何でもっと早く使わなかったのかな、と･･･。

ついでなので、うちのブログの広告を表示しないようにするためのCSSも一応載せておきます。CSSってほどでもないけど（汗

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("r-studio.info") {
.google_ads, .sponsored {
display: none !important;
}
}

良かったらコピペして使ってください。

まあ、広告を消されるよりはクリックしてくれる方が私としては美味しいわけですが、利用者が表示させないちょっとした選択肢はあってもいいと思うので。

• ユーザスタイルシートによるカスタマイズ(2) – Stylish – えむもじら
• 三軒隣の斜め向かい:Stylish

Safari 3 パブリックベータも何度かアップデートされたようで、ほんの少しはマシになってきました。

無論、まだまだ実用レベルにはほど遠いですが。

ところで、すっかり忘れていたのですが、このブログでは各エントリーのタイトルにSafari専用のCSSであるtext-shadowを使っています。文字に影をつけることが出来るものです。

上の画像を見れば、「上海では?」のタイトル部分に影が付いていることがわかると思います。

指定したCSSは次の通り。

h2.head-title {
text-shadow: #999 3px 3px 3px;
}

text-shadow: 色 横位置 縦位置 ぼかし範囲;という形。

一々画像を使わなくても簡単に綺麗な影がつけられるので、FirefoxやIEでも実装してくれるといいのですが･･･。

それにしても、Safariは文字が見やすくていいですね。私はWindows XPに無理矢理改造版のメイリオを入れて使えるようにしていますが、やっぱりちょっと見にくいのでFirefoxなどでもこういうフォントが使えればと思う次第です。

以前MovableType備忘録: サムネイルをLightbox JSで表示してみるというものを導入したので紹介を。

前者だとFirefoxユーザーで、かつ同Greasemonkey用スクリプトをインストールしてある人にのみ効果がありますが、後者は誰にでも効果があります。

また以前と同じ画像を流用しましたが、上の画像をクリックすると、どういう風に表示出来るかがわかると思います。

導入方法はリンク先を読めばわかるはずなので割愛。Flashっぽくていいと思います。

航空自衛隊のWebサイトが随分綺麗になっていました。ソースを覗いてみると、見事にtableが全廃されています。作成はHomepage Builder 8で行ったようです。

デザインにはCSSが使われており、ようやく自衛隊にも”Web標準”というものが浸透し始めたのかな、という印象。

主要装備一覧なども非常に見やすくて、戦闘機等の航空機についてもわかりやすく解説されています。

ここまでちゃんと作ってあるWebサイトは、日本の省庁や自衛隊では珍しいと思います。海上自衛隊や陸上自衛隊も見習って欲しいですね。

最近は多少マシですが、昔は”ない方がいい”というものばかりでした･･･。

日本ではあまり使っている人はいないかもしれないCSSをひとつぶち込みました。

text-justify: inter-ideograph;
text-align: justify;

テキストの”両端揃え”です。

本来は下のtext-align: justify;が正しい形なのですが、日本語の場合、残念ながら今のところFirefoxくらいでしかちゃんと両端揃えになりません。
そこでInternet Explorer用にtext-justify: inter-ideograph;も併記してあります。これはIE独自仕様なので使用は好ましくありませんが、この際やむを得ません。

しかし、Operaは9でも全然両端揃えにならないのであしからず。

まあ、これで長文も少しはすっきりした形になったと思います。

会社のWebサイトに、CSSの切り替えをワンクリックで出来るようにするJavascriptを付けようと思いました。
調べてみるとstyleswitcher.jsというのが有名らしく、早速導入。

“styleswitcher.js”をダウンロードして自分のサーバーにアップロードし、ゴニョゴニョとやるだけで完了するとてもシンプルで簡単なものです。
解説はこちらのblogが良いです。

順調に進み、「さあ、動作確認だ」というときになって、アウト。
文字サイズを変更するCSSを用意していたのですが、ボタンをクリックしても文字サイズが変わりません。

おかしい･･･。
念のためにIE6とOpera 8.5で確認したところ、正常に動作するではないですか。Firefoxだけ動きません。

私のFirefoxの設定が悪いのかと思いましたが、上記の解説blogのやつを始め、他にも同じJavascriptを導入しているWebサイトでは正常に動作します。

それから数時間かけて何とかならないものかと奮闘しましたが、所詮Javascriptの知識は皆無なので原因がわかりません。

そんなとき、Mozilla系では動かないからこっちを使えみたいなblogのコメントを発見。
これだっ、と意気込んで導入してみたところ、見事に動きました。

おっしゃー！　と喜んだのもつかの間、クッキーが生きていないらしく、別ページに移動するとCSSが元に戻ってしまって何の意味もありませんでした。
他のWebサイトではデフォルトのJavascriptなのにFirefoxでも動き、ちゃんとクッキーも生きているので別ページへ行っても問題ないというのに。

さらに、Mozilla系でも動くというJavascriptはSafariでは動きませんでしたorz

結局このJavascriptでの導入は断念し、他のものを探しました。
ハイパーリンク式が私の理想だったのですが、他に見あたらなかったのでプルダウン式のもので使い勝手が良さそうなものを。

CSS Selecting Scriptというやつが簡単に出来そうだったし、ここのアクセス解析を利用させていただいているのでここのを使うことに決めました。

気を取り直して早速ダウンロードし、ゴニョゴニョとやったら簡単に一丁上がり。
Firefox、Opera、IE、Safariで正常に動作することを確認。

結局これだけのために4時間くらい潰してしまいました。アホらし･･･。

Webのコーディングをするとき、なるべく後から自分が見ても他人が見てもわかりやすいように努力しているつもりですが、しばらく時間が経つとコーディングするときにしんどくてちょっと手抜きしてしまった部分が訳わからなくなり、後悔することがあります。

後から修正したりしやすいようにするためのCSSをせっかく覚えたのだから、コーディングするときはきちんとやりたいものです。

私がHTMLを手打ちするようになったのは、CSSを勉強し始めた2年ほど前です。
それまではホームページビルダーで好き勝手に見た目だけでバリバリのテーブルレイアウトを駆使していました。

そんな折、CSSという言葉を知り、興味本位で勉強し始め、自分のWebサイトのソースがグチャグチャなのが激しく気になるようになり、ホームページビルダーを捨て去ってSTYLE NOTEというHTMLエディタを使うようになりました。

一応ホームページビルダーの名誉のために付け加えておきますが、最近のバージョンでは比較的まともなソースを吐き出すそうです。持っていないのでわからないですが、そういう風に聞きました。
昔はひどかったんですよ･･･。

ちなみに、CSSを付け焼き刃で使っていた時、Webページの表示がFirefoxでは崩壊していると指摘してくださった人がいて、その人のせいでFirefoxというブラウザに出会い、はまってしまいました。

現在はさすがに全部をコーディングするのは面倒に思えてきたので、Dreamweaverでデザインビューとコードビューを併用しています。

HTMLやCSSを書いていると常に思うことですが、やはりCSSは奥が深いなぁ、と。
Javascriptと組み合わせる”Ajax”などを駆使出来れば言うことなしなのですが、私はJavascriptは書けないのでもどかしい日々をおくっています。
勉強しようとは思っているのですが、HTMLやCSSよりはるかにしんどそうでなかなか一歩が踏み出せていません。

このblogでは、外部リンクの前には