ホームページ作成/ホームページ作成テクニック、小技

HTML・スタイルシートのソースを編集する方法

HTMLやスタイルシートのソースを記述する方法を解説。ホームページ作成ソフトでHTMLソースを編集できる状態にするか、テキストエディタを使って編集しましょう。ここでは、「ホームページビルダー」を使う方法と「メモ帳」を使う方法を紹介しています。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加
HTMLやスタイルシートのソースを記述する場合、ページの本文内に文章として記述しても意味がありません。本文の一部として記述するのではなく、「HTMLのソース内」に直接記述する必要があります。ですから、まずはお使いのホームページ作成ソフトで、HTMLソースを編集できる状態にする必要があります。

ホームページ作成ソフトを利用している場合

ホームページ作成ソフトウェアには、たいていHTMLソースを直接編集する機能も用意されています。方法はソフトウェアによって様々ですが、例えば「ホームページビルダー」(Ver.14)での場合は、以下の通りです。

HTMLソースの編集
ホームページビルダー : WYSIWYG画面

ホームページビルダーの編集画面

通常は、右図のように、主にマウス操作で自由にデザインを作れる状態になっています。見た目は、編集用の枠線などが存在する点を除けば、ほとんどブラウザに表示される結果と同じです。

編集スタイルが「かんたん」に設定されている場合は、下記の手順で「スタンダード」に変更して下さい(そうしないと、ソースを編集できません)。

メニューの「表示」→「編集スタイルの切り替え」をクリックして、下図の「ホームページビルダーへようこそ」画面を表示させます。ここで「スタンダード」を選択した上で「OK」ボタンをクリックすると、変更できます(既に「スタンダード」で利用しているなら、この操作は不要です)。
ホームページビルダー : 編集スタイルの切り替え画面

ホームページビルダー : 編集スタイルの切り替え画面


スタンダードスタイルで編集している場合、下図のように、画面上部には「ページ編集」というタブが見えるはずです。その隣に、「HTMLソース」という文字がありますので、そこをクリックしてタブを切り替えます。
ホームページビルダー : ページ編集・ソース編集の切り替え

ホームページビルダー : ページ編集・ソース編集の切り替えタブ


すると、下図のようにHTMLソースが表示され、自由に編集できるようになります。
(画像)ホームページビルダー : ソース編集画面

ホームページビルダー : HTMLソース編集画面


このようにHTMLソースを編集できる状態にできたら準備完了です。あとは、ソース内を自由に編集できます。編集後、保存するのを忘れないようにして下さい。

スタイルシートソースの編集
ホームページビルダーの場合、スタイルシートソースは「スタイルシートマネージャ」という機能から編集できます。「スタイルシートマネージャ」を表示するには、ツールバー右端にある下図のようなアイコンをクリックします。
ホームページビルダー : ツールバー

ホームページビルダーのツールバー(スタイルシートマネージャのアイコン)


すると、下図のような「スタイルシートマネージャ」が表示されます。
左側の「スタイルシート情報」欄から編集したいスタイルシートファイルを選択した上で、左下の「CSSエディタで編集」ボタンをクリックします。
ホームページビルダー : スタイルシートマネージャ

ホームページビルダーでスタイルシートマネージャを起動したところ


すると、下図のような「CSSエディタ」画面が表示され、スタイルシートを自由に編集できるようになります。
ホームページビルダー : CSSエディタで編集

ホームページビルダーの「CSSエディタ」でスタイルシートソースを編集

ソース内で自由に追記・変更・削除できます。編集後、保存するのを忘れないようにして下さい。


ホームページ作成ソフトを使わずに編集する場合(テキストエディタを使う場合)

ホームページ作成ソフトを使わずに、「メモ帳」などの「テキストエディタ」と呼ばれる編集ソフトを使うことでも、HTMLを編集可能です。例えば、Windowsに標準で搭載されている「メモ帳」を使う場合は、以下のように操作します。

編集したいHTMLファイルのアイコンを右クリックして、下図のようにメニューをたどると、HTMLをメモ帳に取り込んで起動させることができます(※メニュー項目は、お使いの環境によって多少異なります。「Notepad」(メモ帳)が表示されていない場合は、「プログラムの選択」項目をクリックして追加できます)。
エクスプローラからメモ帳を起動する画面

マイコンピュータ(エクスプローラ)上から「メモ帳」を起動する画面


先に「メモ帳」を起動しておいてから、下図のように、メニューの「開く」を使ってHTMLファイルを選択して開くこともできます。
メモ帳のメニューからファイルを開く画面

メモ帳のメニューからファイルを開く画面 (※「すべてのファイル」を選択)


どちらの方法でも、HTMLファイルを読み込めば、HTMLソースを編集できるようになります(HTMLに限らず、CSSやJavaScriptなど、何のファイルでも操作方法は同じです)。
メモ帳でHTMLを読み込んだところ

メモ帳でHTMLを読み込んだところ


テキストエディタと呼ばれる種類のソフトウェアは、フリーソフトウェアとしてもたくさん公開されています。「メモ帳」には最低限の編集機能しかありませんので、頻繁に編集するようなら、自分の使いやすいテキストエディタを用意するのが良いでしょう。

下図のように、HTMLのタグや属性を色分け表示できる、見やすいテキストエディタがたくさん公開されています。
EmEditorでHTMLソースを編集しているところ

テキストエディタ「EmEditor」でHTMLソースを編集しているところ


タグを色分け表示してくれる便利なテキストエディタについては、「タグを色分けできるテキストエディタを使う」でご紹介していますので、ぜひご参照下さい。


こまめな保存と、頻繁な表示確認をしよう

HTMLソースやスタイルシートソースを直接編集する場合、こまめに保存し、ブラウザでの表示確認を頻繁にするようにして下さい。編集する箇所を間違えると、表示が大きく崩れてしまいます。頻繁に表示確認をしておけば、表示を崩してしまった場合でも、すぐに元に戻せます。

更新日:2010年04月01日

(公開日:2010年03月18日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    3

    この記事を共有する