こんにちは やはです。
読み物ばかり大変だったと思います。お待たせしました、ここからは少しずつではあ
りますが、実際のVSCでコードを書きながら進めていきたいと思っています。
Vol.0でお話した目標設定はできました？なんとなく自分で作りたいホームページの
イメージができてると思います。ブログを通して一緒に形にしていきましょう。
今回はこれです。
- VSCの使い方
- ファイルの保存先の設定
それでは始めていきましょう。VSCを起動させてください。
VSCの使い方
ひらけましたね。次はここから左上にあるファイルから新規ファイルを押してみま
しょう。Windowsの方も同じ操作です。
こういう画面が出てきましたと思います。ここに前回お話ししたHTMLとCSSを書き
込んでいき、ホームページを仕上げていく形となっています。
まずは拡張子と保存先を作りましょう、HTMLとCSSを関連付けるには保存先を
一緒にしておくととても便利なのです。
ここを押してHTMLに変えましょう。
変わった箇所があります、わかりますか？
変えることによりここが変化したのがわかります。何回か繰り返して変わっているの
を確認していきましょう。
この作業で「これはHTMLの拡張子」の変わったことになります。
拡張子というのは、ワードはワード、エクセルはエクセル等、そのソフトで使ってい
るファイルだよっていうことです。有名なので言えばPDFやJPEGだと思います。
PDFはお仕事でよく使いますし、JPEGは画像の拡張子として出てきますね。
もちろん他にもたくさんありますが、要はHTMLのファイルだよってわかればOK
です。ちなみに新規でファイルを作成すると常にプレーンテキストで作成されますの
で、HTMLやCSSに変える必要があります。忘れがちなので注意してくださいね。
後、プログラミングはいかに効率よく行うためにたくさんのプラグインがあると
お話ししましたが、それだけでなくショートカットキーも多用していきます。
今作業した新規ファイルの作成は「Ctrl or command + N」で作成する事ができま
す。私はよく使ってますので、少しずつショートカットを覚えていってください。
ファイルの保存先
次は保存先を作成しましょう。どこに保存しても構いませんが、慣れないうちはわか
りやすくするためのデスクトップにでも保存しておきましょう。
デスクトップで右クリックを行い、新規フォルダ作成を押してください。
新規フォルダが出来上がるので、名前のところをゆっくり２回クリックしてくださ
い、そうすると名前の変更ができます、任意の名前をつけましょう。
名前はなんでも構いませんが、ホームページをサーバー上に上げる際は日本語は
使えませんので、今のうちから英語やローマ字で統一しておくと、後々の手間は減り
ますよ。
皆様は上記の写真を「フォルダ」と読んでいらっしゃると思います。
当たり前ですよね、フォルダって書いてあるんだから。ただ困ったことにWEB業界
ではフォルダではなく「ディレクトリ」という呼び方が一般的なのです。
フォルダ＝ディレクトリ
呼び方は違いますが意味はどちらも同じです。ですがやはり業界に足を踏み入れるの
で業界用語使っていきましょう。業界用語を多用して形から真似するのも大事です。
私もこれからはできるだけディレクトリで読み上げていきますので、皆様も慣れて
いきましょう。
それで、今から行うのは作成していただいたディレクトリ（フォルダ）に先ほど作成
していただいたHTMLのファイルを保存してもらいます。
ファイルから名前をつけて保存を押しましょう。
先ほど作成していただいたディレクトリ（フォルダ）に保存するのですが、
今はファイル名が「Untitled-1.html」になってるかとおもいます。
ここを「index.html」に変えておきましょう。
変更し保存が終わりましたら、先ほど作成していただいたディレクトリ（フォルダ）
を開いて「index.html」があるか確認してください。保存できてればオッケーです。
これでindexという名前のhtmlファイルが保存されました、おめでとうございます。
Windowsの方は拡張子が隠れている事があります、PCの関係上お見せする事が
できないのでわからない場合は私にご連絡やコメントくださればお伝えします。
次回からは同名のファイルを保存する時、保存を押すだけで上書き保存されていきま
す。新しくファイルを作った際のみ名前をつけて保存していくといった形ですね。
「index」というファイル名に変えたのにも意味があります。
ホームページというのは今お作りしていただいたファイルが何層にも重なって
構築される物なのですが、「index」はそのホームページのアドレス最後にくっついて
くるワードなのですが、今のWebアドレスの関係でその部分は省略する事ができるよ
うになります。
「http://yahalife/index.html/」
と打たないといけないところを
「http://yahalife/」
と、このように省略できるんですね、ちょっと楽ですよね？なのでホームページの
トップとし使っておくといいですよ。
今日のまとめ
- VSCで新規ファイルを作ったらまずは自分が作るためのファイルに拡張子を変更
- 保存先はできるだけまとめて、最初のHTMLファイルは「index.html」を使う
今日は少しVSCを触ってみましたがどうでしたか？
実際ここはまだ設定の段階なので退屈すぎて進行が遅いなって思う方もいらっしゃる
と思います。次からは本格的に手を動かしてく作業になります。
ゆっくりでいいので自分の体に覚えさせていきましょう。体が覚えれば覚えるほど
どんどん負担が少なくプログラミングを行う事ができます。
それではまた次回もよろしくお願いします、お疲れ様でした。
やはでした！！
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。