【STEP2】コードを書く準備をしよう!

今回はWebページのコードを書くための準備をします

一番初めにやることは、自分のパソコンにWebページのフォルダを用意することです

そのフォルダにHTMLファイルやCSSファイルを作りコーディングします

HTML・CSSファイルはメインコンテンツを書き始める前に書いておかなければならない「決まり文句」のようなコードと

インターネットにきちんと表示させるための「お約束」コードがあります

実際の手順を図解にしてなるべくわかりやすく説明していきますね

でははじめましょう！

まだテキストエディタとブラウザの準備ができてないよーという方はこちらを参考にしてください

【STEP1】Webサイト作成のツールを準備しよう

Webサイトを自分で作るために必要なふたつのツール、テキストエディタとブラウザの準備のしかたをご紹介します

インストールしたVSコードをさっそく使ってみようね！

作業の流れ

自分のパソコンにWebページのフォルダをつくる
VSコードを起動してHTMLファイルやCSSファイルをつくる
HTML・CSSファイルの「決まり文句」と「お約束」を書く

１．Webサイトのフォルダをつくる
２．Webサイトのファイルをつくる
３．HTML・CSSファイルに書き込む「決まり文句」と「お約束」
ショートカットキーを使ってコードを書こう
まとめ

１．Webサイトのフォルダをつくる

まずは自分のパソコンにWebサイトのフォルダを作ります

データをまとめて収納しておく箱を事前につくっておく作業です

「ローカルディスクD（Dドライブ）」の中にフォルダを作るのがおすすめ

CドライブはWindowsのシステムがインストールされているので、容量が少なくなるとパソコンの動きが遅くなったりします

それを避けるためこれからつくるデータはDドライブでの保存がおすすめです

さっそく作っていきましょう

①　Dドライブに「blogsite」フォルダを作ります

・Dドライブを開き、右クリック→新規作成→フォルダを選択

「blogsite」フォルダを作成しましょう

・次につくった「blogsite」フォルダをダブルクリックして開き

中に再びフォルダをつくっていきます

②「blogsite」フォルダ内に「assets」フォルダをつくります

・「assets」フォルダをつくります

プログラミングのプロジェクトを作るときによく使われるフォルダ名です

③「assets」フォルダ内に「css」フォルダと「images」フォルダをつくります

・今回は「CSS」と「image」フォルダを準備します

後でまた説明しますが

●スタイルシートを増やす場合は「CSS」フォルダへ

●画像を取り込みたい場合は「imege」ファイルへ

データを保存していきます

DドライブにWebページのフォルダができました

次はVSコードでの作業に移ります

２．Webサイトのファイルをつくる

VSコードを起動します

先ほどDドライブにつくった「blogsite」フォルダの中に、これからコーディングに使うファイルを用意します

④「ファイル」から「フォルダを開く」→「blogsite」フォルダを選択

・ファイル→フォルダを開くで、先ほどDドライブにつくった「blogsite」フォルダを選択します

「blogsite」フォルダの中につくったフォルダも確認できました

⑤「blogsite」フォルダ内に「新しいファイル」→【index.html】ファイルをつくります

・「blogsite」フォルダの直下に【index.html】ファイルを作ります

index.htmlファイルの作り方

この【index.html】ファイルがWebサイトの骨組みになります

必ず「blogsite」フォルダの中に作成してください

⑥「css」フォルダ内に「新しいファイル」→【style.css】ファイルをつくります

・「CSS」フォルダを選択してから「新しいファイル」アイコンをクリックします

この順番で作業をすることで「CSS」フォルダの中にファイルをつくることができます

これからこの【style.css】ファイルに

●Webサイトの文字の大きさや色

●レイアウト

などの見た目の装飾部分を書き込んでいきます

準備はできたかな？
次からさっそくコードを書いていくよ！

３．HTML・CSSファイルに書き込む「決まり文句」と「お約束」

HTML・CSSファイルはメインコンテンツを書き始める前に書いておかなければならない「決まり文句」コードと

インターネットにきちんと表示させるための「お約束」コードがあります

それぞれ説明していきます

HTMLファイルの「決まり文句」= DOCTYPE宣言

<!DOCTYPE html>

<!DOCTYPE html>

これは『このHTMLファイルは「HTML5」というバージョンで書きます』ということをブラウザに読み込む機械に知らせているのです

『DOCTYPE宣言』というもので、このファイルがHTML文書であることや言語の種類、バージョンをブラウザに認識してもらうために書きます

いろいろな宣言があるのですが、現在のブラウザは最新バージョンのHTML5にほとんど対応しているので初心者のうちはこれだけ覚えておけば大丈夫です

HTMLファイルの「お約束」= <head>要素のコード

<!DOCTYPE html>に続いてファイルの始めに必ず書きます

<head>要素と言ってWebページには表示されない部分のコードです

ページに関する情報をまとめて書いておく場所で

・ページのタイトルと説明
・参照するファイルの場所
・ページで使用するフォント

などWebページを表示させるための情報を書いておく場所です

下のコードはこれから作っていくWebページの<head>要素部分です

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeチャレンジブログ @self made</title>
    <meta name="description" content="HTMLとCSSでWebサイト作成チャレンジ！">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/sanitize.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="icon" href="./assets/images/chlle-favi.ico">
</head>
<body>
    
</body>
</html>

うわぁ…なんじゃこれ…って思ったんじゃないでしょうか

アルファベットがたくさん…ちょっとひるみますよね

でも慣れてくれば書いてある意味もわかってきますので安心してくださいね

これからここに書いてある内容を説明するね！

はじめはなんのことかわからないと思うので
”ふ～ん”程度で読んでもらえればOKです

＜html lang=”ja”＞
このHTMLファイルは日本語で書かれていますよ、という意味です

＜meta＞タグ
Webページの情報を記録しておくためのタグです
metaタグにはいろいろな属性があります

<meta charset=”UTF-8″>
このファイルは文字コードを「UTF-8」に指定していますよ、という意味
「UTF-8」はHTMLで推奨されている文字コードです
ブラウザ表示の文字化けも防ぎます

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
インターネットエクスプローラー(IE)をどのバージョンで見せますか？という意味
ここでは”IE=edge”で最新バージョンで指定しています

<meta name=”viewport”・・・>
『”viewport”』はさまざまなデバイス（パソコンだったりスマホだったり）で見たときにどう映るかの設定です
デバイスの画面の大きさにあわせて表示するよという意味です

＜meta name=”description” content=”・・・>
Googleなどの検索エンジンに表示されるサイトの中身を説明する文章を書くところです
ユーザーが検索した時にどのようなページなのか確認できるので、ページの内容を簡潔にまとめて書いておきます
50～120文字が適当とされていてSEO対策に必要なところです

＜title＞・・・・＜/title＞
「・・・・」の部分がwebサイトのタブに表示されます
また、検索した時の検索結果の一番はじめに表示される部分です

＜link rel=”・・・” href=”・・・”＞　linkタグ
検索エンジンやブラウザに「このHTMLファイル」と「外部のファイルやページ」が関連してますよと伝えるためのコード
ここでは文字フォントやCSSファイル（スタイルシート）、画像を読み込むための記述がしてあります

それではさっそく用意した【index.html】ファイルにコードを書いてみましょう！

えっ？書けって言われてもね…こんなに？いきなり書くの？って思いませんでしたか？

Webサイトをブラウザに表示させるためには必要な記述なのですが、いっぱいあるし覚えるには長いし…書くのは面倒なコードですよね

でも大丈夫！

VSコードの補完機能を使って書けば、あっという間に記述の半分をすることができます

あとは少しの修正と必要なものだけつけ足していけばＯＫ

『！』+tabキーで<!DOCTYPE html>とそれから先の記述がまとめて出てきます

『！』+ tabキー　押してみて！

これが補完機能で出てくるコードです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

ブラウザに表示させるために足りないコードがあるので追加していきます

黄色くなっている部分が修正と追加した部分です

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeチャレンジブログ @self made</title>
    <meta name="description" content="HTMLとCSSでWebサイト作成チャレンジ！">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/sanitize.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="icon" href="./assets/images/chlle-favi.ico">
</head>
<body>
    
</body>
</html>

では修正と追加をしてきましょう

①＜html lang=”ja”＞へ修正

<html lang="ja">

補完機能を使った場合、初めは＜html lang=en”＞となっています

“en”は英語という意味です

“ja”となおすことで、このHTMLファイルは日本語で作られていることを読み込む機械に知らせています

②<title>・・・</title>の修正

<title>Codeチャレンジブログ @self made</title>

<title>・・・</title>の部分にはWebサイトのタイトルをいれます

これからつくっていくWebサイトのタイトルを自由に入れてくださいね

③<meta name=”description” content=”・・・・”>

<meta name="description" content="HTMLとCSSでWebサイト作成チャレンジ！">

Googleなどの検索エンジンに表示されるサイトの中身を説明する文章を「・・・・」とのところに書きます

検索するとこのような表示になりますよね

ここの説明書きの部分にディスクリプションの「・・・・」の部分が表示されやすいと言われています

④【style.css】の読み込み

<link rel="stylesheet" href="./assets/css/style.css">

先ほどつくった【style.css】ファイルをここで読み込ませます

style.cssファイルを修正や追記した時、index.htmlファイルを更新するたびに読み込みと更新をすることができます

VSコードでのCSSファイルの追記（読み込み）のやり方

＜link＞と打ち込みます。
打ち込む途中でVSコードの補完機能が働き、候補の一覧があらわれます
＜link＞が選択されているのを確認して「tab」キーを押します
選択肢が下の方にあった場合は矢印キー「↓」を押してください
「./」と入力します
フォルダやファイルが候補にあらわれます
style.cssファイルのあるフォルダを上から順番に選択していきます
「assets/」+　Enter
→「css/」+ Enter
→「style.css」+ Enter

⑤文字コードとリセットCSSを追加する

文字コードとCSSファイルの読み込みの記述をつけ足します

パソコンやスマホなどさまざまなデバイスやブラウザでも表示できるように、Webフォントやスタイルシートを読み込むための記述をしておく必要があるためです

たとえばブラウザにはMicrosoft EdgeﾏｲｸﾛｿﾌﾄｴｯｼﾞやSafariｻﾌｧﾘ、Google Chromeｸﾞｰｸﾞﾙｸﾛｰﾑなどいろいろあります

ブラウザごとにHTMLファイルなどのコードの読み取り方があるため、画面の表示の仕方に違いがあります

そのためGoogleChromeで問題なく表示されていたものがSafariではレイアウトが崩れてしまっている、ということが起こりがちです

そのブラウザごとの表示の違いに、これから作るWebサイトを対応させるためのコードを書いておくわけです

それぞれ別のサイトからダウンロードしていきます

文字のコード　＝　Google Fonts

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

WebフォントサービスであるGoogle Fonts

Webフォントとはインターネット上にあるフォントデータのこと

パソコンやスマホなどのデバイスの違い、ブラウザの違いに対応して表示をしてくれます

しかもおしゃれ♪うれしいですね

今回はその中でもよく使われている日本語対応のWebフォント「Noto Sans Japanese」を利用します

Google Fontsのダウンロードから読み込みのやり方

まずはこちらのサイトにアクセスしてください

Noto Sans Japanese - Google Fonts

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language

Noto Sans Japaneseのページを開くとフォントの太さを選べますので、お好きなものを選択してください

今回は「Regular400」と「bold700」を選択しました

＜link＞にチェックを入れて、コードをコピーします

コピーしたコードをVSコードに貼り付けます

ここからはCSSファイル用の設定です

CSSフォントファミリーの部分をコピーします

VSコードの「style.css」ファイルを開き、貼り付けます

これで文字コードが追加できました

リセットCSS　＝　サニタイズCSS

<link rel="stylesheet" href="./assets/css/sanitize.css">

ブラウザごとのレイアウトなど、見た目の違いをなくすためのスタイルシートです

ダウンロードしてCSSフォルダに保存します

サニタイズCSSのダウンロードから読み込みのやり方

まずはこちらのサイトにアクセスしてください

sanitize.css

一番下までスクロールして「Download」をクリックします

ダウンロードが始まります

終了したらクリックしてください

「sanitize.css」ファイルを選択した状態で右クリックし、コピーのボタンをクリック

Dドライブの「blogsite」フォルダをクリック

「blogsite」フォルダ　→　「assets」フォルダ　→　「CSS」フォルダへ移動して「sanitize.css」ファイルを貼り付けます

VSコードを開いて「sanitize.css」ファイルが反映されているか確認します

「sanitize.css」ファイルを読み込みます

「style.css」を読み込んだ時と同じように補完機能を使って書き込んでいきます

「sanitize.css」ファイルを

書いておく位置に注意しよう！

サニタイズCSS（sanitize.css）はCSSファイルの土台となるため、上書きされるのを前提とします

スタイルシート（CSS）というものは後から書いた方を優先するので

これから私たちが書いていく『style.css』ファイルの上（前）に記述します

これでリセットCSSの追加ができました

CSSファイルの「決まり文句」 = 文字コードの宣言

CSSファイルの一番初めに書く決まり文句です

@charset "utf-8;"

『”UTF-8”』は文字コード

HTMLファイルの<head>部分にも書きましたね

CSSファイルも同じようにこのファイルはこの文字コードで書いてるよ、と機械に知らせるために書いておきます

様々なブラウザに対応して文字化けを防ぐことができます

CSSファイルの「お約束」= フォントファミリー（ font-family）のコード

@charset "utf-8;"

body {
    font-family: 'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

さきほど文字コードの追加をした時に、フォントファミリーのコードをコピーして設定をしました

ですがそれだけではブラウザに反映しないので、ここで仕上げていきます

ネット環境が悪い時にフォントがうまく読み込まれない、といった場合の代替えフォントも追記しておきます

今回はゴシック体のフォントで設定します

はじめに設定した「Noto Sans Japanese」が読み込めない　→　じゃあつぎは「Helvetica Neue」　→　これもダメ！「Helvetica」・・・というように読み込まれていきます

追加のフォントはこちらをコピーして使ってください

“Helvetica Neue”, “Helvetica”, “Hiragino Sans”, “Hiragino Kaku Gothic ProN”, “Arial”, “Yu Gothic”, “Meiryo”, sans-serif;

フォントファミリー設定

VSコード
CSSファイルのコードを修正します