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の開発はより楽に速くなっていきます。初心者の頃は難しいかもしれませんが、この先何か困った事があれば思い出してみてください。

Vue.jsのv-forで生成した要素をクリックするたびに、classをトグルで付け外しする方法
ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」
WordPressの常時SSL化で、下層ページのhttpからhttpsへのリダイレクトがうまくいかない場合に確認すること
WordPress5.5のサイトマップ機能を無効にする
Neovimを使い始める最初の一歩として便利な「LazyVim」
Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法
ウェブサイトをダークモードに対応するときに気をつけること
WordPressのプラグインはどれを入れたら良い?とりあえず最初に導入をオススメするプラグイン一覧
WordPressのwp_is_mobile()で条件分岐をするときは、キャッシュの設定に注意
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う