スタイルシート（CSS）基礎講座
ページをさらにデザインしていこう
テーブルを整えよう
テーブル(表)もスタイルシートでデザインできます。まずは現在の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ページを別々に作成し、それをひとつの画面に表示させるという方法です。
この方法も様々なサイトで使われていますが、検索エンジン対策にとってもあまり望ましくありません。ではスタイルシートではどのようにすればよいのでしょう？
