初心者向け
ホームページの
作り方講座

cssファイルの土台を準備

デザイン用のファイルをスタイルシートcssファイル)と呼びます。文字通り、「スタイルを整えるシート」です。

土台を準備します

早速準備してみます。TeraPadのアイコンをクリック又はダブルクリックで開き、「@charset "utf-8";」という1行を入力します。

↓手打ちに自信のない人は以下のタグをコピペして下さい。

入力したら、index.htmlの新規保存のステップでやった作業を行います。
一番最後にファイル名を入力しますが、そこだけ「style.css」とし、ファイルの種類から「CSSファイル」を選択して下さい。

選択したら「保存」ボタンを押します。
HPフォルダに今保存した「style.css」というファイルが入っていれば成功です。

cssフォルダを作って整理しておきます

現状のままでもいいのですが、今後沢山のhtmlファイルや画像ファイルがこのHPフォルダに入ってきますので、後々管理しやすくする為にフォルダを分けておきましょう。

今、保存したファイルはcssファイルなので、「css」というフォルダを作ってみます。



上記の画面のように文字が反転したままなら、その状態(何もいじらない)で、小文字で「css」と入力して下さい。半角文字である必要がありますのでご注意を。
もし以下の画面のように反転が解除されてしまっていたら、キーボードの「F2」ボタンをクリックして反転させて入力しなおしましょう。

F2」を押すのと同じ動作は以下の方法でもできます。

cssフォルダは無事にできましたか?

では、style.cssをcssフォルダに移動しておきましょう。
style.cssフォルダの上で左クリックをし、クリックしたままcssフォルダの上に引っ張ってきます。cssフォルダの色が変わったらクリックを離して下さい。

以下のようにstyle.cssがなくなっていれば成功です。
ちゃんと移動できているかcssフォルダをクリック又はダブルクリックしてチェックしておくといいでしょう。

index.htmlからcssファイルを読み込んでおく設定をします

このままだと、index.htmlとcssファイルとの関連づけが全くないので、index.htmlに今作ったstyle.cssファイルを読み込むタグを追加しておきます。

index.htmlをTeraPadで開き、以下の1行を追加します。

↓手打ちに自信がない人は以下のタグをコピペ。

"css/style.css"という部分が読み込み先の指定です。スラッシュ「/」で区切る事で、cssフォルダの中にあるstyle.cssという意味になります。もしindex.htmlと同じ場所(階層)にstyle.cssがあった場合は"style.css"のみが指定方法となります。

次のステップは…

「cssファイルを少し編集」です。頑張りましょう!