(1navや2contentなどはNG。nav1や.content2などはOK。), 数字のみにした場合でもそうですが、先頭に数字を記入した場合は反応しないので注意しましょう。, 上記は

を例にしましたが、同じように

などでも

    などと指定することができます。, htmlファイル上で指定したidやclassの箇所について、スタイルシート側でも対応させて記述していきます。html側で「id」を指定した属性には「#」を、「class」を指定した属性には「.」を付けて指定します。, 例えば、HTMLファイル上のid属性で
    などと指定していた場合、CSS側では以下のように指定します。,
     → #example {padding: 10px;}, あるいは、class属性にて
    と指定していた場合は以下のようになります。,
     → .example {padding: 10px;}, このclass属性の点はカンマではなく、ドットコムの「ドット」ですので注意しましょう。, この場合、htmlファイル上のexampleで指定した箇所のpadding(※間隔のこと)を10pxで指定する意味になります。, 一方、属性を指定していない、一般的なpタグやbody、h1などの要素についてはそのまま記述することができます。, p {font-size: 14px;} → サイトに1個で済むので簡単, ・HEADタグ内に, けれども、このようにheadタグ内に記述するとHTMLファイルの記述内容が長くなるため、CSSは外部化させて独立させることが推奨されています。そのページにだけ追加で適用させたい場合などに使用するとよいでしょう。, style=で記述すれば、htmlタグ内にそのまま直接書くこともできます。 base.cssという名前のファイルが作成できたら、CSSファイルの新規作成は成功です。 CSSファイルでは、ウェブページのスタイルを指定していきますが、この時点ではまだ、文字コードが「UTF-8」であることを宣言しただけです。 記述が終わったら、ファイル名の後ろに拡張子「 .css 」を付けて保存 … HTMLファイルやCSSファイルを保存する場合には、必ず文字コードを「UTF-8N」で保存するようにしましょう。 好きなテキストエディタでOK. 例えば、トップページ用のスタイルシートなら「top.css」や「index.css」など、わかりやすいファイル名を付けて作成します。, 当サイトではトップページ用や個別ページ用などで6つのスタイルシートを用意していますが、いずれも拡張子「.css」で作成しておけば問題ありません。, 作成する場所は任意ですが、ルートディレクトリに設置するか、もしくは別途に「css」などのスタイルシート専用フォルダを用意してそちらにまとめておくとよいでしょう。, (2)htmlファイルのタグ内に、作成したCSSファイルのURLを指定する, 次に、作成したCSSを適用したいhtmlファイルのタグ内に、以下のようにCSSファイルのURLを記述して設定します。, これで(1)で作成したスタイルシートの記述内容にて、そのページが表示されるようになります。ページごとにデザインを変える場合、ページごとに違うスタイルシートを用意することになりますが、たいていは個別ページ用でひとつ、カテゴリページ用でひとつ、トップページ用でひとつを用意しておけば十分かと思います。, ちなみに、このURLを相対リンクで指定した際、cssファイルとhtmlファイルが違う階層にある場合にリンク切れになってしまう可能性もあるため、URLを省略せずに指定しておくとよいでしょう。, スタイルシートを作成する際の事前準備として、あらかじめhtmlファイル側にも「id属性」や「class属性」を埋め込んでおき、htmlとcssの両方をそれぞれ対応させる必要があります。, 例えば、ヘッダー部分については、