Web制作に興味があるという方も、何から始めていいか分からないと思います。
今回はホームページを作るのに最低限必要なファイルについて解説します。
実際にコーディングをしていくにあたってこれがスタートになるので、何も分からないという人はまずここから始めましょう。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
Web制作に必要最低限のファイルとフォルダとは?
Web制作で最低限必要なファイルは2つです。
- HTMLファイル
- CSSファイル
それぞれのファイルを作成する前に、ファイルを入れるフォルダを作っておきましょう。
MacもWindowsも右クリックから作成出来ます。
今回はフォルダ名を『blog』にします。
この中にHTMLファイルやCSSファイルを入れます。
注意ポイント
・半角 / 全角スペース
・機種(環境)依存文字
・ハイフン、アンダースコア以外の記号
上記もNGなのでご注意下さい。
HTMLファイル作成
HTMLファイルはテキストファイルとなり、これがホームページのテキストや画像などを構成する基本となるファイルになります。
Windowsの場合
Windowsではテキストドキュメントを作成すればOKです。
『右クリック → 新規作成 → テキストドキュメント』で作成できます。
こちらが作成されたファイルです。
『.txt』というのはファイルの種類を表す拡張子と呼ばれるもので、表示させるにはフォルダを開いた状態で上にある『表示』タブをクリックして『ファイル名拡張子』にチェックが入っていればOKです。
そしてこのファイルをHTMLファイルにするには、拡張子を『html』に変更します(拡張子を非表示にしてると変更出来ません)
これを、
こうすればOKです。
ここでこのようなポップアップが出ますが、ビビらず『はい』をクリックします。
これでHTMLファイルは出来ました。
ただし通常トップページのHTMLファイルの名前は『index.html』とするのが一般的なので、拡張子だけでなくファイル名も変えておきましょう。
これでHTMLファイルは完成です。
Macの場合
Macの場合はWindowsみたいに右クリックで作成は出来ません。
WindowsからMacに乗り換えた人が最初に戸惑うところかも知れません。
Macでテキストファイルを作成する方法はいくつかありますが、一番シンプルなやり方をご紹介します。
まず画面下にある『Launchpad』をクリックします。
そして『テキストエディット』をクリックします。
そして作成したいフォルダを選択したらそこで『ファイル』タブにある『新規』をクリックします(左上が『テキストエディット』になっていることを確認)
そして右のような画面が表示されたら『ファイル』タブにある『保存』をクリックします。
そして『名前』でファイル名を変更します。
トップページのファイル名なので『index』にします。
さらに下の『フォーマット』を『Webページ(.html)』に変更して、右下の『保存』をクリックすれば完了です。
作成したフォルダ内にファイルがあるのを確認できます。
Macでファイルの拡張子を表示させるには、画面下の『Finder』をクリックして、環境設定 → 詳細 →『すべてのファイル名拡張子を表示』にチェックを入れればOKです。
CSSファイル作成
次はCSSファイルを作ります。
これはHTMLファイルで書かれたテキストファイルを装飾するファイルとなります。
装飾とはフォントサイズ、色、配置、余白など色々あるのですが、これがないとどうなるかというと、例えば当ブログのトップページだとこのような状態になります。
これにCSSファイルを作ると以下のようになります。
もちろんCSSファイルには必要なコードを書いた状態です。
このCSSファイルも作り方はHTMLファイルと同じですが、拡張子は『.html』ではなく『.css』になります。
そして一般的に『style.css』というファイル名になります。
ファイルを作成する場所はindex.htmlと同じ階層に『css』というフォルダを作り、その中にします。
フォルダはここですね。
そしてこの中にstyle.cssを作ります。
これで完了です。
ただしサイトにはほぼ間違いなく画像を使うと思うので、画像用のフォルダも作っておきます。
imgフォルダ作成
これもcssフォルダと同じで、index.htmlと同じ階層に作ります。
このフォルダ名はimgでもimageでも構いません。
このimgフォルダの中に使う画像を入れていく感じですね。
以上でWeb制作で最低限必要なファイルとフォルダの作成が完了しました。
あとはサイトに動きを付けたい時はjsフォルダを作ってjQueryなどのjsファイルを作ったり、複数ページのサイトであればindex.htmlと同じ場所にhtmlファイルを作ったりします。
こんな感じですね。
この辺はそのうち分かってくると思いますので、勉強を始めたばかりの人はまず以下の3つを作ればOKです。
- index.html
- cssフォルダ → style.css
- imgフォルダ
まとめ
今回はWeb制作で最初にする作業について解説しました。
当ブログでは他にもWeb制作に関する記事をたくさん書いているので、ぜひ参考にしてみて下さい。
以上になります。