Google検索エンジン

トップページ » ホームページの作り方 » HTMLファイルの編集方法


HTMLファイルの編集方法

  • HTMLファイルをダブルクリックすると、webブラウザで開いてしまい、HTMLファイルを編集できない方も多いと思います。 このページでは、HTMLファイルの開き方や編集方法、HTMLファイルの編集ソフトとしても利用できるテキストエディタについて、初心者向けに詳しく説明してます。

    「ホームページ・ビルダー」や「ドリームウィーバー」など、有料のホームページ作成支援ソフトを使用しなくても、フリーのテキストエディタのみでHTMLファイルを編集してホームページを作成することが可能です。

    HTMLファイルを開いて編集可能にするには、下のようにパソコンを操作します。


    HTMLファイル上で右クリック→プログラムから開く→「Notepad」を選択します。

    右クリックしたHTMLファイルが「Notepad」で開かれて編集可能な状態になります。

    HTMLファイルを開いて編集可能にする

    HTMLファイルを編集してみましょう。 HTMLが分からない人は、以下のソースをコピーして貼り付けてください。 HTMLファイルのタブは表示に影響しませんので、コピーした後にインデントを分かりやすいように調節してください。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <title>はじめてのホームページ</title>
    </head>
    <body>
    本日の朝食<br>
    パン、牛乳、サラダ<br>
    </body>
    </html>

    「title」に囲まれている「はじめてのホームページ」は、ホームページのタイトルとなります。 「body」に囲まれている「本日の朝食」などの文字列は、ホームページに表示される内容となります。 「本日の朝食」と「パン、牛乳、サラダ」の間にある「br」は改行を表します。


    NotepadはWindowsに標準装備されていますが、HTMLタグなどを強調したり色分けして表示することはできません。 テキストエディタには、秀丸エディタ、サクラエディタなどがあります。 サクラエディタはフリーソフトでありながら多くの機能を備えているのでおすすめです。 HTMLタグを色分できるテキストエディタで編集すると、分かりやすくなるので作業効率が上がります。


    「Notepad」でHTMLファイルを開いて編集した場合

    HTMLファイル編集(Notepad)

    「秀丸エディタ」でHTMLファイルを開いて編集した場合

    HTMLファイル編集(秀丸エディタ)

    編集したHTMLファイルは、webブラウザで以下のように表示されます。

    HTMLファイルをwebブラウザで表示

    Webブラウザの一番上の青い部分にタイトル「はじめてのホームページ」が表示されて、真ん中の白い部分に「body」の内容が表示されています。 「本日の朝食」の後に改行されて、「パン、牛乳、サラダ」という文字が表示されています。


ホームページ作成方法
it-manual.comのウェブサイト
書籍の紹介
  • できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
    できるホームページ HTML&CSS入門
    発売:2010/12/24
    定価:1,659円
    著者:佐藤 和人
    出版:インプレスジャパン
    内容:オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
  • HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
    HTML/XHTML&スタイルシートレッスンブック
    発売:2007/06/20
    定価:2,604円
    著者:エビスコム
    出版:ソシム
    内容:初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。
  • Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
    Webデザインの基本ルール
    発売:2009/03/27
    定価:1,890円
    著者:デザインラボ編集部
    出版:ソフトバンククリエイティブ
    内容:色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
  • Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    発売:2005/07
    定価:2,520円
    著者:益子 貴寛
    出版:秀和システム
    内容:「Web標準」とは、Web上で標準的に利用される技術の総称です。Webサイトをより多様な環境に対応させ、誰にでもアクセスできるようにするには、この概念が必要不可欠だといえるでしょう。
  • ネットではじめる! 輸出ビジネス
    ネットではじめる!輸出ビジネス
    発売:2010/08/21
    定価:1,575円
    著者:陳 立浩
    出版:すばる舎
    内容:売れる商材の特徴、言葉の壁の乗り越え方、ネット輸出会社の作り方、効果抜群の広告宣伝のコツやクレームへの対処法まで、この1冊で新たなビジネスモデルが見えてきます。
ホームページ作成支援
  • Wacom ペンタブレット Sサイズ シンプルタブレット 描き心地にこだわった筆圧1024レベル Wacom Bamboo Pen CTL-460/K0
    発売日:2010/09/30
    参考価格:6,000円
    分類:ペンタブレット
    ブランド:ワコム
    パソコンで、手書き文字やイラストを描くことを可能にするペンタブレットです。ドキュメントにコメントやイラストを書き込んだり、お絵描き掲示板に投稿したり、もちろんマウス代わりにも使えます。
おすすめレンタルサーバー
  • 「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • 50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • 稼働率99.99%以上、容量10GB、月額1,260円からのレンタルサーバーです。サポート体制が充実しており、専任のサポートスタッフを置くことで、平均3時間のクイックレスポンスを実現してます。
  • 月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。