今回はそんな疑問にお答えしていきます。
最初はどんなファイルで構成されているか分からないと思うので、まずはここから始めましょう。
必要最低限のファイルとフォルダを作成
サイトを作成するのに最低限必要なファイルは2つです。
- htmlファイル
- cssファイル
それぞれのファイルについて簡単に説明します。
htmlファイル
htmlファイルを作る前に、まず全てのファイルを入れるフォルダを作ります。
今回は my-homepage という名前のフォルダにしました。
このフォルダ名やファイル名ですが、日本語を使うとエラーが起きたりするので注意しましょう。
htmlファイルはサイトのテキストファイルとなり、これがないと始まらないのでまずはこのファイルを作ります。
ファイルの作り方はメモを作成すればOKです。
画面上にある新しいアイテム→テキストドキュメントでも作れますし、右クリック→新規作成でも作れます。
これが出来たファイルです。
.txt というのはファイルの種類を表す拡張子と呼ばれるもので、Windowsでは非表示にも出来ますがWeb制作では表示させておいた方が分かりやすいので、表示させておきましょう（表示のさせ方はググってみて下さい）
このファイルをhtmlファイルにするには、この拡張子をhtmlに変更します（拡張子を非表示にしてると変更出来ません）
これを
こうすればOKです。
ここでこのようなポップアップが出ますが、ビビらず「はい」をクリックします。
これでhtmlファイルは出来ましたが、通常トップページのhtmlファイルの名前はindex.htmlとするのが一般的なので、拡張子だけでなくファイル名も変えておきましょう。
これでhtmlファイルは完成です。
cssファイル
次はcssファイルを作ります。
これはhtmlファイルで書かれたテキストファイルを装飾するファイルとなります。
装飾とはフォントサイズ、色、配置、余白など色々あるのですが、これがないとどうなるかというと、例えば私のポートフォリオだとこのような状態になります。
何がなんだか良く分かりませんね。
これにcssファイルを作ると以下のようになります。
もちろんcssファイルには必要なコードを書いた状態で、となります。
このcssファイルも作り方はhtmlファイルと同じですが、これは一般的にstyle.cssというファイル名になります。
ただし今回はindex.htmlと同じ階層にcssというフォルダを作り、その中にファイルを作ります。
フォルダはここですね。
そしてこの中にstyle.cssを作ります。
これで完了です。
ただ、サイトにはほぼ間違いなく画像を使うと思うので、画像用のフォルダも作っておきます。
imgフォルダを作成
これもcssフォルダと同じで、index.htmlと同じ階層に作ります。
このフォルダ名はimgでもimageでも構いません。
このimgフォルダの中に使う画像を入れていく感じですね。
以上で最低限サイトを作るのに必要なファイルとフォルダの作成が完了しました。
あとはサイトに動きを付けたい時はjsフォルダを作ってjQueryなどのjsファイルを作ったり、複数ページのサイトであればindex.htmlと同じ場所にhtmlファイルを作ったりします。
こんな感じですね。
この辺はそのうち分かってくると思いますので、勉強を始めたばかりの人はまず以下の3つを作ればOKです。
- index.html
- cssフォルダ→style.css
- imgフォルダ
以上です。