Web制作

Web制作のコーディングに最低限必要なファイルと作り方について解説

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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フォルダ

まとめ

今回はWeb制作で最初にする作業について解説しました。

当ブログでは他にもWeb制作に関する記事をたくさん書いているので、ぜひ参考にしてみて下さい。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作