Web制作

Web制作に最低限必要なファイルと作り方について解説

Web制作って何から始めればいいの?

Web制作に興味があるという方も、何から始めていいか分からないと思います。

今回はホームページを作るのに最低限必要なファイルについて解説します。

実際にコーディングをしていくにあたってこれがスタートになるので、何も分からないという人はまずここから始めましょう。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


Web制作に必要最低限のファイルとフォルダとは?

Web制作で最低限必要なファイルは2つです。

  • HTMLファイル
  • CSSファイル

それぞれのファイルを作成する前に、ファイルを入れるフォルダを作っておきましょう。

MacもWindowsも右クリックから作成出来ます。

新規フォルダ作成:Mac

新規フォルダ作成:Mac

新規フォルダ作成:Windows

新規フォルダ作成:Windows

今回はフォルダ名を『blog』にします。

blogフォルダ作成

blogフォルダ作成

この中にHTMLファイルやCSSファイルを入れます。

注意ポイント

フォルダ名やファイル名は日本語にするとエラーの原因になるのでやめましょう。

・半角 / 全角スペース
・機種(環境)依存文字
・ハイフン、アンダースコア以外の記号

上記もNGなのでご注意下さい。

 

HTMLファイル作成

HTMLファイルはテキストファイルとなり、これがホームページのテキストや画像などを構成する基本となるファイルになります。

 

Windowsの場合

Windowsではテキストドキュメントを作成すればOKです。

『右クリック → 新規作成 → テキストドキュメント』で作成できます。

こちらが作成されたファイルです。

Windows:テキストファイル作成

Windows:テキストファイル作成

『.txt』というのはファイルの種類を表す拡張子と呼ばれるもので、表示させるにはフォルダを開いた状態で上にある『表示』タブをクリックして『ファイル名拡張子』にチェックが入っていればOKです。

Windows:拡張子を表示

Windows:拡張子を表示

そしてこのファイルをHTMLファイルにするには、拡張子を『html』に変更します(拡張子を非表示にしてると変更出来ません)

これを、

Windows:拡張子変更

Windows:拡張子変更

こうすればOKです。

Windows:拡張子変更

Windows:拡張子変更

ここでこのようなポップアップが出ますが、ビビらず『はい』をクリックします。

Windows:拡張子変更(警告メッセージ)

Windows:拡張子変更(警告メッセージ)

これでHTMLファイルは出来ました。

Windows:拡張子変更

Windows:拡張子変更

ただし通常トップページのHTMLファイルの名前は『index.html』とするのが一般的なので、拡張子だけでなくファイル名も変えておきましょう。

Windows:ファイル名変更

Windows:ファイル名変更

これでHTMLファイルは完成です。

 

Macの場合

Macの場合はWindowsみたいに右クリックで作成は出来ません。

WindowsからMacに乗り換えた人が最初に戸惑うところかも知れません。

Macでテキストファイルを作成する方法はいくつかありますが、一番シンプルなやり方をご紹介します。

まず画面下にある『Launchpad』をクリックします。

Launchpadアイコン

Launchpadアイコン

そして『テキストエディット』をクリックします。

Mac:テキストエディットアイコン

Mac:テキストエディットアイコン

そして作成したいフォルダを選択したらそこで『ファイル』タブにある『新規』をクリックします(左上が『テキストエディット』になっていることを確認)

Mac:ファイル新規作成

Mac:ファイル新規作成

そして右のような画面が表示されたら『ファイル』タブにある『保存』をクリックします。

Mac:ファイル新規作成→保存

Mac:ファイル新規作成→保存

そして『名前』でファイル名を変更します。

トップページのファイル名なので『index』にします。

Mac:ファイル名とフォーマット変更

Mac:ファイル名とフォーマット変更

さらに下の『フォーマット』を『Webページ(.html)』に変更して、右下の『保存』をクリックすれば完了です。

作成したフォルダ内にファイルがあるのを確認できます。

Mac:index.htmlファイル

Mac:index.htmlファイル

Macでファイルの拡張子を表示させるには、画面下の『Finder』をクリックして、環境設定 → 詳細 →『すべてのファイル名拡張子を表示』にチェックを入れればOKです。

Mac:Finderアイコン

Mac:Finderアイコン

Mac:Finder → 環境設定

Mac:Finder → 環境設定

Mac:Finder環境設定詳細(すべてのファイル名拡張子を表示)

Mac:Finder環境設定詳細(すべてのファイル名拡張子を表示)

 

CSSファイル作成

次はCSSファイルを作ります。

これはHTMLファイルで書かれたテキストファイルを装飾するファイルとなります。

装飾とはフォントサイズ、色、配置、余白など色々あるのですが、これがないとどうなるかというと、例えば当ブログのトップページだとこのような状態になります。

じゅんぺいブログ:トップページ(CSSなし)

じゅんぺいブログ:トップページ(CSSなし)

これにCSSファイルを作ると以下のようになります。

じゅんぺいブログ:トップページ(CSSあり)

じゅんぺいブログ:トップページ(CSSあり)

もちろんCSSファイルには必要なコードを書いた状態です。

このCSSファイルも作り方はHTMLファイルと同じですが、拡張子は『.html』ではなく『.css』になります。

そして一般的に『style.css』というファイル名になります。

ファイルを作成する場所はindex.htmlと同じ階層に『css』というフォルダを作り、その中にします。

フォルダはここですね。

cssフォルダ作成

cssフォルダ作成

そしてこの中にstyle.cssを作ります。

style.css作成

style.css作成

これで完了です。

ただしサイトにはほぼ間違いなく画像を使うと思うので、画像用のフォルダも作っておきます。

 

imgフォルダ作成

これもcssフォルダと同じで、index.htmlと同じ階層に作ります。

このフォルダ名はimgでもimageでも構いません。

imgフォルダ作成

imgフォルダ作成

このimgフォルダの中に使う画像を入れていく感じですね。

以上でWeb制作で最低限必要なファイルとフォルダの作成が完了しました。

あとはサイトに動きを付けたい時はjsフォルダを作ってjQueryなどのjsファイルを作ったり、複数ページのサイトであればindex.htmlと同じ場所にhtmlファイルを作ったりします。

こんな感じですね。

Web制作に使うファイル

Web制作に使うファイル

この辺はそのうち分かってくると思いますので、勉強を始めたばかりの人はまず以下の3つを作ればOKです。

  • index.html
  • cssフォルダ→style.css
  • imgフォルダ

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作