1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerで見出しタグを設置する方法

KompoZerで見出しタグを設置する方法

コンテンツには話題ごとに小見出しを表す「見出しタグ」を設置した方が読みやすくなります。見出しタグを設置する時のポイントや、Kompozerで見出しタグを設置する方法などを解説。

  • 2016/8/6
  • 2012/1/15

ページ内の見出しはページの構造の整理をして、コンテンツを明示的に区分けする時に使います。
例えばある製品について書かれたページの中には、製品の機能説明や使い方の一例、スペック一覧、実際に使っている人のレビューなど、いろいろなコンテンツが考えられます。

それらのコンテンツをただ「だらっと」並べても良いですが、各項目に見出しをつける事で、視覚的にも文書の構造としても明示的に区分けする事ができ、見やすく/分かりやすくなるという効果があります。
また段落にインデントを設ける事で、区分けしたコンテンツの内容にメリハリを付ける事ができますので、見やすく読みやすくする事ができます。

見出しタグを設定する箇所

見出し部分は<hx>タグを使ってマークアップしますが、ただ漠然と設定しておけば良いという訳ではありません。ある程度コンテンツの大きなまとまりごとに設定するのが正しい設置方法です。
見出しにした部分だけを抜き出して並べてみて、ページの流れがスムースであれば問題はないと思います。

一応見出しタグは<h1>〜<h6>までありますが、どんなに多くとも<h3>くらいまでしか使わないと思います。
もし<h4>を使っていたら、本当にコンテンツのまとまりとして正しいのかどうかチェックしてみると良いと思います。

見出しタグを設定する際に気をつける事

見出しの数字がページの上から順番になるように設置しなくてはいけません。
例えば、<h2>の後には<h3>を配置しても良いですが<h4>の配置は間違っています。
ただ<h3>の後に<h2>は大丈夫です。
つまりその数字の前後1つ増減した数字ならば大丈夫という事です。

また<h2>〜<h6>はページ中に複数個あっても大丈夫ですが、<h1>はページの中に1カ所のみしか配置してはいけません。
これは<h1>がページの内容を示す大見出しとしての役割だからです。

KompoZerで見出しの設定をする方法

まず見出しを設定したい箇所のテキストをドラッグして選択します。
次にツールバーにあるプルダウンメニューから、設定したい見出しを選択するだけです。

インデントの設定をする方法

段落の中で引用をしている部分など、他の文章とは違うという事を明示的に示す時にインデントを使います。インデントも設定をしたい部分をドラッグで選択して、ツールバーのインデント追加ボタンを押すだけです。

ちなみにKompoZerの場合、インデントを追加した箇所は左側に40ピクセルの余白が設定されます。

この余白をもう少し小さくしたい場合などは、ソースモードに切り替えて「margin-left:40px」と書かれている部分の数字を小さくすればOKです。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします