HTML・CSSを効率良く編集する方法

Tweet

Pocket

HTML・CSSをエディターで編集する方法

HTML・CSSファイルの開き方

コードエディターでHTMLやCSSを編集するために、まずはファイルを開く必要があります。ファイルの開き方やおすすめのエディターについてはこちらでまとめたので参考にしてみてください。

関連記事：HTML、CSSファイルの正しい開き方
関連記事：初心者にもおすすめ！無料のコードエディターBracketsの使い方

コードエディターで効率良くHTML・CSSを書く方法

各種コードエディターには、コードの記述時に便利な機能がたくさん搭載されています。たとえば、コードの自動補完機能（オートコンプリート）。これはHTMLやCSSコードを途中まで書くと、候補をリストアップしてくれる機能です。

また、CSSスタイルのカラー設定でカラーコードを入力せず、カラーピッカーで色を指定することもできたりします。

コードエディターに搭載されているこれらの便利機能を使えば、効率良くコーディングしていくことができます。

HTMLファイルの見た目をブラウザでチェックする

編集したファイルの結果をチェックするには、HTMLファイルの場合ブラウザを使うことになります。通常はダブルクリックして直接HTMLファイルを開けば、自動的にブラウザで表示されるので問題ありません。

Wordpressやカラーミーショップのテンプレートの場合は、テンプレートタグというものを使っているのでブラウザでそのままひらいてもうまく表示されません。

WordPressやカラーミーショップなどのテンプレートはサーバーにアップロードし、サイトにアクセスすることで閲覧できるようになります。

HTML・CSSをブラウザ上で編集する方法

ブラウザ上でHTML・CSSコードを表示する方法

コードはブラウザ上でも編集することができます。HTMLファイルをブラウザで開いたら、右クリックやブラウザのショートカットでコードを表示できます。

IE11の場合

FireFoxの場合

Chromeの場合

コードを表示させると以下のようなパネルが出てきます。

ブラウザ上でHTMLを編集する

パネルを表示させた状態なら、ブラウザ上でHTMLを編集することもできます。やり方はブラウザごとに多少異なりますが、だいたい同じ。ここではChromeを使ってみます。

コードパネルでHTMLコードをクリックすると、アクティブになります。アクティブにすると要素に適用されているスタイルを見ることができます。

テキストやclass名などはダブルクリックすることで編集できるようになります。編集したテキストはブラウザ上にも適用されてます。

また、アクティブにした要素はdelete（Windowsはbackspace？）で削除できます。

編集した内容はブラウザをリロードすると元に戻ってしまうので、コードを元のファイルにコピーすれば編集内容を保存することも可能です。

ブラウザ上でCSSを編集する

ソースコードを表示すればCSSも編集することができます。スタイルはコードパネルの右側に表示されます。要素のスタイルを表示したい場合はHTMLの要素をアクティブにすればOK。

スタイルパネルには、CSSのセレクタ（h1とか.classとか）とスタイルが記述されているCSSファイルのファイル名、さらに行数まで表示されます。

ブラウザ上でCSSスタイルを編集するには、値をクリックして内容を書き換えればOK。

編集した値はHTML同様リロードすると戻ってしまうので、元のファイルにコピーすることで保存することができます。

HTML・CSSの編集まとめ

HTMLファイルやCSSファイルはコードエディターを使うと非常に効率良く編集できます。また、ブラウザ上では実際に画面を見ながらスタイルの修正ができるので、使い分けながら活用してみて下さい。

HTMLのタグやCSSの書き方などを勉強するときは以下の書籍がおすすめ。初心者でも分かりやすくまとめられています。