サクラエディタでは、HTMLだけでなくCSSを書くこともできます。
HTMLでページの文章や見出しを作ったあと、CSSを使うことで文字の色や大きさ、背景色、余白などを自由に変更できます。
この記事では、サクラエディタを使ってCSSファイルを作成し、HTMLにCSSを反映させるまでの手順を初心者向けに解説します。
サクラエディタでHTMLファイルを作る方法が分からない場合は、先にこちらの記事をご覧ください。
サクラエディタでCSSを書くことはできる？
サクラエディタはテキストエディタなので、CSSのコードを書くこともできます。
特別な設定やプラグインを入れる必要はありません。
基本的には、
- CSSを書く
.cssという拡張子で保存する- HTMLからCSSファイルを読み込む
という3つの作業を行います。
たとえば、
h1 {
color: red;
}
とCSSに書くと、HTMLのh1タグで囲んだ文字を赤色にできます。
ただし、CSSファイルを作っただけではHTMLには反映されません。
HTML側からCSSファイルを読み込む設定が必要です。
サクラエディタでCSSファイルを作る方法
まずはCSSファイルを作ってみましょう。
サクラエディタを開く
サクラエディタを起動します。
新しい編集画面が表示されたら、CSSを入力します。
今回は動作確認のため、次のコードを入力してみましょう。
h1 {
color: red;
}
p {
color: blue;
}
このCSSでは、
h1の文字を赤色pの文字を青色
に指定しています。
CSSの詳しい書き方については、別の記事で解説しています。
CSSファイルを保存する
CSSを書いたらファイルを保存します。
サクラエディタの上部メニューから、
「ファイル」→「名前を付けて保存」
を選択します。
ファイル名は、たとえば次のようにします。
style.css
重要なのは、ファイル名の最後を.cssにすることです。
HTMLファイルがindex.htmlなら、初心者のうちは次のように同じフォルダに保存すると分かりやすいでしょう。
フォルダ
├─ index.html
└─ style.css
HTMLとCSSを同じフォルダに置いておけば、CSSの読み込み指定も簡単になります。
HTMLからCSSファイルを読み込む
CSSファイルを保存しただけでは、HTMLには反映されません。
HTMLファイルのheadタグ内に、CSSファイルを読み込むためのlinkタグを書きます。
<link rel="stylesheet" href="style.css">
HTML全体では、次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSSの練習</h1>
<p>サクラエディタでCSSを書いてみましょう。</p>
</body>
</html>
href="style.css"の部分で、読み込むCSSファイルを指定しています。
HTMLとCSSが同じフォルダにある場合は、この書き方で読み込めます。
ブラウザでCSSが反映されたか確認する
HTMLとCSSを保存したら、HTMLファイルをブラウザで開きます。
先ほどの例では、
- 「CSSの練習」という見出しが赤色
- 「サクラエディタでCSSを書いてみましょう。」という文章が青色
になっていれば成功です。
すでにHTMLファイルをブラウザで開いている場合は、ブラウザの「更新」ボタンを押してください。
CSSを書き換えた場合も、
- サクラエディタでCSSを保存する
- ブラウザを更新する
という流れで変更を確認できます。
CSSが反映されないときの確認ポイント
CSSを書いたのにブラウザの表示が変わらない場合は、いくつかの原因が考えられます。
初心者の場合は、まず次の項目を確認しましょう。
CSSファイルを保存しているか
サクラエディタでCSSを書き換えても、保存しなければ変更内容は反映されません。
変更したら、
「ファイル」→「上書き保存」
またはCtrl + Sで保存します。
保存後、ブラウザを更新してください。
CSSファイル名が間違っていないか
HTML側で、
<link rel="stylesheet" href="style.css">
と書いている場合、CSSファイルの名前も、
style.css
になっている必要があります。
たとえばCSSファイルが、
styles.css
となっているのに、HTMLでは、
href="style.css"
と指定していると読み込めません。
ファイル名を確認しましょう。
HTMLとCSSの保存場所を確認する
先ほどの例では、HTMLとCSSを同じフォルダに保存しています。
フォルダ
├─ index.html
└─ style.css
この場合は、
<link rel="stylesheet" href="style.css">
で読み込めます。
一方、CSSをcssというフォルダに入れた場合は、
フォルダ
├─ index.html
└─ css
└─ style.css
HTML側も次のように変更します。
<link rel="stylesheet" href="css/style.css">
CSSファイルを別のフォルダに保存したときは、CSSまでの場所を正しく指定する必要があります。
linkタグをheadタグ内に書いているか
CSSを読み込むlinkタグは、基本的にHTMLのheadタグ内に記述します。
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
CSSが反映されない場合は、linkタグを書いた位置も確認してみましょう。
CSSの書き方に間違いがないか
CSSの記述ミスでも、スタイルが反映されないことがあります。
たとえば、
h1 {
color: red;
}
では、
{}:;
などを使用します。
最初のうちは記号の入力ミスも起こりやすいため、CSSが反映されない場合はコードを確認しましょう。
HTMLファイルに直接CSSを書くこともできる
CSSは別ファイルにしなくても、HTMLファイルの中に書くこともできます。
たとえばheadタグ内にstyleタグを作ります。
<style>
h1 {
color: red;
}
</style>
これでもCSSは反映されます。
しかし、HTMLとCSSを学習するのであれば、
index.html
style.css
のようにファイルを分けて練習する方法がおすすめです。
HTMLとCSSの役割が分かりやすくなり、ページが増えたときにも管理しやすくなります。
サクラエディタでHTMLとCSSを編集するときの流れ
ここまでの作業をまとめると、次のようになります。
- サクラエディタでHTMLファイルを作る
index.htmlなどの名前で保存する- サクラエディタでCSSを書く
style.cssなどの名前で保存する- HTMLの
head内からCSSを読み込む - HTMLファイルをブラウザで開く
- CSSを変更したら保存する
- ブラウザを更新して確認する
この流れを覚えてしまえば、サクラエディタを使ってHTMLとCSSの練習ができるようになります。
まとめ
サクラエディタでもCSSを書くことができます。
CSSファイルを作成したら、HTMLのheadタグ内に、
<link rel="stylesheet" href="style.css">
と記述してCSSファイルを読み込みます。
最初は、
index.html
style.css
の2つを同じフォルダに保存して練習すると分かりやすいでしょう。
CSSが反映されない場合は、
- CSSファイルを保存したか
- ファイル名が合っているか
- HTMLとCSSの保存場所が正しいか
linkタグの指定が正しいか- CSSの記述に間違いがないか
を順番に確認してみてください。
HTMLとCSSを連携できるようになったら、次は文字色や背景色、文字サイズなど、CSSの基本的なプロパティを使ってページのデザインを変更してみましょう。
