pyridoxin's Weblog

webサイト批評、パナレーサー編

今回批評の対象となるのはパナレーサー(Panaracer)、自転車タイヤをつくっている会社です

注意、商品についての批評は一切しません。あくまでもサイトの批評です。

DOCTYPE 宣言をしていない。これではいったいこのHTMLがどの文法に基づいているかわかりません。その結果文章構造が適当になっています。いまからやるならXHTML 1.0 Strictがお勧めです。

画像には適切なalt属性をつけていない。画像が表示されない場合はどうするのでしょうか?また検索にも引っかかりにくくなりますがそれはわざとですか

tableレイアウトを止めましょう。tableは表です。レイアウトの道具ではありません。

むやみに画像を使うのは止めましょう。特にパナレーサー　おすすめ品情報は最悪です。ほとんどCSSで済ませられます。もし特殊な事情があるとサイト制作会社がいうのならその会社とのお付き合いは止めましょう。この表示はどう考えても検索に引っかかりません。そうしたいのですか?

webに載せる情報はなるべくHTML文書にしましょう。ＧＩＦで文字情報を載せるのは狂気のさたです。検索に引っかかりません。面倒くさい?そういう社員は首にするべきです。

文字コードはUnicodeにしましょう。あなたのサイトを訪れるのは日本人だけとはかぎりません。Shift_JISをサポートしていなかったらどうなるでしょうか?

javascriptは外部に記述しましょう。メンテナンス性が低下します。

テーマ:自転車 - ジャンル:車・バイク

1. 2007/03/04(日) 15:27:54
2. xhtml
3. webサイト批評、パナレーサー編のトラックバック：0
4. webサイト批評、パナレーサー編のコメント：0

フォント

CSSでフォントを指定してwebサイトを作り自分の環境で確認する。満足して翌日寝るとしよう。翌日確認のために違うPCで作ったサイトを見る。そこで愕然とする、全然違うと

ブラウザ間での相違は比較的気づきやすいのだがLinux、Windows間の違いはなかなか気づかない。もともとデフォルトのフォントがまったく違うのだから当たり前なんだが。そこで意欲のある製作者はフォントについて調べフリーフォントに行き着く。フォントのインストールについてもアナウンスしようかと思いはじめるが大半のユーザにとって？の連続だから諦める。そこでどうしてもデザイン上変更できない文字フォントは画像にしてしまえと悟っていく

と意味もなく文字に画像を使うやつを想像してみた。いわゆる「webデザイナー」さんはどうなのだろうか?

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/02/18(日) 01:14:53
2. xhtml
3. フォントのトラックバック：0
4. フォントのコメント：3

リキッドレイアウトで2カラム

各ブラウザを考慮したCSSレイアウトはCSSによる段組（マルチカラム）レイアウト講座が詳しい。ここではリキッドレイアウトで2カラムを実現する方法について話します

まずリキッドレイアウトというのはこのブログのように幅が可変(具体的にはwidthが%指定の)なレイアウトであることだ。対になる固定レイアウトに比べてさまざまな画面で空白なしで情報を詰め込むことができる反面レイアウトデザインが非常に困難

本題に入っていくがレイアウトの前にHTML(XHTML)がvalidであることを確認してほしい。Markup Validation Service。当たり前の話だが正しく書かれていないソースにいくら適切なレイアウトを心掛けたところでそれは無駄な努力だからだ

すぐに思いつくのはfloatであるが2カラムを実現しようとして両方にfloat:left;を指定した場合css2.1の仕様では次のboxが下に回り込むことを許しているので注意して欲しい。つまり上下にレタリングされることも仕様として正解だし実際そういうブラウザも存在する。だから左の要素にはfloat:left;、右の要素にはfloat:right;を指定した方がよい。widthは合計で100％にすると少しはみ出るので99％以下にしよう

Yの部屋はそのようにレタリングされているがY日記、イラストは違う。｢おいこら｣といわれるかもしれませんがposition: absoluteでleft:73%;とか左側の位置を指定するのも違う方法として存在している。方法は一つではない。実際に様々なブラウザで試すことが重要だ。もちろん CSS 2.1 Specificationは理解して当然だが･･･

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/01/30(火) 01:26:27
2. xhtml
3. リキッドレイアウトで2カラムのトラックバック：0
4. リキッドレイアウトで2カラムのコメント：0

角を丸くするNifty Corners Cube

ボックスの角を丸くする方法には大きく分けて三つある。一つは画像をtopに貼る。もう一つは空のタグを入れ子にしてcssで実現する方法、そしてjavascriptで実現する方法だ

画像を貼る方法は閲覧者が文字を大きくしたりするとくずれる危険がある。cssで実現する方法はソースコードが汚くなる。javascriptを使う方法は相手がjavascriptを無効にした環境では意味をなさない。とまあどれにも欠点はある

文法至上主義者の立場からすればまずcssでやる方法は論外だし、画像を貼る方法も結果的にコードを汚すので避けたい、となればjavascriptでやる方法しかない。なにかいいものがないか?あるのであるNifty Corners Cubeというものが

一応やっつけで私訳Nifty Corners Cubeをつくった。訳文にあやまりがある場合はコメントに書いてください。

これであなたのブログもWeb2.0的になる！(馬鹿らしい、ただ角丸にしただけだが)

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/01/26(金) 03:30:43
2. xhtml
3. 角を丸くするNifty Corners Cubeのトラックバック：0
4. 角を丸くするNifty Corners Cubeのコメント：2

都道府県ウェブサイト評価(中国、四国編)

点数はAnother HTML-lint gateway

1. 山口98点HTML4.01 Transitional　Server: Apache/1.3.37 (Unix)
2. 鳥取96点HTML4.01 Transitional Server: Apache
3. 島根94点　XHTML1.0 Transitional　Server: Apache
4. 広島93点HTML4.01 Transitional　Server: Apache
5. 岡山16点HTML4.01 Transitional　Server: Sun-ONE-Web-Server/6.1
6. 香川県-2点　XHTML1.0 Transitional 　Server: Apache/2.0.59 (Unix) PHP/5.2.0
7. 愛媛県-24点　Server: Apache/2.0.55 (Unix) PHP/4.4.2 mod_ssl/2.0.55 OpenSSL/0.9.7d mod_jk/1.2.19
8. 徳島県-74点　Server: Lotus-Domino/0
9. 高知県-316点　XHTML1.0 Transitional　Server: Apache　EUC-JP

中国勢優秀すぎ、岡山以外はみんな文句なし。点数では3位の島根だがXHTML1.0 Transitionalと宣言しての3位なので実質的には一番。

対照的に四国はweb後進地方だということがよく分かりました。高知に至ってはXHTML1.0 Transitionalと宣言していながら文法がHTML4.01っぽい謎の仕様に。XHTMLかっこいいよねぐらいで導入してアボーンしたんでしょうか?

Apacheでサーバ立てが今のところスタンダードのようです。他のサーバを立ててるところは文法にかんして間違いなくアウトというのが笑える

高知のみがEUC-JPで他はShift JIS。Shift JIS以外はこれがはじめて。

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/01/21(日) 17:19:13
2. xhtml
3. 都道府県ウェブサイト評価(中国、四国編)のトラックバック：0
4. 都道府県ウェブサイト評価(中国、四国編)のコメント：0

都道府県ウェブサイト評価(九州、沖縄編)

点数はAnother HTML-lint gateway

1. 宮崎、99点、XHTML1.0 Transitional,Server: Apache
2. 鹿児島、87点、HTML4.01 Transitional,Server: Apache
3. 長崎、82点、XHTML1.0 Strict
4. 佐賀、26点、HTML4.01 Strict、Server: Sun-ONE-Application-Server/7.0.0_03
5. 大分、5点、Server: Apache
6. 福岡、-14点、Server: Lotus-Domino/0
7. 熊本、-31点、HTML4.0 Transitional、Server: Microsoft-IIS/6.0
8. 沖縄、-80点、Server: Apache　

上位3県がまとも、宮崎はRSSも配信しているのには驚いた。中の人はわかってる人です。

沖縄はtableでレイアウト、固定幅なので大きな画面だと左により過ぎ。

福岡のserverがLotusなのが驚き。なんでLotusなの?

みんなShift_JIS、UTF-8はいない

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/01/20(土) 02:36:34
2. xhtml
3. 都道府県ウェブサイト評価(九州、沖縄編)のトラックバック：0
4. 都道府県ウェブサイト評価(九州、沖縄編)のコメント：2

FC2でSVGをIEで見れるのか?

SVGというのはXMLでかかれたベクターグラフィックの一つです。点で情報を保持するのがビットマップこれが一般的。一方で｢線や図形｣などの情報を保持するのがベクターグラフィック。

今回はFC2ブログでSVGは表現できるのかという話題にふれます

SVGファイルで書かれたCSSボックスをあなたは見れるでしょうか?FC2WEBに置いたファイルを参照させています。FC2WEBは拡張子.svgを許可していません。そこで許可されている拡張子.xmlで代用します。IE以外は問題ありません。

もちろんこれはFC2WEBを使っているのでまだ目標のFC2ブログのみでには達していない

ところでFC2ブログでアップロードできる拡張子には.svgも.xmlも含まれていません(正月終わったらメールで要望をだしてみます)代わりに.rdfをつかいます。rdfもxml、svgもxmlなら大丈夫だろという安易な発想です。http://blog-imgs-18.fc2.com/p/y/r/pyridoxin/06123002.utf8.rdfをご覧ください。もちろんIEではみれません。

IEの場合はソースが全滅なのでiframeでやっても無理です。objectタグでtype="image/svg+xml"を書くとSVG Viewerをダウンロードするかというメッセージが出できてみれるのかと思いきや見れないという｢素敵な結果｣が待ってます。実験結果はhttp://pyridoxin.web.fc2.com/tips/06123002.utf8.html を参照。XHTML1.1+MathML2.0+SVG1.1という素敵な仕様がありますがこれはIE氏ね!と叫んで使う類のものです。XHTML1.1+MathML2.0はapplication/xhtml+xmlで平たく言うと拡張子.xhtmlでMathplayerをインストールしたIEなら見ることができますのでもしかしたらできるかも(まだ試していない)

SVGファイル自体はIllustratorで作るのが一般的です。オープンソースではInkscape

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2006/12/30(土) 10:48:59
2. xhtml
3. FC2でSVGをIEで見れるのか?のトラックバック：0
4. FC2でSVGをIEで見れるのか?のコメント：0

エディタを作る

いつもテキストエディタでタグ打ちしてFC2のエディタに貼りつけるようにしているがテキスト文章を打つ簡単なエディタ自体はhtmlとjavascriptで自作可能

本当にできるの?と半信半疑の人もいると思うのでtextareaを使ってというエディタを作って見た。マウスの位置から挿入できたり画像ファイルを読み込んだり外部に出力する機能はないのでこれをベースにして改造していきます。ライセンスはGPL(クレジットを残し、第三者にも改変・再配布を認めるという条件で改変・再配布可)。いわゆるフリーってやつです

テーマ:ブログパーツ - ジャンル:ブログ

1. 2006/12/29(金) 21:04:04
2. xhtml
3. エディタを作るのトラックバック：0
4. エディタを作るのコメント：0

Google Maps APIをvalidで

objectタグならIEでは表示できず。iframeは使えず…ならframeの記述をjavascriptで外部ファイルにまかせたら?

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2006/12/27(水) 06:19:32
2. xhtml
3. Google Maps APIをvalidでのトラックバック：0
4. Google Maps APIをvalidでのコメント：2

W3C翻訳SERCHと文章一覧を自分のサイトに載せて見た

いちいちW3Cにいくのも面倒と感じたのでSERCH(IEでは閲覧不可、firefoxかOpera推奨)というページを作成。

あとFC2のデフォルトのエディターが酷いのでJavascriptで簡単なエディターを作ってウェブサイトにでものっけてみるか･･･

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2006/12/26(火) 21:37:23
2. xhtml
3. W3C翻訳SERCHと文章一覧を自分のサイトに載せて見たのトラックバック：0
4. W3C翻訳SERCHと文章一覧を自分のサイトに載せて見たのコメント：0