初心者向けの簡単ホームページ作成講座！HTMLソースを修正して見出しや表を作成・編集してみよう

執筆者： 良知敏子 ｜ 職業：PCインストラクター・ホームページアドバイザー
はじめに

こんにちは。PCインストラクターの良知敏子です。

今回のコラムでは、HTMLソースの修正を行います。

まずは前回まで使用していたファイルを開きましょう。

 

 

HTMLソース内に文章を追加すると、ページ編集画面でホームページを見たときに、その文章が反映されているのでしたよね。

しかし「この程度だったら、ページ編集で文章入力するのとあまり変わらないよね」という声が聞こえてきそうです。


確かにその通りです。

それでは、もう少しHTMLソースを編集してみましょう。

 

大見出しの編集の仕方

タグの下の一文「

HTMLの世界へようこそ！簡単でわかりやすい解説をしています

」を少し変更してみましょう。

 

 

ここは

という、段落を表すタグで囲まれている部分ですが「このページ内で最も重要な文章だよ」という意味を持つように変更してみます。

 

そこで、

を

というタグに変更してみましょう。

は「見出し1」を表すタグで「ページ内で一番の大きな見出し」という意味になります。

それでは、

を

に変更してみましょう。

文章は特に変更しないので

を

に入力し直すだけでOKです。

終了タグも忘れずに変更しましょう。

ポイントは、開始タグと終了タグをセットで使うこと。

（開始タグ）で始まったら、必ず

（終了タグ）で終わります。



それでは、「ページ編集」タブをクリックし、どのように表示されているのかを確認しておきましょう。

「見出し1」は、大見出しという役割を持っているので、文字のサイズが大きく、太字に設定されています。

 

 

「ちょっと文字が大きすぎるなあ…」という場合は、出来ればスタイルシートを利用して文字サイズを小さくするのがベストですが、難しい場合はツールバーの「文字サイズ縮小」を使い、小さくすることも可能です。

「段落」を「見出し1」に変更する作業は「ページ編集」からも勿論可能ですが、私は少々面倒に感じるため、たいていHTMLソースから直してしまいます。

「見出し2」なども同様です。

 

表の作成方法とタグの意味

もう少し編集してみましょう。

「ページ編集」タブから、表を作成してみます。

 

表は、ホームページでは良く使われる機能の一つです。

今回は2行2列の表を作成してみます。

 

さて、表を作成すると、以下のように多くのタグが出力されます。

 

 

作成した表によっては、他にもタグが出力されますが、今回はシンプルな表なので、出力されたタグの種類は4種類です。

簡単にタグの意味を解説します。


  • ：表を定義するタグ。表の枠線の幅を、1ピクセルで表示する属性が設定されている
    • ：表のメインの部分を定義するタグ
    • ：行を定義するタグ
    • というタグに注目します。

    の中には、は行を表すので、～までが1行分ということになりますね。

    ということは、この

    ～までをコピーしての下に貼り付けてしまえば、コピーが完了してしまうのです。

     

     

    ページ編集タブより確認してみましょう。

    正しく行がコピーされていることが確認出来ます。

     

     

    ポイントは、開始タグ～終了タグまでを選択して、適切な場所にコピーすることです。

    「適切な場所って？」と、思われるかもしれません。

    適切な場所とは、基本的には終了タグの次、終了タグがないタグに関しては、タグを閉じる「>」の次になります。


    今回のように、行をコピーする場合は、

    の間や～の間にすると、構造が適切ではなくなり、上手く出来ませんので、注意が必要です。

     

     

    HTMLの基本を理解すれば様々な編集が出来る

    例えば、表を丸ごとコピーすることも、HTMLソースの方が簡単ですよね。

    そう、

    ：セルを定義するタグ

     

    この中で、

    というセルを表すタグが入っていますね。

    今回の場合でしたら「1行の中に2つセルがありますよ」と読むことが出来ます。

    表の編集の仕方

    ところで「表の2行目をコピーして3行目を作りたいな」と思ったとき、どうしますか？
    もちろん「ページ編集」からも、操作を行うことが出来るのですが、HTMLソースを編集すれば、簡単に追加が出来ます。

    ～
    ～
    をコピーして貼りつければ良いのです。

    このように、HTMLの基本的な事柄が分かっていれば、ホームページビルダーであっても、HTMLソースを修正した方が、簡単にホームページの修正が出来る場面が多くあります。

    もちろん、ホームページビルダーには、便利に編集出来る様々な機能もありますので、そちらを利用する方が簡単な場合もあります。


    つまり、状況に応じて使い分けることが出来れば、かなり効率良く編集作業を行うことが出来ます。


    HTMLソースを修正して、プレビューで確認した時に、思った通りに修正が完了していたら、少しだけ「出来る自分」になった気がしませんか？

    「お、出来たー！」なんて、独り言を言ってしまいそうですよね。

    おわりに

    今回は、本当に基本的な部分のみの解説で、使用したタグもほんのわずかでした。

    しかし、基本が把握出来ていれば、怖いなんてことはありません。

     

    もしも、HTMLに興味を持たれたら、多くの書籍やWebサイトがありますので、ぜひ探して参考にして下さいね。

  
 コラムニスト情報
良知敏子
良知敏子
性別：女性  |   職業：PCインストラクター・ホームページアドバイザー

はじめまして。静岡県静岡市でパソコン講習やセミナー、ホームページ作成やサポートを行っているテックスカラ代表の良知敏子と申します。
営業事務業務のIT担当として、たまたま携わったパソコンでしたが、色々な業務に携わりながらとてもたくさんの事を学び、現在に至っております。
常にユーザー目線での講習や制作を心がけることが信条です。
どうぞよろしくお願いいたします。