【初心者向け】HTML&CSS基礎知識(必要なツールとファイル名のルール)【初心者向け】HTML&CSS基礎知識(必要なツールとファイル名のルール)HTML&CSS2022年05月25日Webサイトを作成するのに欠かせないHTML&CSS。そこで今回はこれからHTML&CSSを学習する上で、必要なツールとファイル名のルールについて説明していきます。自分が書いたHTMLやCSSがどのように画面に表示されるのか実際に手を動かして学習を進めていく方が理解も深まるかと思います。そのために必要なツールを準備しましょう。・まずはHTMLを書いてみよう!・次にCSSを書いてみよう!ファイル名のルールHTMLに必要なツール準備するものはテキストエディタとブラウザの2つです。ひとつずつ説明していきますね。実際に自分で書いたコードをインターネット上に表示させるには、土台となるHTMLと、それを装飾するためのCSSを書いていきます。何に書いていくかというとコーディングに特化したテキストエディタというものに書いていくことになります。テキストエディタとは、HTMLやCSS、他にも色々なプログラム言語を記述するためのメモ帳みたいなもので、お使いのパソコンにはじめから入っているメモ帳を使うこともできるのですが、今後HTMLやCSSなどを書いていくには専用のテキストエディタを準備した方が機能も充実しており便利です。Code」がおすすめです。Code」ダウンロードページからダウンロードしていきます。ページ内には、Windows・Linux・Macといった、それぞれのOS別インストーラーが用意されていますので、自分が利用しているPCに合ったものを選んでください。PC上にダウンロードしたらインストーラーを実行していきます。これから以下の手順でインストール作業を行います。インストール手順1規約に『同意する』にチェック→【次へ】2インストール先の指定は特別に必要がなければ、そのまま→【次へ】3Windowsのスタートメニューにショートカットを作成するかの選択ができます。ここも初期値のままで問題ありません。そのまま→【次へ】4追加タスクの選択は、『デスクトップ上にアイコンを作成する』にチェックをつけるのがおすすめです。5以上でVisualStudioCodeのセットアップは完了です。問題が無ければインストールを開始しましょう。6インストールまでにはしばらく時間がかかります。7インストールが完了したら『完了』ボタンをクリックします。無事にインストール出来ましたね。Code」を開くと英語で表示されているかと思います。英語で問題ない方はそのままで構いませんが、出来れば日本語がいいなという方は、以下の方法で日本語化出来ます。Code」を日本語化していきます。Code】というものをインストールします。この地球儀のマークのものになります。Codeを日本語化する手順1拡張機能のメニューを開く。2日本語化の拡張機能を検索する。Code】という名前ですが、検索に【Japanese】と入力すると出てきます。Codeを再起動します。これでHTML&CSSを書くためのテキストエディタの準備は完了です。次は、書いたHTML&CSSを画面上で確認するためのブラウザを準備します。Chrome」がおすすめです。Chrome」ダウンロードページからダウンロードしていきます。ダウンロード手順1右上の青い【Chromeをダウンロード】をクリック。2利用規約が表示されます。【同意してインストール】をクリック。Chromeのインストール用のファイルがダウンロードされます。4インストール用のファイルを開き、順次【次へ】や【OK】を押していけば完了です。以上で準備は整いました。実際に書いてみよう保存先フォルダの作成HTMLを書いて実際に書く前に、今後HTMLやCSSファイルを保存するための保存先フォルダを作っておきましょう。・デスクトップ上で右クリックし、「新規フォルダ」をひとつ作成します。・フォルダ名を変更しましょう。半角英数字であれば何でもいいです。ここでは「test」という名前で進めていきます。Code」に書いていきます。Code」開き、画面上の「ファイル」から「新規ファイル」を選びます。以下のHTMLを記述してみて下さい。(コピーしたものを貼り付けてもOKです。任意の名前(この例ではindex.html)を付けて、先程作ったフォルダ(この例ではtestフォルダ)に保存します。※ファイル名にはルールがあります。次の章で詳しく説明します。保存したHTMLのファイル(この例ではindex.html)をブラウザで確認してみましょう。Chrome」のブラウザ上にドラッグします。6ブラウザ上に以下の文字が表示されたら成功です!次にCSSを書いてみよう!HTMLは無事に表示されましたが、このままではちょっと味気ないですね。CSSを書くことで、配色を変更したりレイアウトを変更したりなど様々な装飾を加えることが出来ます。ここでは、文字の色を変更し、真ん中に配置するCSSを書いてみましょう。以下のCSSを記述してみて下さい。(コピーしたものを貼り付けてもOKです。任意の名前(この例ではstyle.css)を付けて、先程HTMLファイルを保存したフォルダと同じ場所(この例ではtestフォルダ)に保存します。※ファイル名にはルールがあります。次の章で詳しく説明します。ここまでで、フォルダ内にHTMLファイル(index.html)とCSSファイル(style.css)のふたつが存在していることを確認したら、再度、保存したHTMLのファイル(この例ではindex.html)をブラウザで確認してみましょう。手順は先程HTMLをブラウザで確認した5番目と同じです。上図のように文字の色が変更され、中央に配置されてる事が確認できましたね。ファイル名のルールファイル名のルールHTMLとCSSのファイル名にはちょっとしたルールがあります。」など、ファイルによて様々な拡張子があります。「.jpg」「.png」「.gif」など日本語は使えないファイル名、フォルダ名は半角英数字のみ使用できます。使ってはいけない文字のファイル名、フォルダ名はWebサーバーで正しく認識されません。_(アンダースコア)になります。それ以外の記号は使わないようにしましょう。空白は使えない空白(スペース)を含むファイル名は使えません。_(アンダースコア)で単語をつなぎましょう。機種依存文字等は使えない機種依存文字は文字化けをおこし、ファイルが読み取れなくなります。小文字で統一するWebページを閲覧する環境によっては、ファイル名の大文字小文字を区別し、違うファイルと判断される場合がありますので、ファイル名は小文字で統一しましょう。以下、良い例と悪い例で使用できる文字の種類をまとめておきます。CSSも同じルールになります。HTMLで制作するトップページのファイル名は、「index.html」という名前で保存するのが基本となります。index.htmlというファイル名なら、わざわざブラウザのアドレスバーにindex.htmlまで打たなくても良くなります。アクセスするURLが、「https://iroha-wd.com/index.html」だった場合、「https://iroha-wd.com/」と打つと「https://iroha-wd.com/index.html」と同じURLにアクセスします。index.htmlというファイルがあれば、そのファイルをトップページとして自動で認識してくれるようになっているわけです。まとめ今回は、HTMLとCSSを実際に書いてブラウザに表示するまでの流れを見ていきました。ブラウザ上に文字が表示された時はちょっと感動しますよね。HTMLもCSSも初めは呪いの呪文のように見えますが、よく使うタグなどがだんだん分かるようになってきます。英語が全くわからない方が現地で数ヶ月過ごす事で自然と英語が身に付くのと同じで、本を眺めるだけより、実際に手を動かし、都度ブラウザで確認する流れでの学習の方が早く身に付きますよ。