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

Pocket

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

HTML・CSSファイルの開き方

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

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

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

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

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

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

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

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

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

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

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

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

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

IE11の場合
IEでHTMLのソースコードを開く方法
FireFoxの場合
firefoxでHTMLのソースコードを開く方法
Chromeの場合
chromeでHTMLのソースコードを表示する方法

コードを表示させると以下のようなパネルが出てきます。
HTMLコードをブラウザで見る

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

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

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

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

また、アクティブにした要素はdelete(Windowsはbackspace?)で削除できます。
ブラウザ上でHTMLコードを編集 その3

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

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

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

スタイルパネルには、CSSのセレクタ(h1とか.classとか)とスタイルが記述されているCSSファイルのファイル名、さらに行数まで表示されます。
ブラウザ上でcssを編集する

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

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

HTML・CSSの編集まとめ

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

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