🧐
HTML修正作業で困ったことまとめと解決策
はじめに
この記事では、私が仕事中に「普段あまり使わないHTMLを扱ったことで発生したトラブル」と、その解決方法をまとめています。
HTMLにあまり慣れていない方や、これからHTMLを書いてみようという方にも参考になる内容を目指しています。
トラブル1：ターミナルからChromeでHTMLをプレビューできない
背景
ローカルにリポジトリをcloneしたとき、Finderからファイルにアクセスできず、
HTMLファイルをどうやってChromeで表示すればよいか悩みました。
解決策
Macの場合：
open -a "Google Chrome" index.html
または
open index.html
Linuxの場合：
google-chrome index.html
トラブル2：修正後に毎回リロードするのが面倒
背景
HTMLを修正するたびに、毎回ブラウザをリロードしないと変更が反映されません。
この作業が手間で、自動で反映されてほしいと感じました。
解決策
VS Codeの拡張機能「Live Server」をインストールしました。
これを使うと、HTMLファイルを保存するたびに自動でブラウザが更新されるので、リロードの手間が省けます。
トラブル3：Webページ全体のスクリーンショットを撮る方法が分からない
背景
PRを出すとき、実装内容を伝えるためにWebページのスクリーンショットを載せる必要がありました。
しかし、通常のスクリーンショットではページ全体を撮ることができず困りました。
解決策
Chromeの開発者ツールを使うことで、ページ全体のスクリーンショットが撮れます。
- 開発者ツールを開く（
Cmd + Option + I）
- コマンドパレットを開く（
Cmd + Shift + P）
- 「フル」と入力し、「フルサイズのスクリーンショットを撮る」を選択。
＊日本語設定なら「フル」 英語設定なら「full」と入力しましょう
おわりに
HTMLをあまり書かない方でも、ちょっとした工夫や便利なツールを使うことで作業がスムーズになります。
この記事が、同じような悩みを持つ方の助けになれば嬉しいです。
Discussion