第4話

うぇぶひこ本気でWEBデザイナーモード!?ホームページ制作ができる環境を整えよう!

ホームページ制作効率UPする!便利なエディタ!

ホームページ制作に適したエディタを用意する

すごい、ここが「港町えくすぷろーら」か!
にぎわっているなー!

たくさんの商人が行き交い、「世界の入り口」と呼ばれるえくすぷろーら。
うぇぶひこのような若きWEBデザイナーたちにとっても、たくさんのクライアントに出会う機会も多く、
学びの場も多い場所である。

まずは、しっかりとWEBデザイナーとして足元を固める必要があるな。
そもそも母さんに編んでもらった「テキストエディタ」だけでは、心もとないな…
ちょっとお店に見に行ってみるか。

どこからかWEBデザイナーの声が降り注いできた

エディタにはどのようなものがあるのか?

有料、無料さまざなものが提供されています。

たとえばWindowのパソコンを利用している場合に、「メモ帳」を使ってHTMLやCSSを書くこともできますが、
ホームページ制作のための便利な機能がある専用のエディターを使ったほうが、効率よく高品質な制作を行うことが可能です。

筆者は無料で利用することができる「Adobe Brackets(アドビー ブラケッツ)」をオススメしております。
うぇぶひこの冒険においても、Adobe Bracketsでの環境を中心としながら物語は進んでいきます。

なお、HTMLやCSSの概念は他のエディターでも同じため、他のものでもうぇぶひこの冒険を楽しめますのでご安心ください。

うぇぶひこはホームページ制作がはかどる便利なエディタ「Adobe Brackets」を手に入れた。

あとは、いつでも仕事を受けられるようにトレーニングをしておかないとな。

サンプルサイト構築のためにフォルダーやファイルを準備する

さて、このあたりは誰もいないし集中できそうだな。
いくぞ…!

うぇぶひこは目にも止まらぬ速さでマウスを振り回し、サンプルフォルダーを準備した…!

サンプルサイトのフォルダー構成

Bracketsでサンプルフォルダーを開き、index.htmlの名称でファイルを新たに作り上げた…!

Bracketsにてindex.htmlを追加

どこからかWEBデザイナーの声が降り注いできた

ホームページのフォルダーやファイルの構成

ホームページ制作にあたって、ある程度のお約束のようなものはありますが、
絶対に守らなければいけないフォルダー構成というのはありません。

ただし、管理しやすくするという観点で、フォルダーに分けて整理しておきましょう。

今回は簡易的なフォルダー構成でサンプルサイトを仕上げていきます。
なお、「imgフォルダー」はホームページで利用する画像ファイルを格納し、
「cssフォルダー」にはCSS用のファイルを格納するために用意しました。

みなさんも、デスクトップに「sample」というフォルダーを作成し、
その中に同じような構成のフォルダーを作成してみてください。

なお、ホームページにおいて入口となるTOPページの役割を果たすのが「index.html」です。
基本的にはTOPページ用のHTMLはこの名前で作成すると覚えておきましょう。

かくして本格的な依頼を受ける前に、サンプルサイト制作のトレーニングをはじめた
本気でWEBデザイナーモードのうぇぶひこ。
次回も引き続き、この流れでサンプルサイト構築は完了するのか?
ゆけ、うぇぶひこ。
戦え、うぇぶひこ。

今回の補足

ホームページ制作に役立つエディタをいくつかご紹介

Adobe Brackets
PhotoshopやIllustratorを提供しているAdobeが無料で提供しているエディタ。
さまざまなプラグインも用意されており、筆者のお気に入り。
Atom
(アトム)
ソースコードを公開することができるWEBサービス「Github」が提供する無料のエディタ。
Sublime Text
(サブライムテキスト)
BracketsやAtomと同様に、こちらも有名なエディタ。ただし基本的には有料で使う前提のもの。

今回のまとめ

  • ホームページ制作には専用のエディタを利用するほうが便利
  • 制作にあたって、ホームページ用のフォルダーを準備する
  • TOPページ用のHTMLは「index.html」という名称で作成する

前後の冒険はこちら

中の人からのお知らせ