CSSの記述
CSSの記述方法は、大きく分けてタグ毎に指定、インラインで記述、id・classで指定の3種類があります。
HTMLタグ毎にCSSを指定
pやimgなど、HTMLタグ毎にまとめて指定する方法です。
まとめてCSSを指定できるため、記述・変更・修正の労力を大幅に減らすことができます。
divタグにpadding・marginを10px指定する場合
<div>任意のコンテンツ</div>
CSS
div{padding:10px; margin:10px;}
インラインでCSSを記述
HTMLタグにstyle属性で直接CSSを記述します。
インラインで記述した場合、各タグ毎に指定するため、一つ一つ記述しなければならず、手間が増え、メンテナンス性も悪いですが、古いDOCOMOの携帯電話（ガラパゴス携帯）は、インラインのCSSしか認識しませんので、古い携帯電話にも対応したモバイルサイトを作成する場合は、この方法を使います。
divタグにpadding・marginを10px指定する場合
※複数CSSを指定する場合は、半角スペースで区切ります。
id・classでCSSを指定する
一般的なCSSの記述方法がこちらの方法です。
任意のid・class名を付け、CSSを記述し、HTMLタグと合わせて使用します。
divタグにpadding・marginを10px指定する場合
<div id="sample">任意のコンテンツ</div>
CSS
#sample{padding:10px; margin:10px;}
上記の場合、divタグはsampleというidを参照して、sampleというidに記載されているpadding・marginを10px行います。
※idの場合は先頭に「#」をclassの場合は先頭に「.（ドット）」を付けて区別します。一つのタグにid・class両方指定することもできますし、複数のid・classを指定することもできます。複数指定する場合は半角スペースで区切ります。
おすすめのホームページ作成ソフト
コーディングをする際に、ホームページ作成ソフトを使うと非常に便利です。
現在有名なのは、『ホームページビルダー』と『Dreamweaver』の2つです。
- ホームページビルダー
- 初心者～中級者の方向けで、HTMLタグやCSSが全くわからない方におすすめです。
- Dreamweaver
- 中級者～上級者・プロ向けで、HTMLタグやCSSをある程度理解していたり、自分で調べられる方におすすめです。
『Dreamweaver』は高価ですが、スキルが上がっても使えるため、長い目で見れば、こちらをおすすめします。
また、学生や教職員の方向けに割引されたものがありますので、該当する方なら迷わず学生・教職員向けのものをおすすめします。
