Hu_Tiang_TODAのホームページ


ホームページのトップに戻る

Visual Studio Codeの使い方備忘録

今ではブログなど簡単に作れる方がいいのではないかと勧めてくれる方もありますが、今までの財産も残しておきたいとの思いもあります。
そこで、ホームページをつくるのに新しいフリーソフトVisual Studio Codeを使うようになりました。
若いころにはがホームページ作成ソフトを使い、むしゃらにホームページを作ってきました。
そのために今それを見てみるとソースコードが複雑で後で自分でもよく分からないところがいっぱいありました。
例えばワープロソフトで作った文章をHTMLファイルで保存したものはまるで何をしているのかわかりません。

後から自分でも見やすくなるように単純なソースコードにすれば、他の方の参考にもしてもらいやすくなることでしょう。
今までのページもできるだけソースコードが簡単ですっきりするように心がけました。
実際にはこの作業は大変な労力を要する仕事でした。
こういう作業をすることで、効率的に・体系的にホームページをどのように作ったらいいかが分かってきました。

CSSをきちんと理解できていません。 まだ見栄えをよくするためにもっとCSSでグリッドレイアウトなども調べてみようと思っています。
そんなことは簡単にできると思われる方は是非教えてください。

このソフトは軽く素早く反応してくれます。ソースコードのあやまりのある所も指摘されます。
他の個所にリンクさせることも簡単にできるようにすることができるようになりました。
このソフトの威力を感じたのはエクセルファイルをHTMLファイルに変換するときに範囲を選択し検索をかけると、 タブのスペースなど余分な設定を一挙に取り去り単純なコードに変換できることでした。
使い方に慣れてしまえば特に問題はないかもしれませんが、使い方の備忘録として残しておけば
ほかの方の参考にもなると思い、ここに載せることにしました。
コードの書き換えをしたい時に多くの個所を一括して変換できることも魅力です。

問い合わせフォームの製作に挑戦中

Vsual Studio Codeの使い方を勉強中です。
以下の書籍を購入しいろいろと書いてあることを実践して確かめながらその働きを調べています。

  1. 『徹底解説 Vsual Studio Code』本間咲来著 C&R研究所 2019/10/1 初版
  2. 『Vsual Studio Code 実践ガイド』森下篤著 技術評論社 2020/5/26 初版第2刷
  3. 『『Vsual Studio Codeの教科書』川崎庸市・平岡一成・阿佐志保共著 マイナビ出版 2020/8/5 初版第2刷

問い合わせフォームをつくるまでの道のりは私にとって遠いように思います。
このソフトは使いながら欲しい機能を探し拡張機能として追加していくもののようです。
拡張機能を追加していくらでも高機能に育てていけるようです。

便利な機能スニペット

visual_studio_codeで苦労したこと

<a href="">ファイルパス</a> における
ファイルパスを無記入のためアップロードが出来ずに苦労しました。
その他のトラブルでもファイルパスに指定したファイルを先にアップロードしていないことがありました。(2025/01/26) 別の個所で同じファイルを異なるファイルパス表現することもダメでした。(2025/01/27)

過去の文字化けするファイルの扱い

ファイルを部分的に修正してもダメである。
ファイルを部分的にコピー&ペイストで修正すると部分的にエンコード変換されてしまい、
エンコーディングの混ざったファイルになり、さらに混乱することになる。

ファイルをVSCodeで開いた状態で次のようにすることがよいようです。

  1. タスクバーにあるエンコーディングのアイコンをクリックするとエンコード変換をするか尋ねられる
  2. エンコードをUTFに変換してファイルを開くと指示する
  3. も一度タスクバーのエンコーディングのアイコンをクリックしエンコードをUTF-8に変換して保存することを指定する
これでもまだ問題は続くようです。



under_construction

ホームページのトップに戻る