MB-Support

パソコン初心者のサポートページ

HTMLのテーブルを撤去してみました


MB-Support のトップページだけ、テーブルを使用していた部分をスタイルシートで表現してみました。確実に軽くなったと思うのですが、アクセスカウンタの回りは落ちてます。。。お友達から送っていただいた画像で、 ページを全て読み込む前にスクロールバーを移動すると以下の様になります。こうなったとしても、 ページが読み込み終われば正常に表示されるのですが、テーブルを排除したために発生した現象です。




そもそも、今さらなぜこんな事をするのかと言うと、BLOG のページを作ってから影響を受けました。 投稿がある度に書き換えられる BLOG のトップページは、スタイルシートにより無数のデザインに変化させる事ができます。 では、自分の作ったページでやってみたら面白いかな?と思ったのがきっかけです。最初は既存のテーブルで構成されていたページを、 普通の文章に戻します。この時、フォントのサイズや色も指定しないで、標準の黒で作成します。

つまり、構成を考えていない殴り書きのページですから、作成するのは簡単です。次に、index.html に読み込ますスタイルシートを作成します。 今回は、既存のページをどこまでスタイルシートで表現できるかを試しました。 結果は左上の画像(今の MB-Support のトップページがそうです)ですが、スタイルシートだけで全て可能な事が分かりました。 この1つのスタイルシートを複数のページで取り込めば非常に楽だと思います。

次にデザインの変更を加える時、各ページソースを編集せずに、スタイルシートファイルを1つ編集すれば良いのです。 ちなみに今回はトップページのみで、さらにドロップダウンメニューの所だけテーブルを使用しています。 ここだけは面倒臭くてイジル気になりませんでした・・・





Copyright © 2019 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人のご挨拶プライバシーポリシー著作権/免責事項