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