独学で１からホームページ制作するための準備〜超初心者編〜

ホームページ制作を独学で１から学びたい人のために、今回、ホームページ制作するにあたって準備すべきこと、学ぶべきことをご紹介いたします。

ホームページ制作に必要な環境
- 1番にパソコンは当たり前
- ホームページ制作に使うエディター
ホームページ制作で学ぶべき物
ホームページ制作を理解するには実践あるのみ！

ホームページ制作に必要な環境

1番にパソコンは当たり前

ホームページ制作で必要な環境は、何言ってもパソコンが必要になります。

それだけあればとりあえず問題ありません。ホームページ制作を行っている方は、最近では大半がMacを使っていることが多いです。

見た目のオシャレさやマウスパッドの操作性、パソコンの起動の速さもありますが、一番にエンジニアの方がWebのシステム開発をする際に、Macで使っているOSがUNIXを改良して作られたOSなので、標準でシェルコマンドが使えるのが一番の理由になります。私も元々エンジニアなので使っている理由はここですね。

しかし、ホームページ制作のみを行う人が使う理由としては、シェルコマンドは殆ど使わないためその理由というよりかは、一番にフォントが綺麗というところとRetinaディスプレイで高画質なため、デザインがよりキレイに見える部分に惹かれて使っている人が多いようですね。

あとはカッコいいからの理由が多そうです。

ホームページ制作に使うエディター

パソコンが用意できたら、次にホームページを作るためのエディターが必要になります。

エディターと言っても、ホームページビルダーのようなWebオーサリングツールではありません。

この後説明するホームページを作るために、ソースコードというホームページを生成するために必要な文字／文章を書くために使用する、いわゆるテキストエディターのようなものです。

ホームページ制作に便利なエディターは、以下のようなものがあります。

Atom（アトム）
Brackets（ブラケッツ）
Coda（コーダー）
Sublime Text（サブライムテキスト）

どのエディターもオススメで、自分に合ったエディターを見つけるのも良いと思いますが、私が使っているのは一番上の「Atom」というエディターを使っています。

なぜこのエディターを使うかというと、無料ということもありますが、ホームページを作るために必要なHTMLソースの補完機能だけでなく、ホームページのスタイルを定義するCSS、ホームページのアニメーションを定義するJavascript（ジャバスクリプト）、それ以外のシステム開発で使う言語の補完機能が、必要に応じて自由に追加して使いやすいエディターに出来るというところが良くて、このエディターを使っています。

よく分からないと思う方は、とりあえずAtomを使っておけば問題ありません。

とりあえず、ここまで準備できれば後はホームページ制作の方法を学ぶだけです。

ホームページ制作で学ぶべき物

HTMLソースの書き方

一番に覚えなければならないのが、ホームページを生成するHTMLソースの書き方になります。

ホームページは、htmlという形式のテキストファイルでできていて、以下のような枠組みを定義することで最低限の文字の表示までと検索結果の操作までができます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <meta content="ここにページの内容を要約したものを記述する" name="description">
</head>

<body>
  コンテンツ
</body>

</html>

一つ一つの意味については、独自に調べて欲しいと思いますが、<head>〜</head>と囲まれたところがこのページの設定部分だと思って下さい。

例えば、<meta charset="UTF-8">と書かれている部分は、このページの文字コードはutf-8ですというものになります。昔はよく日本語はshift-jisなどを使っていましたが、今はutf-8が推奨になっているので特に気にせずutf-8と書いておけば問題ありません。

<title>タイトル</title>という部分は、このページのタイトルになります。検索したときに表示される下の赤枠部分がタイトルになります。

ちなみに<meta content="〜" name="description">は、上記のタイトル下の説明文になります。

ページ内の作成は、<body>〜</body>の中に記載していきます。

ここに文章を書いていけば、文字だけの日記は作成できると思います。しかし、改行する場合は、ただエンターを押して改行しただけではホームページ上反映されず、<br>のタグ（HTMLソースで書く１つ１つの命令をタグという）書く必要があります。

HTMLタグはたくさんあるので、一つ一つ調べてどのようなものがあるか事前に把握する必要があります。

CSSの書き方

HTMLソース（タグ）についてある程度理解したら、CSSの書き方を学ぶ必要があります。

CSSはホームページのスタイルにあたり、オシャレなデザインのサイトを作るには必ず覚える必要があります。

先程、作成したhtmlの中の<head>〜</head>タグ内に

<link rel="stylesheet" type="text/css" href="./style.css"  />

を記載して、htmlファイルを作った中にstyle.cssというファイルを作成します。こちらもAtomで開けば自由にテキストを書くことができ補完してくれます。

CSSファイルの中に自分がどのタグに対して、どのようなスタイルにするかを定義することでスタイル調整することができます。

例えば、CSSファイルの中に以下のような定義を書くことで、ページ内のすべての文字は白色になり、ページの背景は黒色になります。

body{
  color: white;
  background-color: black;
}

タグは直接的に定義してもいいですし、タグにidやclassをふることで特定のタグに対してのみスタイルを当てることができます。

例えば、divタグに対してふったときはこんな感じです。
<div id="testId" class="test-id">〜</div>

idはページ内で１つの場所のみにスタイルを掛けるときに定義します。classは複数にスタイルを掛ける場合に使います。

文字を部分的に赤にしたい場合は、classで赤文字になるスタイルを１つ定義し、文字を変えたい部分にタグで囲みそこに赤文字スタイルを定義したclassをふることで、１つのスタイルの定義で複数の箇所を変えることができます。

イメージがつきにくいと思いますので、この辺りも一つ一つ学ぶようにしてみて下さい。理解したら色んなことが出来るようになりますので、楽しくなってくるかと思います。

javascriptの書き方

HTMLソースとCSSソースを書くことが出来るが、実はホームページ制作者の中にはこのJavascriptが使えない人が日本ではたくさんいます。

このJavascriptをマスターすると、ホームページ内で自由にアニメーションさせることができ、面白い仕組みをどんどん作り出すことができますので、もしホームページ制作をするならこちらも覚えてみると良いと思います。

JavascriptはHTMLの定義方法や、CSSの定義と全く異なり、プログラミングの知識が必要になります。

説明しているととても長くなってしまうので省きますが、是非、やってみるならこちらにもトライしてみると良いかと思います。

Bootstrapなどのフレームワークを学ぶ

基本を覚えてきたなら、Bootstrapというホームページをパソコン、スマートフォンなどのあらゆる端末で見ても良い感じにしてくれるCSSが事前に定義されているフレームワークを学んでみると良いです。

最近のホームページ制作では、何かしらのフレームワークを使用して効率的にホームページ制作を行っています。

そうしないと、年々増している様々なデバイスやオシャレな動きがたくさんあるサイトを作るには膨大な時間が掛かってしまいます。

はじめての方は、まずは、現在メジャーになっているBootstrap4などを学んでおけば良いと思います。

Javascriptのプラグインの使い方を学ぶ

Javascriptのアニメーション構築も、実は世の中に既に作られたものが多くあり、それがプラグインという形で無償／有料で提供されています。

何処かのサイトを参考にこんなアニメーションを入れたいと思ったら、まずはプラグイン探しからしてみることをオススメします。

プラグインを組み合わせて作れば、大抵のアニメーションを作ることができ、javascriptが全くわからない人でも素敵なホームページを作ることができます。

ホームページ制作を理解するには実践あるのみ！

学ぶ必要があるものが理解できたら、とりあえず作りたい目的のものを決めて、実践あるのみになります。

ホームページ作成は、簡単にするためのツールやCMSといわれる既にホームページが出来上がったものがたくさんあり、これを使えば、何も勉強せずに作れてしまいます。

しかし、１から作ることをしてみたい人には、まずはCMS等を使わずにある程度ホームページ制作の基礎を学んで、そこから簡単に作れるCMSに移ったほうが良いと思います。

そうすることによって、デザインの変更や、好きなアニメーションの導入が簡単にできるようになり、より自分好みのホームページを作ることができます。

また、時間を掛けて作ったホームページには愛着も湧いてくるので、更にホームページ制作の楽しさがわかってくるかと思います。

今回、ホームページ制作することだけに注目して説明してきましたが、ホームページを作ったらインターネット上でみることが出来るようにするための準備などもありますので、それはまた次のタイミングで説明します。

BLOGブログ