1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerの基本機能とツールバーの使い方

KompoZerの基本機能とツールバーの使い方

実際にホームページを作り始める前に、KompoZerの基本機能を確認しておきましょう。 メニューバー(ファイルメニューや編集メニュー)からは、KompoZerの […]

  • 2015/7/25
  • 2011/10/2

実際にホームページを作り始める前に、KompoZerの基本機能を確認しておきましょう。

メニューバー(ファイルメニューや編集メニュー)からは、KompoZerのすべての機能にアクセスする事ができ、そのうちよく使う項目がツールバーにまとめられています。
KompoZerで開いたHTMLファイルはタブで管理できますので、たくさんのファイルを開いてもウィンドウだらけになってしまうような事はありません。

また、メインウィンドウの下には「デザイン」「分割」「ソース」という3つのタブがあり、このタブを使ってメインウィンドウの内容を変更する事ができます。

基本的なツールバーの機能

ここではツールバーの機能でも基本的な機能の解説をします。その他の機能も、ホームページを作る上で頻繁に利用しますが、この後のページで順に詳しく解説します。

kompozer_basic_1

  1. 新規作成
    新しいHTMLファイルを作成する時に使います。
  2. 開く
    すでに保存されているHTMLファイルを開く時に使います。
  3. 保存
    現在編集中のHTMLファイルを保存する時に使います。また保存する時に、ページのタイトルを設定していない場合は、タイトルの設定ウィンドウが開きます。後から編集する事もできますので、とにかくページの内容が分かるようなタイトルを付けておきましょう。
  4. 公開
    保存したHTMLファイルをサーバーにアップロードして公開します。公開するにはサイトの設定やサーバーの設定をする必要がありますが、この機能については後ほど詳しく解説します。
  5. 閲覧
    現在作成しているHTMLファイルを、ブラウザを使ってプレビュー表示します。プレビューに使われるブラウザは、それぞれの環境でのデフォルトブラウザです。
  6. 文字の装飾機能
    メインウィンドウに入力した文字を見出しに変更したり、太字にしたり文字の色を変更したりする事ができます。

新しいファイルを作って文章を入力してみましょう

さっそく新しいHTMLファイルを作って文章の入力と装飾をしてみましょう。その後で作成したファイルを保存するところまでやってみて、KompoZerの操作に慣れましょう。

KompoZerを起動すると、すでに新しいHTMLファイルを開いている状態です。
適当に文字を入力していろいろとやってみましょう。

文章の一部を見出しにしてみる

見出しとはHTMLの構造の中で、重要な部分に設定するものです。見出しにしたい行を選んでプルダウンからどの見出しにするかを選ぶだけです。

見出しには1〜6まであり、数字が若い方がより大きな見出しになります。見出し1がページ全体の内容を示す大見出し、見出し2と見出し3がそれぞれ中見出し、小見出しといった感じで考えれば良いと思います。
見出し4以降を使っても構いませんが、一般的にはそこまで細かくする必要はないと思います。

文字の色を変えてみる

色を変えたい部分をドラッグして選択して文字色の選択のアイコンをクリックすると、カラーパレットが開きますので好きな色を選びましょう。これだけで文字の色を変える事ができます。
またハイライト文字色の選択アイコンをクリックすると、選択した文字の背景だけを選択した色にする事もできます。

文字の大きさを変えてみる

文字を選択して、Aに上向きの矢印が付いたアイコンをクリックすると文字を大きくできます。逆に下向きの矢印の付いたアイコンをクリックすると文字を小さくできます。

文字の入力と装飾はワープロソフトのような感じで出来ますので、マイクロソフトワードなどを使った事がある人ならそれほど迷うような事はないと思います。

作成したHTMLファイルの保存

最後に今作成したHTMLファイルを保存してみましょう。
保存はツールバーの保存アイコンをクリックするか、Ctrl+S(Macはcommand+S)で保存する事ができます。

ページのタイトルタグが設置されていないと、下のようにページタイトルを入力するウィンドウが開きます。

タイトルの保存ダイアログ

ページタイトルは検索エンジンの検索結果などにも表示される重要なタグですので、ページの内容を端的に表した文章を設定しておきましょう。文字数は30文字程度が最適です。
もちろん後から修正する事もできますので、ここでは仮のタイトルとして「テスト」と入力しておきます。

次に保存する場所と保存するファイル名を設定します。

保存する場所はどこでも自分の分かりやすい場所で構いません。またファイル名は先ほどのタイトルと違って、そのHTMLそのものの名前です。(index.htmlとかの事です。無用のトラブルを避けるために、英数字で小文字の名前を付けるようにしてください

ここではファイル名は「test.html」としてデスクトップに保存しました。

ファイルの保存ダイアログ

とりあえず新規ファイルの作成から文章の入力と装飾、ファイルの保存まで確認しましたが、まだまだKompoZerの機能は豊富にあります。

もちろんこの後で詳しく解説していきますが、とりあえずいろいろと触ってみて、何となくでも各機能を理解しておけば、これから先の作業もやりやすくなりますので、いろいろと試してみてください。

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

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

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

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

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

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

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

WebCamp(1か月の集中型)

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

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

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

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

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

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