HTMLでホームページを作成するのに役立つツール紹介

上記の広告は、30日以上更新がないブログに表示されています。
新たに記事を投稿することで、広告を消すことができます。  

ここではホームページを作成するなら、持っていると役に立つツールなどを紹介していこうと考えています。
私はいくつかホームページを運営していますが、これがあったから便利だったというアイテムを具体的に載せていきます。

このホームページではゼロからホームページを作成する人に役に立つ機能を紹介していく感じになるかと思いますが、
まず始めに言うと、ゼロからのホームページ作成は面倒だし、大変です。
私は勉強を兼ねて試行錯誤しながらホームページを作成しているので、正直時間に余裕があります。

私のように時間をかけられる場合や、ホームページ知識を深めたいという場合には、ゼロからの作成はとても実りあるものになると思いますが、
もし、「時間はかけられない。」「試行錯誤なんてやってる場合じゃない。」「とにかくホームページ運営を開始したいんだ！」という状況ならば、ホームページ作成システムの利用をお勧めします。

ホームページ作成システムは、ホームページ作成のための機能が大まかにそろったシステムで、利用しながら設定していくと簡単にホームページを作成できます。
主な作業は記事内容とデザインなので、集中して取りかかることができ、完成までの作業時間も短くて済みます。

なので、いち早くホームページが欲しい人や、ホームページ作成に時間をかけられない方はそちらのシステムの利用を考えてみてはいかがでしょうか。
  

HTML文書を書くなら、サクラエディタがおすすめです。
私はサクラエディタを利用してHTML文書を書いています。

Windowsにデフォルトで入っているメモ帳でも構わないんですが、サクラエディタを利用する、タグがカラー表示になるので便利です。

サクラエディタではタグのアルファベットが青色で表示されます。
タグを半角で入力するのを忘れたり、タグのスペルミスをしていると色がつかないので、間違えたときにわかりやすいです。

タグ内の項目の「”」ではさまれる内容部分は茶色で、「’」の内容は水色のような色です。
URLはアンダーバーに青色で、クリックするとURL先を表示したブラウザが開きます。
コメントで非表示になっている文字は緑色で表示されます。


マウスなどで文字の選択範囲を決めるとの行数や、文字数も一目でわかります。

サクラエディタを利用する際に設定しておくと便利な事を紹介します。

まずはタブの有効化です。
サクラエディタは初期設定では、各ファイルが別ウィンドウで表示されます。
しかし、コーディングする際にはいくつものHTML文書を開くことになりますので、全て別ウィンドウだと作業が非常にしづらくなります。
なので、タブを開けるように設定しましょう。

まずサクラエディタを起動します。
そして上部のメニューから「設定」をクリックし、「共通設定」をクリックします。
「タブバー」と書かれたメニューをクリックし、「タブを表示する」というチェックボックスにチェックを入れます。
これでタブ表示されるようになります。

また、同じく共通設定内にある「ファイル」をクリックし、「自動的に保存する」に項目を設定しておくと、便利です。
コーディング中に万が一サクラエディタがフリーズした場合、自動的にバックアップしておけばひと安心です。


サクラエディタは無料のアプリケーションなので、是非利用してみてください。  

ホームページはデータをサーバに転送しなくてはいけません。
その際に利用するのがファイル転送するためのFTPソフトです。
私は「FileZilla」をおすすめします。

FileZillaは世界中のホームページ制作のプロフェッショナルや、プログラマーが利用しているFTPソフトです。
もちろん日本語にも対応しています。
多くの人が利用している分、説明しているサイトも多く存在しているので安心です。

FileZillaは無料でダウンロードできますので、ぜひ利用してみてください。

FileZillaを利用する前に、用意するものがあります。
それはまず、ホームページのHTML文書や画像をまとめているファイルです。

そしてサーバーに登録した際に提供されるFTPユーザー名、FTPホスト名、FTPパスワードを確認します。
この情報はサーバにアクセスするために必要なのでメモしておくか、直ぐに確認できる状態にしておきましょう。

もし、わからない場合は、サーバの管理画面にアクセスし、FTPと書かれている管理項目を探してみてください。
あるいは、サーバへの登録が完了した際に、サービス会社からメールが届いでいるかと思います。
そのメールにFTPに関する情報が載っている場合もあります。

それらが揃った時点で準備完了です。


FileZillaのアプリケーションを開きましょう。
ファイルを開き、サイトマネージャーをクリックします。

出てきた入力パネルの「ホスト」の入力欄にFTPホスト名を入力します。
「プロトコル」は「FTPファイル転送プロトコル」にします。
「ログオンの種類」は「パスワードを尋ねる」にします。
「ユーザ」にFTPユーザー名を入力します。

右下にある「接続」ボタンをクリックします。

ポップアップの入力欄が出てきますので、そこにFTPパスワードを入力します。
以上でサーバへの接続は終了です。

FileZillaの中央右側に表示されているのが、サーバ内の情報です。
左側のパネルは、利用者のパソコンのデータが表示されます。

左側のパネルを操作し、ホームページのHTML文書や画像をまとめているファイルを選択します。
ファイルをドラッグアンドドロップし、サーバに転送すれば作業は完了です。  

ホームページには画像は欠かせない存在です。
適切な画像をホームページに取り入れることで、訪問者は内容が理解しやすくなるでしょう。
また、ホームページの印象を左右するのも画像にかかっていると思います。
画像の与える印象はとても大きい物でしょう。

画像はネットで入手することも出来ます。
イラストなども今は無料で提供しているサイトもたくさんありますね。

しかし、施設の様子やスタッフの紹介など、ネットでは手に入れることが出来ない画像は、どうしても自分たちで用意する必要があります。
この際だからプロカメラマンにお願いしよう。そういった考え方もありですが、何かの時のために画像加工ソフトはあった方が安心です。
写真を追加する度に、プロカメラマンンに依頼することは負担が大きいでしょう。

撮影した写真をそのまま載せてもいいじゃないか。
そう思われるかもしれませんが、ちょっと一工夫するだけで写真の印象はぐっと変わります。
さらに画像加工ソフトを利用することで、写真内に文字を入れたり、額縁のように枠を作成したりなど、様々なアレンジを加えることが出来るようになるのです。

例えば、白がメインで優しい感じのホームページに、施設内の写真を載せるとします。
この時、そのまま載せてしまうのではなく、若干ぼかしてコントラストを落とし、柔らかな印象の写真に仕上げて載せることが出来れば、ホームページの印象を壊すことがありません。

反対にコントラストが強いはっきりとした画像を載せてしまうと、ホームページの優しい印象が台無しになってしまうかもしれないのです。

加工してホームページの印象に合わせた画像を用意することはとても重要な事なのです。

私が利用している画像加工ソフトはPhotoshopです。
これは非常に優秀な画像加工ソフトでプロも利用しているソフトですが、残念ながら無料ではありません。
頻繁に利用しないのであれば、お金を払うのはもったいないでしょう。
また、プロも利用するほど豊富な機能であるため、使いこなすには時間がかかります。

調べたところ、無料の画像加工ソフトがいくつかあるようなので、そういったものを利用してみるのはどうでしょうか。
「画像加工ソフト　おすすめ」で検索したところ、紹介サイトがいくつもでているようですので、そういった中から選択するのが良いと思います。  

ホームページのコーディングをする際に利用するブラウザは、Firefoxがおすすめです。
Firefoxとは、Mozilla Foundationが開発したオープンソースのウェブブラウザです。

IE（インターネットエクスプローラー）と異なる点はオープンソースであることです。
オープンソースとは、個人が自由にコードを書き換えたりシェアをすることが許されている状態のことを指します。、

使いやすくて自由度が高いという特長があります。
安全で最新のウェブ標準に対応していることも人気の理由のひとつです。

さまざまな機能拡張を利用することによって、自由に機能を追加することができるようになっていることがポイントです。

コーディングを行うのであればぜひ、Firebugというブラグインを入れてください。
これを利用することで表示されているWebページのHTMLを表示するだけでなく、Webページ上の一部に対するHTMLやCSS、全体のCSSのチェックなども行うことが出来ます。
HTMLやCSSの一時的な変更もできますので、コーディングを楽に行うことが出来ます。

Firebugの入手方法ですが、まず、Firefoxのブラウザをダウンロードする必要があります。
ブラウザがダウンロードできたら、ブラウザを開きます。
Firefoxはキツネが青い球体を覆っているようなデザインのアイコンです。

まずブラウザを起動したら、右端にある三本ラインのアイコンをクリックします。
プルダウンでメニューが表示されますので、その中にある「アドオン」をクリックします。
画面が変わりますので、画面内にある検索バー（アドオンを検索します）に「Firebug」と入力して検索します。

テントウムシのマークのFirebugというアドオンが表示されますので、それをインストールします。

これでFirefoxブラウザでFirebugを利用することが出来るようになります。

コーディングをする際にはこの機能を頻繁に利用しますので、ツールバーに常に表示させておくと便利です。
先ほどのブラウザ右端にある三本ラインのアイコンをクリックします。

下部にあるカスタマイズをクリックします。
追加のツールと機能の中にあるFirebugをクリックしながら、三本ラインのアイコンの横にある点線の枠内に持っていきます。
最後に右下の「カスタマイズを終了する」をクリックして完了です。