Web Text

個人で作っているサイトの制作メモとWeb関連の雑記

Webの勉強を始めるならブログも良いけど静的な1枚ページのサイトを作って見ては？

初心者のためのサイト制作

Webサイトの制作や、ブログの立ち上げをやってみたいけど、どこから始めれば良いか分からないという方は、多いのではないでしょうか？

私は全くの初心者で、初めてWebの世界に踏み込んだのがブログでした。

ブログを立ち上げると、カスタマイズ方法などを調べて、徐々にHTMLやCSSなどの知識が付いてくるのは間違いないのですが、知識が断片的になってしまい、全体像が見えてきません。

もし、これからWebを始めるなら、まずはHTMLとCSSで1枚の静的サイトを作ってみてはいかがでしょうか？

Webサイトの種類は大きく分けて2つ

Webサイトを作るといっても、その種類は様々です。

このはてなブログや、多くのブロガーが利用しているWordpressなどは、Web上でPHPなどのプログラムが動いていて、指定の場所に記事を入れれば、簡単にコンテンツをアップしていくことができます。

そしてアクセスしてきたユーザーに対して、その都度リクエストされたコンテンツを返していきます。

これがCMS(コンテンツ・マネージメント・システム)と呼ばれる、動的なサイトです。

対して、静的サイトは、HTMLとCSSがメインに構成されていて、アクセスしてきたユーザーに対して、そのページの内容をそのまま見せることになります。

そのため、動的サイトよりも静的サイトの方が読み込みが早くなる傾向にあります。

また、動的サイトを作るとなると、様々な知識が必要ですが、静的サイトなら最低限のHTMLとCSSの知識があれば、作っていくことができます。

1枚の静的サイトの制作から始めて見る理由

これからWebサイトを作っていきたいにしても、ブログを作っていきたいにしても、Webの基本はHTMLとCSSです。

1枚ページのサイトを完成させるには、この基本となる知識が全て必要です。

試行錯誤しながら、とにかく1枚ページの作成を初めて、完成する頃には、非常に多くの知識が身についていることでしょう。

私は、あまり全体像がわからないままにブログを始めてしまいましたが、ある時期に静的サイトを作ってから、これは早くやっておけばよかったと思いました。

これからWebで何か始めたいという方も、ブログは立ち上げたけど、仕組みがよくわからず、カスタマイズなどに苦労しているという方は、是非1度挑戦してみることをおすすめします。

1枚ページのWebサイトを作る手順

1枚のページでも、複数のページを持ったサイトでも、作成する手順は同じです。

ここからは、実際に1枚のページを作成していく手順についてみていきましょう。

サーバーとドメインを取得する

まず最初にやることは、コンテンツの置き場所であるサーバーと、そのサイトの住所となるドメインの取得です。

これは、月額料金を支払って契約する有料のレンタルサーバーを利用しても良いですし、まずは無料でレンタルできるサーバーを借りても構いません。

無料のレンタルサーバーの多くは、無料の代わりに広告スペースが入ってしまったり、期限があったりと、制約は多いですが練習用には問題ないでしょう。

ただ、これから本格的にサイトの作成や、Wordpressの立ち上げなどを考えている方は、有料のサーバーを契約してしまっても良いと思います。

ドメインに関しても同様で、レンタルサーバーに登録した際にもらえる無料のドメインを使っても良いですし、有料の独自ドメインを契約してしまっても構いません。

どちらも有料のものにしても、1年単位で考えると、月々の費用は1,000円程度なので、思い切って契約してしまっても良いでしょう。

HTMLとCSSを使ってコンテンツを作っていく

サーバーとドメインが用意できたら、早速コンテンツを作っていきます。

静的サイトを作るのに必要なのは、テキストエディターだけなので、誰でも環境を整えることができます。

テキストエディターは無料で高機能なものがいくつも用意されています。

  • Sublime Text
  • Bracket
  • Atom

などが有名ですが、私はAtomを使って書くことが多いです。

HTMLで構造を作りCSSで見た目を整える

HTMLとCSSの役割について簡単に解説すると、HTMLは、サイトの構造を作っていくもので、CSSは見た目を整えるものということになります。

HTMLで文章や画像の入った箱をいくつも用意して、それらを積み木のように順番に積んでいきます。

それらを左右に配置したり、大きさを変えたりして、みやすく見た目を変化させていくのがCSSです。

1枚のページをみやすく完成させようとすると、必然的にHTMLとCSSについて詳しくならなければなりません。

作成したファイルをFTPソフトを使ってサーバーにアップする

HTMLとCSSの2つのファイルができたら、その2つのファイルをFTPソフトを使って、サーバーにアップします。

取得したドメインにアクセスして、作ったサイトがブラウザに表示されれば完成です。

もちろん、完全に出来上がってからアップする必要はなく、HTMLとCSSファイルの作成途中にアップして、見た目を確認します。

そして修正→アップという過程を繰り返し、確認しながら完成を目指してコンテンツを作っていきます。

1枚ページの作成過程に必要な知識が全部詰まっている

1枚のページを作る過程を簡単に解説しましたが、どんなサイトを作るときでも、ほぼ同じ過程を辿ります。

1度この過程を経験しておくと、Webサイトの基本的な仕組みがわかるので、ブログのカスタマイズや、Wordpressでオリジナルテーマの作成など、どんどん応用していくことができます。

次回は、実際にHTMLとCSSファイルを作り、実際にアップする過程を記事にしたいと思います。