ホームページ作成ビギナーズガイド：CSS(スタイルシート)

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート) 目次

CSS(スタイルシート)入門講座

CSS(スタイルシート)を使ってホームページを作成する実践例です。
スタイルシートの外部化は検索エンジン対策でも重要。

CSS(スタイルシート)によるレイアウト

divタグとfloatプロパティ・positionプロパティを使った2段組・3段組レイアウトの作り方。

divとfloat

固定幅

可変幅

divとposition

CSS(スタイルシート)レイアウト:3カラム 3

CSS(スタイルシート)レイアウト:2カラム 3を応用して3段組にしたものです。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}
#header {height:100px;}
#left {position:absolute; top:100px; left:0; width:150px;}
#right {position:absolute; top:100px; right:0; width:150px;}
#center {margin-left:150px; margin-right:150px;}
#footer {height:100px;}

[CSS(スタイルシート)レイアウト:3カラム 3]の続きを読む

CSS(スタイルシート)レイアウト:2カラム 3

divタグとpositionを使った、メニュー部分は固定で、メインコンテンツ部分は可変幅の2段組レイアウトの作り方。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}

#header {height:100px;}

#left {position:absolute; top:100px; left:0; width:200px;}

#right {margin-left:200px;}

#footer {height:100px;}

[CSS(スタイルシート)レイアウト:2カラム 3]の続きを読む

｜HOME｜次のページ

ホームページ作成ビギナーズガイド

[PR]

CSS(スタイルシート) 目次

CSS(スタイルシート)入門講座

CSS(スタイルシート)によるレイアウト

divとfloat

固定幅

可変幅

divとposition

CSS(スタイルシート)レイアウト:3カラム 3

CSS(スタイルシート)のソース

CSS(スタイルシート)レイアウト:2カラム 3

CSS(スタイルシート)のソース

メニュー

カテゴリー

リンク

RSS

Appendix