いちから始めるホームページ作成

HTML・CSSのことがよくわかる初心者から始めるホームページ制作

CSSの記述

CSSの記述方法は、大きく分けてタグ毎に指定、インラインで記述、id・classで指定の3種類があります。

HTMLタグ毎にCSSを指定

pやimgなど、HTMLタグ毎にまとめて指定する方法です。

まとめてCSSを指定できるため、記述・変更・修正の労力を大幅に減らすことができます。

divタグにpadding・marginを10px指定する場合

HTMLソース
<div>任意のコンテンツ</div>
CSS
div{padding:10px; margin:10px;}

インラインでCSSを記述

HTMLタグにstyle属性で直接CSSを記述します。

インラインで記述した場合、各タグ毎に指定するため、一つ一つ記述しなければならず、手間が増え、メンテナンス性も悪いですが、古いDOCOMOの携帯電話(ガラパゴス携帯)は、インラインのCSSしか認識しませんので、古い携帯電話にも対応したモバイルサイトを作成する場合は、この方法を使います。

divタグにpadding・marginを10px指定する場合

<div style="padding:10px; margin:10px;">任意のコンテンツ</div>

※複数CSSを指定する場合は、半角スペースで区切ります。

id・classでCSSを指定する

一般的なCSSの記述方法がこちらの方法です。

任意のid・class名を付け、CSSを記述し、HTMLタグと合わせて使用します。

divタグにpadding・marginを10px指定する場合

HTMLタグ
<div id="sample">任意のコンテンツ</div>
CSS
#sample{padding:10px; margin:10px;}

上記の場合、divタグはsampleというidを参照して、sampleというidに記載されているpadding・marginを10px行います。

※idの場合は先頭に「#」をclassの場合は先頭に「.(ドット)」を付けて区別します。一つのタグにid・class両方指定することもできますし、複数のid・classを指定することもできます。複数指定する場合は半角スペースで区切ります。

HTMLタグ
CSS
一口メモ
サンプルソース
用語集