ページをさらにデザインしていこう

テーブルを整えよう

テーブル(表)もスタイルシートでデザインできます。まずは現在のHTMLにはここがテーブルだよ、とわかるように「table border=”1″」と書かれている部分がありますが、ここの「border=”1″」はとってしまいましょう。

それではスタイルシートに以下のように追加、記述してください。

table {
padding: 5px;  /*セル内余白*/
width: 80%;  /*テーブルの幅*/
border: 0px;  /*境界線の幅*/
margin-left: 35px;  /*テーブル左マージン*/
}

箇条書き(リスト)を整えよう

ついでにその下の箇条書き(リスト)の部分も指定してしまいましょう。以下のように書き足してください。

ul {
font-weight: bold;  /*太字の指定*/
color: #666699;  /*カラーの指定*/
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}

いかがでしょうか?うまく表示されましたか?このようになるはずです。ならない方はどこかに記述間違いがあります。

よく確認してみてください。

さて次は、下のほうに行ってしまっているメニューを何とかしたいですね。よくあるホームページのようにメニューが右側や左側にあると(いわゆる段組です)良いですよね。どうしたらよいでしょうか?

スタイルシートでレイアウトしていない多くのサイトがこのような場合テーブルタグによるレイアウト、つまりページ全体を大きなテーブルでくくってしまい、そのテーブルを2列に分けてしまうのです。

まぁそれが手っ取り早いのかもしれませんが、文法上テーブルはあくまでも表を作るための記述です。正しいHTMLの記述とはいえないのかもしれません。まぁ私もたまに使っちゃったりしますけど…

もうひとつがフレームによるページの分割。簡単に説明するとメニュー部分の書かれているHTMLページと内容部分の書かれているHTMLページを別々に作成し、それをひとつの画面に表示させるという方法です。
この方法も様々なサイトで使われていますが、検索エンジン対策にとってもあまり望ましくありません。ではスタイルシートではどのようにすればよいのでしょう?

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録