HTML・CSSでWebサイト制作を行う際に必要なツール

第1回、2回とHTMLの基礎的な話をしてきて、この先実際にHTMLコードを書いていって実際にWebページを作成していこうと思っているのですが、そのためにはコードを書く「テキストエディタ」と、そのコードを表示させるための「ブラウザ」が必要になります。今回はその2つについての解説です。
テキストエディタ
HTMLは全てテキストですので、テキストを入力するための「テキストエディタ」というアプリが必要になります。正直文字が打てればいいので、Windowsならメモ帳、macなら標準で入っているテキストエディットやmiなどでも書けない事はないのですがHTMLなどのコーディングやプログラミングに適したテキストを入力するアプリケーションがあるので、それを先に入れておきましょう。
(必ずしも必要という訳ではないですし、他にも色々なテキストエディタがあるので自分が気に入ったもの、使いやすいと感じたものを使用しましょう。)
CotEditor

mac用の無料国産テキストエディタで、初心者でも使いやすいので最初はこのテキストエディタから初めてみては如何でしょうか?
公式サイトにある「Mac App Store」のボタンを押すとAppStoreが開くのでそこからインストールできます。
Atom

僕が愛用しているエディタはAtomというエディタです。
UIが綺麗で拡張性もあるので使用していますが、もしかしたらそれが逆に初心者の方は分からず混乱してしまうかもしれません。しかしそれでも一度触ってみる価値のあるエディタだと思うので、少し試してみてはいかかでしょうか?
ブラウザ
Web制作にはWebページを表示するブラウザが必要不可欠です。そもそもこのブログを閲覧している時点で何かしらのブラウザを利用しているはずですが、おすすめのブラウザはGoogle Chromeです。
Google Chrome

Chromeは拡張機能も豊富ですし、現在シェアも非常に高いので、より多くの人が閲覧している環境で開発を行う事ができます。昔はブラウザによってWebページの見た目が大きく崩れてしまうといった事があったみたいですが、最近はそこまで大きく表示が崩れる事はほぼありません。
しかしそれでも何かこだわりが無い限りはシェアの高いChromeを使っておくのが無難な選択ですし、Googleが開発しているだけあって非常に使いやすいです。
メモリを大量に消費するのがデメリットですが、その分動作は速くて快適です。
ツールはどんどん試してみよう
ブラウザはそこまで種類はありませんが、テキストエディタはたくさんあります。何か不満な事や「もっとこうできたらいいのに…」と思った事があれば調べてみて、他のエディタも触ってみるというのも1つの手です。
せっかく多くのツールがあるのですから使ってみて便利なものは積極的に取り入れていくとWebの開発はより楽に速くなっていきます。初心者の頃は難しいかもしれませんが、この先何か困った事があれば思い出してみてください。

MacでCLIツールをインストールするときに行うターミナルでの「パスを通す」とは一体なにか?
Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する
Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!
HTTP/2が設定されているはずなのに、ブラウザ上でHTTP/1.1になってしまう場合はセキュリティソフトを確認
Webサイト制作の基礎の基礎、HTMLって何?
Visual Studio Codeで「.html」拡張子以外のファイルでもEmmetを使えるようにする
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ
Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる
「epel-release」インストール後にyum installで「Cannot retrieve metalink for repository」と表示される場合の対処法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」