1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZer - 3つのHTML編集モード

KompoZer – 3つのHTML編集モード

目次1 3種類の編集モード1.1 デザインモード1.2 分割モード1.3 HTMLモード2 おすすめの編集モード3 他のモードへの切り替え3.1 表示メニューか […]

  • 2015/7/25
  • 2011/10/23

3種類の編集モード

KompoZerには「デザインモード」「分割モード」「HTMLモード」の3種類のHTML編集モードがあります。
まずはそれぞれのモードの特徴を見てみましょう。

デザインモード

デザインモード

実際にブラウザで表示される画面を見ながらHTMLページを編集するモードです。比較的直感的にHTMLページを編集する事ができますので、ビギナーの方でも作業がしやすいモードです。
ただブラウザではレイアウトが正常でも、KompoZerのデザインモードでは崩れてしまう場合がありますので、最終的にはブラウザでの動作確認は必須です。

分割モード

分割モード

デザインモードのプレビュー画面とHTMLモードのソースコードを上下に分割して表示・編集するモードです。直感的に操作する場所を選択して、細かい修正などはHTMLを操作する場合などには便利です。
特にKompoZerの場合はデザインビューで選択した部分のソースコードだけが表示されますので、編集時にも分かりやすいと思います。

HTMLモード

HTMLモード

HTMLのソースコードを直接編集するモードですので、HTMLを理解している必要があります。しかし前述の2つのモードでは>head<セクションを直接編集する事が難しいので、Google Analyticsのトラッキングコードなどを埋め込む作業はHTMLモードを使った方が便利です。

おすすめの編集モード

KompoZerでホームページを作成する時にお薦めしたい編集モードは「分割モード」です。

画面右下で変更できるビュータイプを「通常」ではなく「プレビュー」にしておく事で実際にブラウザで見た時と同じ状態を見ながら、HTMLソースレベルで細かい編集ができるからです。

デザインモードで作業をすると、予期していない部分で改行や段落が入ってしまったりしますし、HTMLモードではソースコードを見て頭の中でプレビュー画面が出てくる人ではないとキツいです。

その両方の良いところだけを取り入れたのが「分割モード」ですので、多少のHTMLの知識は必要ですが元々HTMLはそれほど難しいものではありませんので、ぜひチャレンジしてみてください。

他のモードへの切り替え

KompoZerを起動したばかりの時はデザインモードでページが開きます。他のモードへ切り替えをしたい場合はどのように行えばよいのでしょうか。

HTMLソースモードへの切り替えを例にして、他のモードに切り替える方法をご紹介します。

表示メニューから「HTMLソース」を選ぶ

「表示」メニューから変更したいモードを選択して表示を切り替える方法です。

メインウィンドウ下のタブから「ソース」を選ぶ

メインウィンドウの左下にはモードを切り替えるためのタブが用意されています。切り替えたいモードを選択すると表示が切り替わります。

HTMLモードを使用するのはどんなとき？

基本的にHTMLモードだけでページの作成や編集をする事もできますが、普通はデザインモードや分割モードでの編集作業がメインになると思います。では他のモードを使っている場合でどんな時にHTMLモードを使用する機会があるのでしょうか。

ページタイトルやページの説明（meta description）などはページプロパティで編集ができますので、それ以外のコードを埋め込む場合という事になります。代表的なものとしては以下のような場合が考えられます。

  • Google Analyticsのトラッキングコードを埋め込むとき
  • Google+のボタンをページ上に配置するとき
  • ウェブマスターツールのサイト認証を行うとき

他にも利用するサービスなどで「<head>セクションにこのコードを貼り付けてください」といった指示があった場合に、HTMLモードを使って埋め込む事になります。

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

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

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

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

Webスク（6か月のガッチリ型）

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

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

WebCamp（1か月の集中型）

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

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

CodeCamp（2〜6か月のカスタマイズ型）

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

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

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

▲