2009年01月の記事
全4件 (4件中 1-4件目)
1
-
テーブルタグから解放されよう その３
第３回目はなぜテーブルタグから解放されなければならないかです。１．テーブルタグを使わなくても同じことができるまず、テーブルタグを使った例と使わなかった例を示してみます。中にHTMLソースを書いておきます。背景画像は楽天生活情報館さんからお借りしています。テーブルタグを使用<table cellspacing="60" style="background:url(http://image.space.rakuten.co.jp/lg01/77/0000825077/46/img1f21a128zik0zj.jpeg); width:100%;"><tr><td style="height:100px; background:#FFF; vertical-align:top;">テーブルタグを使用</td></tr></table>テーブルタグを未使用<div style="background:url(http://image.space.rakuten.co.jp/lg01/77/0000825077/46/img1f21a128zik0zj.jpeg); padding:60px;"><div style="height:100px; background:#FFF;">テーブルタグを未使用</div></div>これによってあえてテーブルタグを選択する意味がないことが証明できました。２．HTML構造には差がある構造を説明するとテーブルを使った時と使わない時では違いがあります。＜テーブルタグを使った構造＞<table><tr><td>本文＜テーブルタグを使わない構造＞<div><div>本文テーブルタグは書くだけで3階層、テーブルタグと同じ挙動を他の方法で実現すると2階層で済みます。テーブルタグで書かれている部分は階層が深い分、ブラウザの描画速度を低下させます。３．改めてHTMLの仕様を確認するHTMLの規格をとりまとめているW3C（The World Wide Web Consortium）という団体から以下のような発表がされています。ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0http://www.zspc.com/documents/wcag10/#gl-structure-presentation中にはこのように書かれています。文書は、適切な構造を表す要素でタグ付けし、見栄えなどの表示方法を制御するためには、表示を制御するための要素や属性を使用せずに、スタイルシートを利用する。タグ付けを正しく行わない（仕様に従わない）ことは、アクセシビリティの妨げになります。表示上の効果として間違ったタグ付けを行うこと（レイアウトのためにテーブルを利用することや、フォントサイズを変えるために見出しを利用すること）は、特別なソフトウェアを利用しているユーザーにとって、ページの構成を理解することやサイト内を行き来することを難しくしています。さらに、本来構造を示すべき部分に対して、構造を表すタグ付けではなく表示を制御するためのタグ付けをすること（たとえば、HTMLのPRE要素を使って表のように見せることなど）は、様々な装置でページの内容をわかりやすく表現することを難しくします。要は利用してもいいけど正しく使おうということです。楽天ブログで横行しているテーブルタグの利用は見直していく必要があります。トップページへ人気スカル／ドクロTシャツ販売Nameless Element Tシャツ、パーカー販売ブランドnamelesselement.jp私の美容・健康・ダイエット・コスメヘアケアからデンタルケアまで、商品レビューplaza.rakuten.co.jp/sawayakasama/季節の花365日季節でしらべる花のまとめ。春夏秋冬365日。abyabyabyaby4.blog67.fc2.comアーティストの使用機材を紹介有名アーティスト・ミュージシャン使用機材一覧dokucha00.blog79.fc2.com
2009/01/10
コメント(3)
-
テーブルタグから解放されよう その２
第二回目は前回の続きとなります。第一回目に何も変わらなかったページを真の自由ページに変えます。今回書き加える部分を赤字で書いていきます。</td></tr></table><div style="position:absolute; top:0; left:0; padding:0px; width:100%; height:100%; font-size:100%; background:#FFFFFF;"><strong style="font-size:300%;">ここは自由に編集できる！</strong></div><table border="0" cellpadding="0" cellspacing="0"><tr><td style="display:none;">今回も具体的に実践してみたページを用意しました。http://plaza.rakuten.co.jp/abyaby/005003どうでしょうか？フリーページに上部にあった広告などがすべて消えていると思います。すべてはここから始まります。すでにフリーページをお持ちの方で不要なメニューや広告を消したい方は実践してみてはどうでしょうか？※注意・理解が浅い人は新しいフリーページなどを用意して自分で実験をされた方がよいです。・理解が深い人でも日記ページにやるときは注意してください。・「うまくいきません」という方は何がうまくいかないのか考えてみましょう。何がうまくいかないのか説明できる状態までになれば自力で解決できますし、説明できなければ僕も答えようがありません。トップページへ人気スカル／ドクロTシャツ販売Nameless Element Tシャツ、パーカー販売ブランドnamelesselement.jp私の美容・健康・ダイエット・コスメヘアケアからデンタルケアまで、商品レビューplaza.rakuten.co.jp/sawayakasama/季節の花365日季節でしらべる花のまとめ。春夏秋冬365日。abyabyabyaby4.blog67.fc2.comアーティストの使用機材を紹介有名アーティスト・ミュージシャン使用機材一覧dokucha00.blog79.fc2.com
2009/01/04
コメント(1)
-
テーブルタグから解放されよう
第一回目のデザインエクスペリエンス記事を投稿します。第一回目は楽天ブログの束縛から解放される方法です。束縛されてないよ？って思う人もいるかもしれませんので説明します。図で説明したとおり、楽天ブログは760pxのテーブルで囲われています。そのため記事を書いても幅を強制されてしまうし、そもそも記事の幅を固定するためだけにテーブルタグを利用してはいけません。そこで本ブログでは、このテーブルタグから解放されることによってこれから行うすべてのデザイン調整を行っていきます。具体的に絵で説明すると↓HTML的に何をするかというと</td></tr></table>↑テーブルタグを終わらせている<strong style="font-size:300%;">ここは自由に編集できる！</strong>↓テーブルタグを再開している<table border="0" cellpadding="0" cellspacing="0"><tr><td style="display:none;">絵でも伝わらないかもしれないので具体的に実践してみたページを用意しました。http://plaza.rakuten.co.jp/abyaby/005002ちょっと！何も変わらないただのフリーページじゃない？と思った人もいると思いますが、ちゃんとテーブルは終わらせてあります。ではなんで自由に編集したいフィールドが広がってこないのでしょうか？それは次回に解説します！まずはテーブルタグから解放されましょう！トップページへ人気スカル／ドクロTシャツ販売Nameless Element Tシャツ、パーカー販売ブランドnamelesselement.jp私の美容・健康・ダイエット・コスメヘアケアからデンタルケアまで、商品レビューplaza.rakuten.co.jp/sawayakasama/季節の花365日季節でしらべる花のまとめ。春夏秋冬365日。abyabyabyaby4.blog67.fc2.comアーティストの使用機材を紹介有名アーティスト・ミュージシャン使用機材一覧dokucha00.blog79.fc2.com
2009/01/03
コメント(0)
-
あけましておめでとうございます。
あけましておめでとうございます。新年早々、ネタ的なフリーページを作成してしましました。味噌を売って味噌汁代を稼ぐhttp://plaza.rakuten.co.jp/abyaby/005001まぁ見るだけならただなんで見てくださいよ。フリーページで商品紹介している方は参考になると思いますよ。ぼくは売上より面白さを優先してますけど。トップページへ人気スカル／ドクロTシャツ販売Nameless Element Tシャツ、パーカー販売ブランドnamelesselement.jp私の美容・健康・ダイエット・コスメヘアケアからデンタルケアまで、商品レビューplaza.rakuten.co.jp/sawayakasama/季節の花365日季節でしらべる花のまとめ。春夏秋冬365日。abyabyabyaby4.blog67.fc2.comアーティストの使用機材を紹介有名アーティスト・ミュージシャン使用機材一覧dokucha00.blog79.fc2.com
2009/01/01
コメント(0)
全4件 (4件中 1-4件目)
1
-
-
- 楽天市場
- 訳あり 【12袋】ミラーズ マイフェ…
- (2026-05-25 16:08:29)
-
-
-
- お買い物マラソンでほしい！買った！…
- 1,080円ポッキリ！アマノフーズ お…
- (2026-05-25 14:31:22)
-
-
-
- 避難所
- オトナの秘密基地 「Kakureya2」（ハ…
- (2026-04-20 12:54:05)
-
