ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

CSSの基本的な書き方

CSSの書き方を覚える

CSSを書くには、HTMLの時と同じようにTeraPadを使いましょう。(CSS編集モードが搭載されています)

CSSの書き方

もちろん、お気に入りのテキストエディターがあればそちらを使ってもOKです!

CSSの基本構成

CSSは基本的に、「セレクタ」「プロパティ」「値」の3つの部品で構成されます。

h1 { ←セレクタ(h1)
  color:#F00; ←プロパティ(color)と値(#F00)
}

この1つのまとまりを、スタイルと呼びます。

プロパティと値は{}で囲まれ、その間には:が入ります。
また、値の後ろには;を付ける必要があります。
※上記の場合、h1がセレクタ、colorがプロパティで#F00が値となります。

ちなみに上記のスタイルは、<h1>の色を赤色にするよう指定しています。

複数のプロパティも指定可

なお、1つのセレクタに対し、複数のプロパティを指定することも可能です。その場合は;で区切り、続けてプロパティを入力します。

[複数のプロパティを指定する場合]

h1 { ←セレクタ
  color:#F00; ←複数のプロパティ指定も可能。
  font-size:36px; ←複数のプロパティ指定も可能。
}

ちなみに上記の場合は、h1の色を赤色に指定し、なおかつ文字のサイズを36pxに指定します。

なんだかとっても複雑に感じますが、じっくり見てみると案外単純な構成です。実際に書いてみると、なんだ、こんなものか・・・って感じですぐに覚えることができると思います。

つぎはCSSを書く場所について学習してみましょう。

覚えておきたいポイント

うまく使えないブラウザも

CSSがうまく使えないブラウザも存在します。例えば、IE6や5などの古いブラウザではCSSの解釈に不具合があり、ページのデザインが崩れる可能性もあります。それ以降や最近のブラウザでは問題ありません。ほとんどのブラウザでCSSを使うことができます。

CSSを書く場所
« 前のページへ 【STEP.2】CSSを入力してみよう!

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。