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

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

CSSを書く場所

CSSはどこに書いたらいいの?

実はCSSはどこに書いてもいいんです。
HTMLページに埋め込むこともできるので、ルールさえ覚えておけば好きなところに書くことができます。

CSSはどこに書いてもOK

しかしHTMLとCSSを一緒に書いてしまうと、ソースコードが複雑になり編集・修正するのが大変になります。

そこで、HTMLとCSSを分離させ、別々に記述する方法が一般的です。

HTMLとCSSは分離させる

HTMLとCSSを分離させることにより、様々なメリットもあります。
ソースコードがスッキリ見やすくなったり、読み込み速度の向上、一括変更などの大幅な作業効率の向上が期待できます。

それでは、実際にこの後CSSを記述しますので、CSSファイルを作成しておきましょう。

覚えておきたいポイント

CSSはどこに書いてもOK!

CSSは好きなところに書いてOK!でも、ソースコードが複雑になるので、通常はHTMLファイルとCSSファイルで分離させます。

CSSファイルを作成する

「homepage」フォルダの中に、CSSファイルを作成してみましょう。

CSSファイルの作成方法

step.1

まずはTeraPadを起動し、「表示」「編集モード」から「CSS」を選択しましょう。

CSSを選択

step.2

次に「ファイル」から「文字/改行コード指定保存」をクリックします。

ファイルを保存する

step.3

文字コードを「UTF-8N」に指定して、OKボタンをクリックします。

文字コードの指定

step.4

「homepage」フォルダに、「style」と名前をつけて保存しましょう。

名前をつけて保存

step.5

これでCSSファイルが作成されました。

ファイルの作成確認

覚えておきたいポイント

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

CSSファイルもメモ帳で作成することができますが、前述の問題が発生する可能性もあるのでなるべくテキストエディターで作成するようにしましょう。

HTMLファイルを作成する

CSSファイルが完成したら、index.htmlファイルも作成しておきましょう。
今後のCSSの学習で使用します。

HTMLファイルの作成方法

step.1

同じようにTeraPadを起動し、「表示」「編集モード」から「HTML」を選択します。

HTMLを指定

step.2

「ファイル」から「文字/改行コード指定保存」をクリックします。

文字コードを指定して保存

step.3

文字コードを「UTF-8N」に指定して、OKボタンをクリックします。

UTF-8Nを確認

step.4

「homepage」フォルダに、「index」と名前をつけて保存しましょう。

名前をつけて保存

ちなみに、今index.htmlやstyle.cssを開いても何も表示されません。カラッポの状態です。
ここにCSSを記述していきます。

これでCSSファイルの作成は完了ですが、このままの状態ではHTMLファイルがCSSを読み込むことができません。
次のページではHTMLとCSSの紐付けについて説明します。

覚えておきたいポイント

HTMLファイルも作成しよう

CSSの学習のためにHTMLファイルも作成しておきましょう。別々に作成したHTMLファイルとCSSファイルを紐付けることりより、HTMLファイルにスタイルを呼び出すことができるようになります。

HTMLとCSSの紐付け
« 前のページへ CSSの基本的な書き方

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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