初心者でも無料で簡単に自分でホームページが作れる「ホームページ作成ツール」が増えてきています。 有料プランでも毎月数百円~数千円程度とお手頃な価格なので、“とりあえずHPが欲しい!”という方にはおすすめです。 その中でも […]

2019.9.26
【初心者必見!】WEBサイトを制作するために必要なもの
独学でWebサイトを作ろうと思った時に、まず何から始めたらいいものかすごく悩みますよね。
検索をすれば手軽に情報が得られる時代、それ故に情報が多過ぎてどこから手を付けたら良いか分からない!そんな方の為に、まず何を準備するべきなのか詳しくご紹介したいと思います。
1.テキストエディタ
まずは何と言ってもテキストエディタ。
テキストエディタとは名前の通り、テキストを編集するツールのことです。このツールを使用してHTMLやCSSファイルを編集します。
例えばWindowsだと「メモ帳」、Macだと「テキストエディット」、これらの標準アプリもテキストエディタになります。
もちろんこのメモ帳を使ってHTMLのコードを書くことは出来ますが
ご覧の通り、長々とコードを書くには少々見づらいような気がします。
ただ、こういった見辛さはプログラミング用のテキストエディタを使うことによって解消することが出来ます。
使用するエディタによって機能は様々ですが、コード事に色分けをしてくれたり、インデントを揃えることが出来たり、画面分割で同時にファイルを編集出来たりなどなど、コードを記述しやすくする為のアシスト機能が備わっています。
2.無料で使えるテキストエディタ
そんなに便利ならお金がかかるんじゃないの?
と思われる方も多いかと思いますが、基本的には無料で使えるソフトが多いので、まだ使ったことがないという方には色々と試して、自分に合ったものを見つけて頂けたらと思います。
●Atom
「GitHub」で開発され2015年に正式にリリースされたAtom。
パッケージと呼ばれる便利な拡張機能が多く、非常に使いやすいエディタです。
Windows・Macで利用可能です。
●サクラエディタ
Windows上で動作するテキストエディタです。
コード事の色分けはもちろんの事、キーボードマクロの登録、アウトライン解析など、便利な機能が豊富にあります。
日本のエディタなのでインターフェイスも日本語、とりあえずコードを書いて慣れたい、という方には始めやすいエディタです。
その他にも無料で使えるテキストエディタはたくさんありますので、ぜひ検索してみて下さい。
3.Webブラウザ
テキストエディタを使って作成したHTMLファイルやCSSファイル。
どのように反映されるのか表示させてみたいですよね?
そこで必要になるのがWebブラウザです。
このブログもGoogle chrome、safariなどを使用してご覧頂いているかと思います。
そういったWebページを閲覧する為に使用するソフトの事をブラウザと言い、普通のWebページと同様に、HTMLファイルをこのブラウザで開くと表示結果を見ることが出来ます。
ブラウザと言ってもたくさんありますので、一体どのブラウザをインストールすれば良いのか迷ってしまいますよね。
そこで知っておいて欲しいのが、ブラウザの種類によって表示結果が異なる場合があるということです!ですので、複数のブラウザを使って表示結果を確認しながら作業をする事をおすすめします。
標準ブラウザとしてWindowsではInternet ExplorerやMicrosoft Edgeが、MacではSafariが用意されています。
それにプラスして日本国内で最もよく使われていると言われるブラウザ、Googlechromeは必須。そして定番のFirefoxをインストールしておけば大丈夫かと思います。
Googlechromeのインストールはこちら
Firefoxのインストールはこちら
4.レンタルサーバー
ファイルが完成したら、いよいよインターネット上に公開。
公開するためにはまずWebサーバーが必要になります。
サーバーを構築する方法もありますが、ここではさくっとメジャーなレンタルサーバーをご紹介したいと思います。サーバーによって容量や金額が違いますので、比較しながら自分に合ったサーバーを見つけましょう。
●エックスサーバー(XSERVER)
月900円/200GB~
●ロリポップ
月250円/50GB~
●さくらのレンタルサーバ
月129円/10GB~
●CPI
月3,800円/無制限
5.ドメイン
レンタルサーバーの契約が終わったら、あともう一歩。ドメインの取得を行いましょう。
ドメインとは「インターネット上の住所」と言われており、このサイトで言うところの「media.lih.co.jp」がドメインに当たります。分かりやすく言えばホームページのURL。
取得方法は、レンタルサーバーの契約時にまとめて一緒に取得する方法と、ドメイン取得を行っている専門の会社から取得する方法があります。
こちらも各会社によって料金が異なりますので、比較して合うもの選んで下さい。
6.まとめ
以上がWebサイトを制作するのに最低限必要なものになります!
こうして見るとWebサイトを制作するのって用意するものが多くて大変そうだと思われるかもしれません。初めは分からないことばかりだと思いますが、慣れてしまえば何てことない作業にかわってしまうもの。これから勉強をしようと思っている方のお役に立てたら嬉しいです。
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
おすすめ記事はこちら
-
- スタートアップ
- ツール
- ホームページ制作
- 無料
無料!簡単!ホームページ作成ツール5選
2021.9.13
-
- スタートアップ
- ホームページ制作会社
- 安い
安いには理由がある?ホームページ制作会社を上手く選ぶためのポイント
2021.8.10
「ホームページ制作 格安」などで検索をすると日本全国のいろいろな制作会社が出て来ます。 5ページ50,000円〜、初期費用0円で月々3,000円〜など、お得そうなキャッチコピーが並んでいるのをよく目にするかと思います。 […]
-
- reCAPTCHA
- プラグイン
- ワードプレス
- 初心者
【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法
2021.8.2
WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール… 対策のために検索すると必ずといっていいほど目にする”reCAPTCHA” 名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません […]
-
- Zoom
- ツール
- 無料
アカウント登録不要!Zoomの使用方法
2020.10.5
【目次】1.Zoomとは2.アカウント作成なしのZoomミーティングの基本的な流れ3.【PCの場合】Zoomアプリのダウンロード方法4.【スマートフォンの場合】Zoomアプリのダウンロード方法 目次1.Zoom とは2. […]
-
- Zoom
- ツール
- 無料
簡単!Zoomアカウント登録&使用方法
2020.10.5
【目次】1.Zoomとは?2.Zoom使用に必要な環境3.PCで登録、使用する場合4.スマートフォンで登録、使用する場合 目次1.Zoom とは【Zoom使用に必要な環境】2.Zoomミーティングの基本的な流れ3.【PC […]
カテゴリー
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
お問い合わせ
・
資料ダウンロードはこちらから

お問い合わせ・資料ダウンロードはこちらから
頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。
LIHが運営する
お役立ちブログ配信中
Staff blog
LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。
-
- SEO対策
- WEB制作
- ブログ集客
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
- スタートアップ
- ホームページ制作
- 安い
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
-
- WEB制作
- 初心者
初心者必見!Webサイト制作に必要なスキルとは?
2022.3.25
近年の副業ブームも相まって、Webサイト制作に必要なスキルを独学で身に付けたい!という方を多く見かけるようになりました。 ドットインストールやProgateなど、独学でプログラミングを学習できるコンテンツは数多くあります […]
-
- WEB制作
- 初心者
【はじめてでもよくわかる】ホームページ制作の進め方
2022.2.28
「初めてホームページを作るんだけど、制作会社との打ち合わせって何を聞かれるの?」 「あらかじめスケジュールを立てておきたいんだけど、どのくらい期間が必要なの?」など、制作がどんな風に進んでいくのか心配な方も多いんじゃない […]