独学でもOK！自分でホームページを作るために何を勉強すればいいのか？
この記事では、ホームページを作れるようになるために必要なことを解説していきます。
誰かに教わってもいいですが、独学でも十分構築可能なので是非チャレンジしてみてください！
構築環境作り
ホームページを作るために必要なのは、エディターです。
このエディターと呼ばれるものは、Windowsのメモ帳、Macのテキストエディタで十分です。
ここにHTMLと呼ばれるマークアップ言語を書いていきます。
エディターによっては、HTMLの入力補助を行なってくれるものもあります。
例えば、VSCodeなどあります。
面倒くさい方は、上記のエディターをインストールすることをお勧めします。
自分で作りたいけど、コードは書きたくないという怠け者の皆さんは下記のプラットフォームにて制作することをお勧めします。
尚、下記のようなプラットフォームで制作しても、スキルはつきません。
さまざまなホームページ構築プラットフォーム
ホームページを構築する際に最適な場所の1つは、ホームページ構築プラットフォームです。
これらのプラットフォームは、ホームページ構築プロセスをより簡単に、より効率的にする様々なユーザーフレンドリーなツールを提供します。
人気のサービスは、Wix、Weebly、Squarespace、およびWordPressなどがあります。
これらのプラットフォームの多くは構築プロセスを理解するために有用なチュートリアルやビデオを提供しています。
簡単に作れて、スキルも身につけたい
そんなに都合の良い話はねぇよ
HTMLとCSSの基礎
ホームページ制作の次のステップは、HTMLやCSSといったマークアップ言語の基礎を学ぶことです。
HTMLはHyperText Markup Languageの略で、ホームページの構造を作成するために使用されます。
CSSはCascading Style Sheetsの略で、ホームページのスタイルを定義するために使用されます。
この2つの言語は密接に連携しており、一般的にホームページを作る上で欠かせないものです。
HTMLとCSSはプログラミング言語ではありませんので、誤った記述であっても普通に表示されます。
そのため、初心者の方はとりあえずコード打ってみて、内容がどう変化したのか確かめながら行なってください。
HTMLへの記述
メモ帳で新規にドキュメントを制作後、以下のコードをコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>説明すると長くなるので、とりあえず魔法の呪文ってことで覚えておいてください。
※参考書などで「魔法の呪文」と書かれている部分がありますが、きちんと意味を理解するのが重要です。
ここまで書いたら、「index.html」というファイル名で保存します。
indexというファイル名は、ディレクトリ内でのトップページを意味します。
サーバーへのアップロードが完了すると、ドメイン(ウェブの住所のようなもの)でアクセスした際にindex.htmlが最優先で表示されます。
titleの記述
<title>〜</title>の中に、そのページのタイトルを入力します。
例えば・・・
<title>ゆうすけのホームページ</title>などです。
bodyの記述
<body>〜</body>の中にHTMLタグを追加していきます。
HTMLタグはそれぞれ意味があり、<h1>タグは新聞でいう大見出し、<p>は段落などです。
それぞれのタグの意味はググるなり、参考書を買うなりして覚えていきましょう。
参考サイトを貼っておきます。
全部英語だと難しく感じる・・・
CSSの記述
CSS(Cascading Style Sheets)は名前の通り、スタイルを変更するのに必要です。
例えば、文字の色を赤にするとか、文字の大きさを変更するとかです。
一般的に規模が大きくなることを考慮し、外部のファイルとして作成しますが、今回はHTMLに直書きします。
<head></head>タグの中に、CSSを書きます。
<head>
<style>
body{
color: red;
}
</style>
</head>CSSは通常、セレクター(上記の場合はbody)に対して記述を行なっていきます。
今回の場合は、「body」の「文字色」を「赤」にするという意味です。
このようにCSSを追加することで、オリジナルの見た目を作成できます。
ちょっと暗い赤とかどうすればいいの？
そういう場合は16進数で指定するんだ。
例えば#CC0000とかね。
高度な開発
HTMLやCSS言語の基本を理解した後は、データベース管理やサーバーサイドプログラミングなど、より高度なコンセプトを探求することができます。
例えば、PHPやRubyなどのスクリプト言語を使って動的なホームページを作成する方法、MySQLやSQLiteなどのデータベース管理システムを使ってホームページのデータを保存する方法などを学ぶことができます。
こういった技術を学ぶことによって、動的なホームページの作成が可能です。
例えば、Javascriptを学ぶことで複雑なアニメーションや非同期処理などが扱えるようになります。
PHPなどのプログラミング言語を学ぶことで、お問い合わせフォームなどが作れるようになり、
MySQLを学ぶことで、データベースが使えるようになりますので大規模なサイト構築を行うことができます。
どちらもプログラミング言語となりますので、HTMLと異なり、間違った記述があれば一切動きません。
開発環境を整えるのも面倒ですので、初心者の方は一通り作れるようになった段階で、次のステップにすることをお勧めします。
初心者におすすめ
| HTML | マークアップ言語 ホームページの制作に必要 |
|---|---|
| Javascript | スクリプト言語 クリック時のイベント処理などに必要 |
| PHP | スクリプト言語 お問い合わせフォームなどが作れる |
| SQL | データベース言語 データベースへのアクセスを操作が行える |
様々な言語を使ってホームページを作成できます。
サーバー選び
個人利用において無料で使えるサーバーはいくつかあります。
しかし、そういったサーバーは開発者向きが多く、初心者ではハードルが高いため今回は一般的なレンタルサーバーをご紹介します。
Xfree (おすすめ！)
スターサーバーフリー
サーバーのアカウントを取得したら、FTPというプロトコルを用いて制作したファイルをアップロードします。
FTPを利用するために、コマンドを用いて操作することも可能ですが、FTPソフトを用いることで簡単に操作が行えます。
FTPソフト
APIによるサイトの拡張
プログラミング言語を用いた開発は、小規模であっても初心者では難しいところがありますが、
APIを追加することで、HTMLのみで作成したホームページであっても多くの機能がつけられます。
完全に自由というわけではありませんが、必要最低限の機能を簡単に設置できます。
APIは、ホームページに追加することで、より多くの機能や特徴を持たせることができるコードの断片です。
例えば、ブログプラグインを追加してブログを簡単に更新できるようにしたり、Eコマースアドオンを追加してホームページにショップを追加できるようにしたりすることができます。
まとめ
ホームページの作成は、最初は難しく感じるかもしれませんが、適切なツールと知識があれば、実現可能です。
少しの忍耐と献身で、あなたは一生使えるスキルが身に付きます。
時間をかけて、必要な知識を身につけ、あなたが思い描いた通りの外観と機能を持つホームページを作成できるようにしましょう。