こんにちは。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サイトがありますので、ぜひ探して参考にして下さいね。