予算の少ない個人事業主の方へ。自力でホームページを作るための最短学習法

ホームページを自力で作成したいと考えている方に向けて、最低限必要な基礎知識を最短で学ぶ方法についてご紹介します。

ホームページとは

ホームページとはネット上にある文書のことです。文書の書き方にはルールがあって、それをまとめたものがHTMLとCSSです。

入力した文字や画像を配置・装飾していくという点では、ワードの文書作成と全く同じ流れです。このとき、入力した文字や画像にはHTMLのルールが適用され、配置・装飾にはCSSのルールが適用されます。

ちなみにHTMLで配置・装飾をすることは規則違反になります。罰則はありませんがくれぐれも気を付けましょう。

必要なもの

  • パソコン
  • HTML
  • CSS(Bootstrap)
  • 文書作成ソフト(エディタ)
  • FTPソフト
  • 画像編集・圧縮ソフト
  • アクセス解析ツール(任意)
  • ドメイン
  • サーバー

参考記事:
ホームページ公開への第一歩。ドメインとサーバーの準備方法とおすすめ業者の紹介

HTMLとCSSのルールを覚える

とにかくまずはルールを覚えることからです。
そこでおすすめしたいのが初心者向けの無料動画学習サイト「ドットインストール」です。まずは下の2つの動画をそれぞれ2周見てください。

学習のポイントは、実際に自分の手を動かして書いてみることです。エディタについても動画の中で紹介されています。標準のメモ帳では力不足なので、ぜひ手に入れておいてください。個人的にはSublime Textがおすすめです。

2周見終わったら次の動画で腕試しをしてみましょう。

最後に次の動画を2周見たらひとまず学習はおしまいです。

BootstrapとはCSSのルールセットのようなものです。これを使えば一からCSSを書く必要がほぼ無くなります。スマートフォンへの対応も楽に行えます。スマートフォンに対応させる仕組みを詳しく知りたい方は、以下の動画が参考になります。

内容を決めて実際に作ってみる

まずは1ページだけでいいのでBootstrap4を使ってできるところまで作ってみましょう。内容を決めるにあたっては以下の記事も参考になるはずです。

参考記事:
ホームページを作成する前にやっておくべき集客効果を高める5つの下準備

間違えてもいいのでとにかく書いてみてください。頭に入れたことを一旦外に出すことが目的です。分からなかったところは改めて動画を見直しましょう。さっと確認したいときは、次のような早見表が便利です。

参考リンク:
HTMLクイックリファレンス

FTPソフトでサーバーにアップする

インターネットで見られるようにするにはサーバーへのアップロードが必要です。そのアップロード作業をマウス操作で簡単に行えるようにしてくれるのがFTPソフトです。おすすめはFileZillaです。最新の「FileZilla_Client〜」をダウンロードしてください。

初めて使う場合のみ契約サーバーの情報を入力する必要があります。入力する情報や設定方法は各契約サーバーのホームページで確認できます。
例えば僕が使っているエックスサーバー では、以下のような設定手順マニュアルページを用意してくれています。

参考リンク:
FileZilla設定手順|レンタルサーバー【エックスサーバー】

画像の圧縮について

画像1枚あたりのデータサイズはできれば80KB以下に抑えたいところです。
データを圧縮する方法には「画像サイズ自体を小さくする」「画質を落とす」の2通りがあります。まず最初に画像サイズ自体を小さくします。高解像度ディスプレイのスマートフォンに対応するためには、実際に表示する2倍の横幅にする必要があります。目安は850px以上です。

参考リンク
オンラインで様々な画像を瞬時にサイズ変更|iLoveIMG

次に画質を落とします。以下のツールはPNGとJPGの画像形式に対応しており、圧縮率も高いためかなりおすすめです。僕も実際に使っています。

参考リンク
TinyPNG

おわりに

集中して取り組めば1週間ほどで基本的な知識は身に付けられるはずです。
もし本格的にウェブデザイナーを目指すのであれば、デザインの幅を広げることに意識を向ける必要があります。お問い合わせフォームを追加したり、もっと複雑な動きを付けたい場合にはPHPやJavaScriptなどのプログラミング言語を学ぶ必要も出てくるでしょう。ぜひマイペースに楽しみながらマスターしていってください。

コメントを残す

メールアドレスが公開されることはありません。