【環境構築】CSSの開発環境

CSSの開発環境を構築する方法を解説します。CSSはHTMLと同様に特別なインストールは不要で、テキストエディタとブラウザがあればすぐに始められます。

HTMLの style 要素に書く

HTMLファイルの『<head>』内に『<style>』要素を配置し、その中にCSSを記述する方法です。手軽に試せるため、学習の初期段階に適しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSテスト</title>
  <style>
    h1 {
      color: #ff6600;
      font-size: 24px;
    }
    p {
      color: #333333;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>はじめてのCSS</h1>
  <p>CSSでスタイルを変更しました。</p>
</body>
</html>

外部CSSファイルを読み込む

CSSのコードを別ファイル（.css）に記述し、HTMLから『<link>』要素で読み込む方法です。実際の開発ではこの方法が最も一般的です。

まず『style.css』ファイルを作成します。

/* style.css */
body {
  font-family: sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
}

h1 {
  color: #336699;
  border-bottom: 2px solid #336699;
  padding-bottom: 8px;
}

p {
  color: #333333;
  line-height: 1.8;
}

次に、HTMLファイルからこのCSSファイルを読み込みます。

<!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>style.css のスタイルが適用されています。</p>
</body>
</html>

ファイルの書き方やコメントの記述方法については『.cssファイルの作成と読み込み方法』を参照してください。

インラインスタイルで直接書く

HTMLの『style』属性に直接CSSを記述する方法です。特定の要素だけにスタイルを適用したい場合に使えますが、保守性が低いため多用は避けましょう。

<p style="color: red; font-weight: bold;">赤い太字のテキスト</p>
<div style="background-color: #eee; padding: 16px;">背景色つきのボックス</div>

開発者ツールでリアルタイム編集する

ブラウザの開発者ツールを使うと、CSSをリアルタイムで編集してプレビューできます。デザインの微調整に非常に便利です。

手順	操作
1	ブラウザでHTMLファイルを開きます。
2	『F12』キー（macOSは『Cmd + Option + I』）で開発者ツールを開きます。
3	『Elements』タブで要素を選択すると、右側の『Styles』パネルに適用されているCSSが表示されます。
4	CSSのプロパティ値をクリックして直接編集すると、画面に即座に反映されます。
5	新しいプロパティを追加することもできます。

Chromeの開発者ツール（DevTools）のStylesパネル

開発者ツールでの変更は一時的なものです。気に入ったスタイルが見つかったら、CSSファイルに反映してください。

おすすめのテキストエディタ

CSS開発に便利なテキストエディタを紹介します。どれも無料で使えます（秀丸エディタのみシェアウェア）。

ツール	特徴
VSCode	現在最も人気のあるエディタです。CSSのプロパティ補完・カラープレビュー・Emmet によるコーディング高速化など、CSS開発に便利な機能が標準搭載されています。Windows / macOS / Linux 対応。正式名は『Visual Studio Code』。
Sublime Text	軽量で動作が非常に速いエディタです。シンプルな画面でコーディングに集中できます。Windows / macOS / Linux 対応。
秀丸エディタ	1993年リリース、日本で長年愛されている国産テキストエディタです。動作が軽快でマクロ機能も搭載。Windows 専用・買い切り型。
Cursor	AI機能を搭載した最新のエディタです。Visual Studio Code をベースに、コード補完がさらに強力になっています。Windows / macOS / Linux 対応。

最近では『VSCode』が最も広く使われているらしいのですが、管理人はシンプルかつ軽快に動くエディタが大好物なので現在は『Sublime Text』を愛用しております。良ければ参考にしてやってください。

それと秀丸エディタについて補足をさせてください。秀丸エディタの初リリースは1993年、動作が軽快で正規表現による強力な検索・置換機能を備えており、更に『マクロ』を使って自分好みの設定にすることが可能な本当に素敵なエディタでございます。最近ですと『マクロ』は『アドオン』なんかが該当しますが、なんと1990年代からすでにその機能を実装していたという遙か先の未来を見越したような設計で、そういった面でも大変すばらしいエディタです。

実は管理人もWindows3.1からWindows7頃までずっと秀丸エディタを使ってプログラミングをしていたクチで、長年大変お世話になっておるのでございます。そして開発者の斉藤秀夫さんは未だに秀丸エディタのアップデートを続けており、例えばWindows11、その他64Bit板のWindowsでも問題なく起動させることができます。秀丸エディタはこちらから購入でき、買い切り型で価格も4000円程度、WindowsOSに入れておくと色々と捗るので買っておいて損はないかなと思います。

(´-`).｡oO(管理人は昔からお世話になっている秀夫さんを応援したいので、個別にご紹介させて頂きました...)

(´-`).｡oO(しかし30年以上使っているのに支払った金額はたった4000円前後...これほどコスパの良いものが他に存在するのかというレベルですね...)

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ