はじめてのファイルパス

この記事は2020.02.10現在、TOKYOFREERANCEさんで公開されている #30DAYSトライアル1st の DAY9 「ファイルパスを理解する」に焦点を当てた解説記事となります。

30DAYSトライアル1st【コーディング基礎学習〜環境設定編】 | 東京フリーランス30DAYSトライアル1st【コーディング基礎学習〜環境設定編】

なお、この記事を書いている私自身初心者のざっくりまとめノートとなりますので、もし間違っている箇所がありましたら、コメントでご指摘いただけたら幸いです。

「そもそもファイルパスって？」「詳しく知りたい」という場合は、weblikerさんの記事がイラスト入り解説でわかりやすいです。リンクが機能しないので直書きします▶︎ https://webliker.info/78726/

まず私がわからなかった点、１。「VSCodeをインストールして、拡張機能を追加するまではできた。でも、ファイルをどこで作成するのかわからない。記載されているフォルダ構成をみても、どれが同じ階層で、どれが配下になるのかがよくわからない。」

ざっくり作成方法は以下。

1. デスクトップ上でpracticeフォルダを作成。

2. VScodeを開く。エクスプローラーを選択し、「フォルダーを開く」

3. さっき作成したpracticeフォルダを選択。画像を参考に、フォルダ→ファイルの順に作成。アイコンは（左）ファイル作成、（右）フォルダ作成となっています。

画像ファイルはデスクトップからテキトーにimgフォルダに入れとけばOK。

作成したフォルダをデスクトップ側からみるとこんな感じ。

わからなかった点、２。上記デイトラ記事より引用。

index.htmlに、h1で『Hello World!』と記入してください
test.cssに、h1のフォントサイズを32pxに設定し、index.htmlで読み込んでください
h1の下にtest.pngを読み込んで表示してください

暗澹迷妄。まったく課題の意味がわからんでござる。

「今まではprogateさまが全て用意してくれていたから、真っさらな状態では何から書けばいいかわからんでござる！」これです。

難しいことを考えるのはやめて、とりあえず表示するだけを目標にして書きます。

HTMLの書き方。

CSSの書き方。

書けたら、デスクトップからindex.htmlを押下。

ででーん。書けました。表示されました。

DAY9おわりです！お疲れさまでしたわーい。

という幻。あの後DAY10の課題をやろうとしたところ、文字色や画像サイズの変更ができないな？とCSSファイルを読み込めていないことが発覚したのでHTMLに追記します。

やっぱりフォーマットって大事なんですね。

ここで特に重要なのは、<link>タグのCSSファイルの読み込み部分になります。一回、href="test.css" と記述したのですが、変更分が読み込まれず頭を傾げていたところ、今回cssフォルダの配下にtest.cssファイルを作成しているため、href="css/test.css" とhtmlファイルがある階層と同じ場所まで遡って記載する必要があったようです。