パソコンはWindows10を使います

　ぼくは、Windows派……というか、手に入りやすいパソコンがWindowsだったというだけなんですが。

　パソコン１台だとちょっと物足りない。
　開発用のエディター画面と、実行画面がそれぞれ同時に見られると非常に便利。ということで、ぼくの場合、縦長の画面が見られる『デル 液晶 モニター ディスプレイ P1914SF 19インチ スタンド回転式』の中古をヤフオクで2,420円（税込）で落札して使ってます。
　なにしろ、サイトって、スマホ対応まで考えると縦長になりがちな代物なので。

　メインのブラウザはGoogleChromeを使います。最近は、それが定番のようで。もちろん、他のブラウザも実行確認のために使います。飽くまで開発用の定番としてGoogleChromeを使うということ。

　次にテキストエディターですが、自分が使いやすいものを使いましょう。
　ぼくの場合は、Komodo Editというのをよく使っていましたが、最近はnotepad++を使うようになりました。
　世間の定番は、どうやらVisual Studio Codeのようですが。
　要は、レンタルサーバーとつなぐためにFTP（ファイル・トランスファー・プロトコル）の使えるエディターであればいいのです。

notepad++でのFTP接続方法
トップメニューのプラグインのうちのプラグイン管理を開きます。
プラグインのうちのNppFTPにチェックを入れてインストールボタンを押します。
トップメニューのプラグインにNppFTPが加わりますので、そのうちのShow NppFTP Windowを選択すると、画面右にNppFTPウィンドウが開きます。
NppFTPウィンドウの設定（歯車マーク）にあるProfile setting画面を開き、Connectionに必要な設定を行います。
Closeすれば勝手に保存されますので、あとはNppFTPウィンドウメニュー左にあるConnectアイコンを押して、必要なサーバーを選べば接続できます。

さくらエディター
あと、あると便利なテキストエディターがさくらエディター。
ファイルなどのテキストを手軽に扱いたい時に使いやすいです。
次の「ホームページ作りを始めましょう」のコラムで取り上げているFTPツールWinSCPのエディターはちょっと使いにくいので、さくらエディターを宛てます。

レンタルサーバーはロリポップを使います

　もちろん、自分のパソコン、つまりローカルにサーバー環境を作っての開発も可能です。
　その場合は、XAMPPを使うと便利です。
　いわゆるLAMPと呼ばれるWebサーバー環境がすぐにできるから。

LAMPとXAMPP
OSがＬinux、Webサーバーソフトウェア(HTTPサーバー)がＡpache、データベースがＭySQL、使う言語がＰHPということでLAMP。
XAMPPは、LinuxというOSがクロスプラットフォームということでＸであり、言語もＰerlも加えているため、そういう綴りになったということ。

　オフラインの場合は、ローカルでのXAMPP開発もいいでしょうが、最近はオンラインが普通なので、レンタルサーバーを直接開発用に使うのが便利です。いずれにしても、そのまま公開（ローンチ）できるから環境の変化の影響もなくストレスレスでもあります。

　ぼくの場合、ロリポップ（lolipop.jp）を昔から使ってます。リーズナブルで使いやすい（単なる慣れかな？）ので。
　ロリポップには、ロリポップドメインという、面白いドメインがたくさんあって、特にこだわりがなければ、そのうちの一つを選んで使うといいでしょう。たとえば、ぼくの場合、アカウントをimaにして、ロリポップドメインをdaa.jpにしています。つまり、「今だ.jp」というわけ。かつて（今も残ってる？）、omise.com、つまり「お店どっと混む」としゃれたドメインがありましたっけ。

　ということで、レンタルサーバーのアカウントはima、ドメインはdaa.jpとし、clinicというディレクトリを用意します。

ロリポップドメインはSSLに対応していない
ただし、ロリポップドメインは、SSL（インターネット上でのデータの通信を暗号化し、盗聴や改ざんを防ぐ仕組み）に対応していないので、httpsから始まるURLにできません。サイトをhttps化（SSL化）することはサイトの安全性のために必要なだけでなく、SEO（検索エンジン最適化）にも効果的なので、実際にローンチする段になったら、独自ドメインを取得しましょう。
独自ドメインは.comなど定番なもの以外にもいろいろとありますので、意味と価格を勘案して選んでください。
そして、法人でもなければ無理せず無料独自SSLに設定しましょう。

独自ドメイン
ある日のロリポップでの今月のおすすめドメインは、以下の通りでした。
.com     1,160円
　　　　ちなみにぼくが開発した.comは、次のようなものがあります。
　　　　https://fuku-jin.com/onazuke/　お名付け開運堂という占い師サイト
.net          440円
.co.jp     3,980円（日本法人用）
.jp          1,850円
　　　　ちなみに、ぼくのホームページは、.jpを贅沢にも使ってます。
　　　　https://info.key-web.jp/
　　　　どんなものを作ってきたか、興味があればご覧ください。
.tokyo       75円
.site           70円
.inc      98,000円（法人用）

ここにはないけど、やはり安かったので使っているのが、.online。たとえば
https://kimochi-tengoku.online/medobo/　やはり占い師のサイトで、易経。

デザインフレームはテンプレートで

　さて、ホームページを作るには、サイトのデザインフレームが必要になります。
　これを１から作るとなると、少なくともHTMLおよびCSS（ウェブページのスタイルを指定するための言語）の知識がないと大変です。CSSはそれなりの言語です。サイトデザイナーが仕事として成立するわけです。

　そこで、世の中にあるテンプレートと呼ばれるデザインフレームをサンプルに使うことにします。
　実際、プログラマーのぼくが個人で仕事を請け負う場合、デザインを依頼していてはリーズナブルな開発にならないし、顧客の要望を聞いていては少なくとも1カ月は余裕が必要になります。なので、サンプルを提示して、好みに合う候補を選んでもらい、それを微調整することで時間的費用的な課題を節約します。
　したがって、ある程度はCSSの知識を持つ必要はあります。

　テンプレートなら世界中から選択可能なので、かなりおしゃれなデザインフレームを手に入れることも可能です。
　検索キーワードを「css レスポンシブ テンプレート」として探すといいでしょう。もちろん、必要であれば、「無料」とか「フリー」、あるいは「商用フリー」とかをキーワードに追加してお手軽なテンプレートを手にいれてください。

レスポンシブWebデザイン
レスポンシブWebデザインあるいはレスポンシブデザインとは、パソコン、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にできるデザイン方式。
このため、わざわざスマートフォン用に別途デザインを作る必要はないわけです。
レスポンシブにすることで、Googleに取り上げられやすいモバイルフレンドリーなサイトにもなるようです。
さらにGoogleのPWAを使うことで、Androidだけですが、スマートフォンにアプリアイコンを置くこともできます。つまり、GooglePlayやAppStore用のネイティブなアプリではなく、URLブラウザが裏で動く感じです。
それ以外にもIonicとかいう便利ツールもありますが、それは別途。

【レスポンシブの例】https://free-hp.net/