Visual Studio Codeの使い方備忘録
新しくホームページを始めるために
要約 今まではMicrosoft Expressionを使って来たがサポートがされないとなり
Visual Studio Codeを使うことにしました。
ソフトを変更した苦労を記録するのも今後に役に立つことを期待して備忘録を残すことにしました。
一番古くはホームページ制作ソフトでがむしゃらに作っていていたためにソースコードがとても複雑になっていました。
今後の参考になることを期待してソースコードの簡略化に悪戦苦闘した記録を残すことにしました。
今ではブログなど簡単に作れる方がいいのではないかと勧めてくれる方もありますが、今までの財産も残しておきたいとの思いもあります。
そこで、ホームページをつくるのに新しいフリーソフトVisual Studio Codeを使うようになりました。
若いころにはがホームページ作成ソフトを使い、むしゃらにホームページを作ってきました。
そのために今それを見てみるとソースコードが複雑で後で自分でもよく分からないところがいっぱいありました。
例えばワープロソフトで作った文章をHTMLファイルで保存したものはまるで何をしているのかわかりません。
後から自分でも見やすくなるように単純なソースコードにすれば、他の方の参考にもしてもらいやすくなることでしょう。
今までのページもできるだけソースコードが簡単ですっきりするように心がけました。
実際にはこの作業は大変な労力を要する仕事でした。
こういう作業をすることで、効率的に・体系的にホームページをどのように作ったらいいかが分かってきました。
CSSをきちんと理解できていません。
まだ見栄えをよくするためにもっとCSSでグリッドレイアウトなども調べてみようと思っています。
そんなことは簡単にできると思われる方は是非教えてください。
このソフトは軽く素早く反応してくれます。ソースコードのあやまりのある所も指摘されます。
他の個所にリンクさせることも簡単にできるようにすることができるようになりました。
このソフトの威力を感じたのはエクセルファイルをHTMLファイルに変換するときに範囲を選択し検索をかけると、
タブのスペースなど余分な設定を一挙に取り去り単純なコードに変換できることでした。
使い方に慣れてしまえば特に問題はないかもしれませんが、使い方の備忘録として残しておけば
ほかの方の参考にもなると思い、ここに載せることにしました。
コードの書き換えをしたい時に多くの個所を一括して変換できることも魅力です。
便利な機能スニペット
要約 覚えることが多く大変ですが、便利な機能スニペット
-
高速HTMLコーディングが可能
!+〔tab〕と入力するだけで以下のようなHTMLひな形のソースコードに変換することができる。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>【文字実体参照】
- 自動フォーマット 〔shift〕＋〔alt〕＋ F と入力
- マルチカーソルで複数個所の編集が可能 〔ctrl〕＋右クリック ですべて変更
- コメントアウト<!-- -->の使い方でバグを見つける
- VSCodeのチートシートを眺めていると簡単な入力で複雑な操作を効率的に行うことができるようになる
Visual_studio_codeで苦労したこと
要約 使うソフトの変更で苦労したことを記録に残す意義もあると思い、
困ってきたことをここまとめてみました。
<a href="">ファイルパス</a> における
ファイルパスを無記入のためアップロードが出来ずに苦労しました。
その他のトラブルでもファイルパスに指定したファイルを先にアップロードしていないことがありました。(2025/01/26)
別の個所で同じファイルを異なるファイルパス表現することもダメでした。(2025/01/27)
アップロードする前にアップロードする前にファイルパスを正確にしておくこと
過去の文字化けするファイルの扱い
要約
ファイルを部分的に修正してもダメである。
ファイルを部分的にコピー＆ペイストで修正すると部分的にエンコード変換されてしまい、
エンコーディングの混ざったファイルになり、さらに混乱することになる。
ファイルをVSCodeで開いた状態で次のようにすることがよいようです。
- タスクバーにあるエンコーディングのアイコンをクリックするとエンコード変換をするか尋ねられる
- エンコードをUTFに変換してファイルを開くと指示する
- も一度タスクバーのエンコーディングのアイコンをクリックしエンコードをUTF-8に変換して保存することを指定する
今回は名前を付けて保存するときにファイル名に半角スペースが入っていてファイルのリンクに手こずりました。(2025/02/13)
名前を付けて保存するとき名前が少し違うことでトラブルになりました。ファイル名に"j"の文字が抜けていたり、"04"を"4"としていました。(2025/02/20)
これでもまだ問題は続くようです。
- ファイルを変更したいときには必ず初めに忘れずに元のファイルを別のところに保存しておくこと(失敗しても初めからやり直せる)
- 変換したいファイルをVSCodeに読み込み、タスクバーにあるエンコーディングのアイコンUTF-8をクリックし、
- "エンコーディング付で開く"をクリックし、エンコーディングの"Shift JIS"を選ぶと多分文字化けが直る
- エディターを分割して右の新たなエディターに新しいテキストファイルを開く。
- このファイルはテンプレートで開けばのエンコーディングとなっている。(タスクバーで"UTF-8"を確かめてください)
- 左側にある元のファイルからタイトル始めメタファイル類をコピー&ペースト
- <head></head> <にmeta name="viewport" content="width=device-width, initial-scale=1">を 書き込んでおくことでスマホ対応できる
- もう一つのスマホ対応をしておく(<body>と</body>のタグ中に<div class="wrapper"> </div>のタグを作ること)
- <div class="wrapper"> </div>の中に変換したい文章からコピー＆ペースト
- 右側のファイルを別名(元のファイル名に"_1"を追加)で保存
- エクスプローラーで左側の文字化けしたファイルを削除
- エクスプローラーで右側のファイルを元のファイル名("_1"削除)で保存すれば成功
紀行錯誤の連続でしたが、古いファイルをすっきりとさせることができました。
もっと簡単な文字化け修正の方法があれば教えてください。
スマホに対応するには
要約 現在のホームページを作るにはスマートフォン~のアクセスも必要です。
その対応についても調べてみました。調べてみると意外に簡単なことを行うだけで対応できることが分かりました。
- <head></head> のメタデータの中に<meta name="viewport" content="width=device-width, initial-scale=1">を 書き込んでおく
- <body>と</body>のタグ中に入れ子の <div class="wrapper"> </div>のタグを作る
- <div class="wrapper"> </div>の中に文章を書く
AIの活用
要約 最近は身近なところにどんどんAIが入り込んできています。
利用してみると便利に感じることが多いですが、嘘を教えられることがあります。
突っ込みを入れたこともあるので
最近はAIがどんどん進化しているようですね。欲しい情報を探すのにもそれを感じます。
だから危険も感じます。
ホームページが悪用されないようにするにはどのようなことをすればいいのでしょうか?
Google AI に聞いてみました。
<meta name="robots" content="noindex, nofollow">を<
head></head>の中に書き込むとのことです。
その効果はすぐには表れないそうですが、効果が出るか楽しみです。
その効果を確かめるにはどのようなことをすればよいか？
他にもVisualStudioの使い方の基本も教えてもらいました。
書籍で問題の解決方法を探すより分かりやすいですね。
今後はもっと活用したいと思いました。(2026/06/07)
問い合わせフォームの製作に挑戦中
要約
Vsual Studio Codeの使い方を勉強中です。
以下の書籍を購入しいろいろと書いてあることを実践して確かめながらその働きを調べています。
分からないことはAIに尋ねながらソースコードを作っていけばいいようです。
- 『徹底解説 Vsual Studio Code』本間咲来著 C&R研究所 2019/10/1 初版
- 『Vsual Studio Code 実践ガイド』森下篤著 技術評論社 2020/5/26 初版第２刷
- 『『Vsual Studio Codeの教科書』川崎庸市・平岡一成・阿佐志保共著 マイナビ出版 2020/8/5 初版第２刷
- ネットでAIに尋ねる
問い合わせフォームをつくるまでの道のりは私にとって遠いように思います。
このソフトは使いながら欲しい機能を探し拡張機能として追加していくもののようです。
拡張機能を追加していけばいくらでも高機能に育てていけるようです。
ホームページのトップに戻る