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

CSS(スタイルシート)についての基礎的な話はスタイルシートの基本やとほほのスタイルシート入門(基礎知識)が参考になります。

さて、上記のサイトを読みましたか？ああそうですか、読みましたか。で、理解できましたか？最初はわかったようなわからないような感じですよね。

初心者が読んで、セレクタ、プロパティだのclassとかidとか言われても、いまいちピンとこないと思います。
また、文字の色を変えるなど、部分的な解説を読んでも、ページ全体をどう装飾するかのイメージはつかみにくいのではないでしょうか。
管理人がCSS(スタイルシート)の勉強を始めたときはそうでした。

CSS(スタイルシート)の説明は実例を見せるのがわかりやすいと思いますので、CSS(スタイルシート)を使ってページ全体を装飾する過程を紹介することで説明をしたいと思います。

1. まずは見た目を考えずに、HTMLで論理構造だけを書く。
2. それをCSS(スタイルシート)で装飾する。

そういうホームページ作成の流れをつかんでいただけたらと思います。

サンプルテキスト

CSS(スタイルシート)で装飾といっても、まずはコンテンツがないとどうしようもないので、サンプルの文章を作りました。 → サンプルテキスト1(txtファイル、文字コードShift_JIS)
(文章はWikipediaのHyperText Markup Language、Cascading Style Sheetsからお借りしました。)

サンプルテキスト1に hタグ(見出し)、 pタグ(段落)、 ulタグ(順序のないリスト) でマークアップをしてみたものがこちら。 → サンプルテキスト2(txtファイル、文字コードShift_JIS)
(dl、dt、ddタグを使うべきとか細かいツッコミは無しでお願いします。あくまでサンプルなんで。)

サンプルページ

サンプルテキスト2をホームページの雛型の<body>～</body>に入れて、<head>～</head>部分にいろいろ書き加えたものがこちら。 → サンプルページ1(htmlファイル、文字コードUTF-8N)

このサンプルページにCSS(スタイルシート)使って、見た目をいじっていきます。

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

1. CSS(スタイルシート)入門講座1
2. CSS(スタイルシート)入門講座2
3. CSS(スタイルシート)入門講座3
4. CSS(スタイルシート)入門講座4
5. CSS(スタイルシート)入門講座5
6. CSS(スタイルシート)の外部化

• CSS(スタイルシート)
• ｜Trackback()
• ｜Comment(0)