2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

HTML/CSSファイルの作成方法を解説します!

HTML/CSSファイルを作成したい人

HTML/CSSファイルを作成したいんだけど、どうすればいいのかな?

この記事は上記のような疑問を解消するものとなっています。

まずはWebページを作成する必要があります。

具体的にはコンテンツをHTMLでマークアップして、デザインをスタイルシートで設定します。

それでは、この記事ではHTML/CSSファイルの作成方法をみていきましょう。

気になる方は是非、最後まで読んで頂ければと思います。

Webページを作成するために必要なツール
  • テキストエディタ
  • ブラウザ

1.HTMLファイルの作成方法

HTMLファイルの作成手順
  1. メモ帳を開く
  2. ファイルのエンコードの種類を「UTF-8」にする
  3. 「ファイル名.html」で保存する
注意

ここではメモ帳でHTMLファイルを作成していきますが、他のテキストエディタでもHTMLファイルを作成できます。

メモ帳を開き、「名前を付けて保存」をクリックすると以下のような画面が表示されます。

ファイル名は「index.html」とします。

文字コードは「UTF-8」として保存をクリックすると完了です。

HTMLファイルの拡張子について

HTMLファイルの拡張子は「ファイル名.html」または「ファイル名.htm」とします。




2.CSSファイルの作成方法

CSSファイルの作成手順
  1. メモ帳を開く
  2. ファイルのエンコードの種類を「UTF-8」にする
  3. 「ファイル名.css」で保存する
注意

ここではメモ帳でCSSファイルを作成していきますが、他のテキストエディタでもCSSファイルを作成できます。

次にデザインを設定することができるスタイルシートファイルを作成していきます。

スタイルシートファイルを「style.css」という名前で保存します。

文字コードを「UTF-8」として保存をクリックすると完了です。

 

CSSファイルの拡張子について

CSSファイルの拡張子は「ファイル名.css」とします。




3.エンコードについて

文字コードはUTF-8以外にも数多くの種類があります。

UTF-8以外の代表的な文字コードは以下の通りです。

UTF-8以外の代表的な文字コード
  • JIS
  • Shift_JIS
  • EUC
  • Unicode

しかし、HTMLファイルとCSSファイルは「UTF-8」というエンコードで保存するのが標準となっています。

UTF-8はASCIIコードとの互換性が良いため、パソコンで扱いやすく、多くのソフトウェアで「UTF-8」が使用されています。

そのため、Webページを作成する時は、エンコードを「UTF-8」にすることをオススメします。




4.まとめ

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です