[Web標準化]の記事一覧 | じっく～り選んだお気に入り

Web標準化へXHTMLでリフォームしてみる【その２】

一つ前の日記の続きです。先日実家に帰った時は、パソコンも無く、ネット環境もないので、2月に発売されてホヤホヤの、矢野りんさん／益子貴寛さんのスタイルシート・デザインを読んでいました。掲載デザインは素敵で、アフィリエイトの商品アップ用のデザイン向けとはちょっと違いますが、これまでほとんど使ってなかったidの使い方、定義方法の例を参考にしました。そうそう、idにつける名前もきちんと分りやすくつけた方がいいのですね。パンくずリストにも「大なり」という意味を持たせたほうがよいということも収穫でした。Web標準の教科書も評判が良いので買いましたよ。これも益子貴寛さんです。分厚いですね！パラパラ捲っただけではまだどこに何が書いてあるか分りません。これからきちんと読んでいきたい本です。行き詰ったら、世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイルプロとして恥ずかしくないスタイルシートの大原則プロとして恥ずかしくないWEBデザインの大原則などを、掴んでは投げ、投げては掴んで…じゃなくて、とっかえひっかえ？(爆)調べ物に使っています。今、見て知ったのですが、上記のWEBデザインの大原則の改訂版が今年の1月に出版されていますね！プロとして恥ずかしくないWEBデザインの大原則改訂版どういうところが改訂になったのかなあ。こういうものは新しい情報が必須ですからね。SANJIは別にプロじゃないのにね、気になります。ところで、ハックスタイルシートを作るまでしてブラウザ対策してないのです。一部のページをリフォームしてみましたが、ちゃんと見えているのか不安です。とくにIEの最新バージョン（Internet Explorer 7）でどういう風に見えているのかと…Mac関連はますます不安です。ご親切な方、動作確認していただけないでしょうか？下記のページが閲覧できるかどうか教えていただけたら喜びます。じっく～り選んで通販生活トップページティッシュケースのページSANJIが使っているブラウザはMozilla Firefoxで、IEはバージョン6で確認しています。アフィリサイト作りは、アフィリエイトのコード部分を書き換えないのが原則なのでコードを提供しているところが「XHTML」の表記方法に変わらない間は標準化に近い構造にリフォームして「HTML 4.01 Transitional」で動かすようにした方がいいのかなあと思っています。web標準 XHTML関連の本の一覧画像あり日記素敵なデザイン商品インテリア雑貨食器キッチン用品楽天トピックス全一覧へじっく～り選んで通販生活TOPへじっく～り選んだお気に入りTOPへ

Web標準化へXHTMLでリフォームしてみる【その１】

気が付くと、ここのところ商品紹介日記が滞ってしまっておりました。実家に行っている訳ではありません。ちゃんと自宅にいますよ。理由はですね、サイトのWeb標準化にはまってしまったから。きっかけになったのは、この境祐司さんの「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブックという本です。一昨年の12月に購入して、ふむふむとこれは解りやすい本だなあと読んで、リフォームしよう！と思ったままズルズルと日が経ち…一年が過ぎ…自分でタグ打ちして作っているアフィリエイトのサイトを「HTML 4.01 Transitional」から、次の上位バージョンにあたる「XHTML 1.0」にリフォームしようしようと昨年から思いつつなかなか実行に移せずにいたのですよ。このままじゃあ駄目だ！期限を決めなきゃ駄目だ！と思い立ったのがやっと！2月になってから。(^_^;)この前実家に行くまでにある程度の形にしようとタグをいじり始めました。実際にトライするまで一年以上経ってしまったというわけです。自己流にアレンジしてごちゃごちゃになったCSSを整理しないといけません。そうすると、今度は次から次へと疑問が生じるわけです。疑問：見出しタグのH1をどういう風に活かしたらよいか。メニューのリスト化の方法⇒大小のカテゴリーをタグでどう表現するか。サイトマップの作り方⇒ツリー構造のタグを使ったほうがよいか。テーブル構造の商品列をdivを多用せずにリスト化⇒liタグで作ったらよいか、dlタグ、dtタグ、ddタグで、定義型のリストにしたようがよいか。終了タグのない要素も「 />」をつける⇒アフィリエイトのコードに書き足してもよいか？例えば<img src="http://～～">に「 />」を足して<img src="http://～～" />としてもよいのか？XHTML では、要素名と属性名はすべて小文字⇒これも、例えばIMGやWidthとかIFRAMEといった大文字が多用されているところのアフィリコードはどうしたらよいのか。疑問１についてこれまだ、h1は各ページごとに短い紹介文をスタイルシートで文字の大きさを小さくしてトップに載せていました。スタイルシートの勉強し始めた時に、テンプレートをお借りしたところの構造をそのまま引き継いで使っていたのです。最近はh1にはロゴ画像を載せて、CSSで見出し文字を非表示にせず、音声読み上げソフトが読み上げられるように、タイトル文字はブラウザの表示領域外へ移動させる方法が一般化しているようです。つまり、left: -999px;top: -999px;position: absolute;う～む、そんなことしているのか…じゃあ、トップページ以外でもそうするの？というような具合で。あれこれ調べて出した結論：h1はトップページはタイトルロゴに使い、次ページからは各ページのカテゴリーの見出しにする。これだけ読むと当たり前のようなことを書いているようでしょう？でも、結論出すのになんやかやと悩んでおりました。そう、それにまだ、タイトル文字はブラウザの表示領域外に飛ばすというのを躊躇しています。（次の日記へ続きます≫）web標準 XHTML関連の本の一覧画像あり日記素敵なデザイン商品インテリア雑貨食器キッチン用品楽天トピックス全一覧へじっく～り選んで通販生活TOPへじっく～り選んだお気に入りTOPへ