VS Codeでの記述編集作業

VS Codeでファイルを開く

こんばんは！

新年度ですね、
新社会人の皆様
入社されてまずは1週間、大変お疲れ様です！

ご入学・ご入社、またはご退職等
皆様に様々な転機があった事と思います。

私は最近あるクセのあるCMSにおいて独自テンプレート作成に従事しています。

本日は最近の頂いたお仕事に因んだ内容にしようと思います！

テンプレート作成といいましても
VS Code上でもらう雛形に土台を作って
不具合が起きない様に
ひたすらコードと向き合っていく作業です。

そこで、部分的には実践編の内容なのですが
基本的なところをおさらいしておきましょう！

基礎編でパソコンにインストールする
VS CodeでHTMLファイルをひらきます。

Visual Studio Codeは2015年4月にMicrosoftが開発・リリースされたソースコードエディターです。

皆様がコードを確認する場合には、UpdraftPlusなどバックアップの際にとってあるデータを
VS Codeで開いてみるのも手ですね！

phpファイルではありますが、開くとどの様なかんじになっているか分かって頂けるかと思います！

VS Codeのコードをブラウザで確認する

ファイル内の記述してあるコードは
ブラウザで表示して確認できますね。

(実際にファイルを開いてブラウザで確認したりするのは
応用編のPHPのカリキュラムでも行いますが、
ここではHTMLファイルを開いてみましょうというものです！)

ブラウザで開く際は、

• パスをコピーしブラウザで表示
• ファイルを右クリックで出てきたブラウザで表示

で確認できます。
ただし、ファイルを開くときのデフォルト設定ブラウザで行う場合にはダブルクリックで可能です。
そしてこの場合ダブルクリックでは、ブラウザではなくVS Codeが立ち上がってファイルを開くケースもあります。
ブラウザの検索バーへファイルをドラッグ&ドロップでも開きます。

パスをコピー

例としまして、現在VS Code上でstyle.cssが開かれていますね。
こちらのタブを名前部分で右クリックで
候補の選択肢が出てきますので
パスをコピーします。

ファイルを右クリック

こちらの例はMacでの表示画面場合ですが、
もちろん他のOSでも同様に、ファイルを開く際はブラウザやエディターを選択可能です。
ファイル上でブラウザを選択し開くことが可能です。

CSSを現在開いているHTMLファイルへ反映させる

そして、別タブへ

スタイルCSSファイルを開いております。

さて、
この場合にはどうやってHTMLへCSSを
反映させた状態をブラウザで確認しますか？

ぽく

ぽく

ちーん！

そうです、
実践編の通りCSSは
以下の３つの方法で反映させますので
確認してみてください。

記述する場所

• インライン
• ヘッダー内
• 別ファイル

「実践編　見た目のカスタマイズ（CSS）  CSSの基礎知識」と
「特別編　 HTML/CSS　 CSSの記述場所」を参考にして下さい。

では、実際にファイル内へ記述し反映してみてください。
私は別ファイルで既にCSSが用意されていますので以下の記述をheadダグ内に記述します。

<link rel="stylesheet" href="css/styles.cssのパスを入れます">

そうすると整形されて表示されます！

今回は、基礎で使う知識の実案件での使用例です。
基本ですが、普段はWordPressでの作業が中心となり
曖昧になりがちなのでご紹介させて頂きました！