初心者向けの簡単ホームページ作成講座!HTMLソースを修正して見出しや表を作成・編集してみよう
こんにちは。PCインストラクターの良知敏子です。
今回のコラムでは、HTMLソースの修正を行います。
まずは前回まで使用していたファイルを開きましょう。
HTMLソース内に文章を追加すると、ページ編集画面でホームページを見たときに、その文章が反映されているのでしたよね。
しかし「この程度だったら、ページ編集で文章入力するのとあまり変わらないよね」という声が聞こえてきそうです。
確かにその通りです。
それでは、もう少しHTMLソースを編集してみましょう。
HTMLの世界へようこそ!簡単でわかりやすい解説をしています
」を少し変更してみましょう。
ここは
という、段落を表すタグで囲まれている部分ですが「このページ内で最も重要な文章だよ」という意味を持つように変更してみます。
そこで、
をというタグに変更してみましょう。
は「見出し1」を表すタグで「ページ内で一番の大きな見出し」という意味になります。
それでは、
を
に変更してみましょう。
文章は特に変更しないので
を
に入力し直すだけでOKです。
終了タグも忘れずに変更しましょう。
ポイントは、開始タグと終了タグをセットで使うこと。
(開始タグ)で始まったら、必ず
(終了タグ)で終わります。それでは、「ページ編集」タブをクリックし、どのように表示されているのかを確認しておきましょう。
「見出し1」は、大見出しという役割を持っているので、文字のサイズが大きく、太字に設定されています。
「ちょっと文字が大きすぎるなあ…」という場合は、出来ればスタイルシートを利用して文字サイズを小さくするのがベストですが、難しい場合はツールバーの「文字サイズ縮小」を使い、小さくすることも可能です。
「段落」を「見出し1」に変更する作業は「ページ編集」からも勿論可能ですが、私は少々面倒に感じるため、たいていHTMLソースから直してしまいます。
「見出し2」なども同様です。
もう少し編集してみましょう。
「ページ編集」タブから、表を作成してみます。
表は、ホームページでは良く使われる機能の一つです。
今回は2行2列の表を作成してみます。
さて、表を作成すると、以下のように多くのタグが出力されます。
作成した表によっては、他にもタグが出力されますが、今回はシンプルな表なので、出力されたタグの種類は4種類です。
簡単にタグの意味を解説します。
:表を定義するタグ。表の枠線の幅を、1ピクセルで表示する属性が設定されている
- :表のメインの部分を定義するタグ
:行を定義するタグ :セルを定義するタグ この中で、
というタグに注目します。 の中には、 というセルを表すタグが入っていますね。 今回の場合でしたら「1行の中に2つセルがありますよ」と読むことが出来ます。
表の編集の仕方ところで「表の2行目をコピーして3行目を作りたいな」と思ったとき、どうしますか?
もちろん「ページ編集」からも、操作を行うことが出来るのですが、HTMLソースを編集すれば、簡単に追加が出来ます。は行を表すので、 の下に貼り付けてしまえば、コピーが完了してしまうのです。~ までが1行分ということになりますね。ということは、この
~ までをコピーしてページ編集タブより確認してみましょう。
正しく行がコピーされていることが確認出来ます。
ポイントは、開始タグ~終了タグまでを選択して、適切な場所にコピーすることです。
「適切な場所って?」と、思われるかもしれません。適切な場所とは、基本的には終了タグの次、終了タグがないタグに関しては、タグを閉じる「>」の次になります。
今回のように、行をコピーする場合は、~ の間や~ の間にすると、構造が適切ではなくなり、上手く出来ませんので、注意が必要です。HTMLの基本を理解すれば様々な編集が出来る例えば、表を丸ごとコピーすることも、HTMLソースの方が簡単ですよね。
そう、
~
をコピーして貼りつければ良いのです。
このように、HTMLの基本的な事柄が分かっていれば、ホームページビルダーであっても、HTMLソースを修正した方が、簡単にホームページの修正が出来る場面が多くあります。もちろん、ホームページビルダーには、便利に編集出来る様々な機能もありますので、そちらを利用する方が簡単な場合もあります。
つまり、状況に応じて使い分けることが出来れば、かなり効率良く編集作業を行うことが出来ます。
HTMLソースを修正して、プレビューで確認した時に、思った通りに修正が完了していたら、少しだけ「出来る自分」になった気がしませんか?「お、出来たー!」なんて、独り言を言ってしまいそうですよね。
おわりに今回は、本当に基本的な部分のみの解説で、使用したタグもほんのわずかでした。
しかし、基本が把握出来ていれば、怖いなんてことはありません。
もしも、HTMLに興味を持たれたら、多くの書籍やWebサイトがありますので、ぜひ探して参考にして下さいね。
コラムニスト情報性別:女性 | 職業:PCインストラクター・ホームページアドバイザーはじめまして。静岡県静岡市でパソコン講習やセミナー、ホームページ作成やサポートを行っているテックスカラ代表の良知敏子と申します。
営業事務業務のIT担当として、たまたま携わったパソコンでしたが、色々な業務に携わりながらとてもたくさんの事を学び、現在に至っております。
常にユーザー目線での講習や制作を心がけることが信条です。
どうぞよろしくお願いいたします。- :表のメインの部分を定義するタグ