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の実践的なスキルを身につけられるスクールをご紹介します。

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

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

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

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

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

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

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

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

▲