WEBサイトの作成方法
必要なもの
<PC>
・VS CODE（あると良い）
<スマホ、タブレット>
・ファイルアプリ（なんでもOK）
おすすめ
android :
IOS
初めに
このNOTEを見ているということはWEBサイトを作ったことがないって人が大半だと思います、なので今回は初心者向けの説明になると思います。ほんとに基礎的なところしか説明はしないですがもっと細かい部分を知りたいって方は有料のところを開放してもらえればかなり細かいところまで載せているのでよろしくお願いします。
STEP1 : ディレクトリについて知ろう！
まず初めに"ディレクトリ"というものを知る必要があります、ざっくり説明すると箱を分けてその箱に一つ一つ指示をしていくといった感じです。このディレクトリ構成にミスがあると動かなくなったりバグが生じる可能性もあるのでもしサイトが動かないみたいなことがあったらそこを見直してみるのもいいかもしれません。
それでは今回作成するWEBサイトのディレクトリ構成ってやつを見ていきましょう！
今回もテンプレートを用意させていただいたので下のZIPファイルをダウンロードしてください！
テンプレートをダウンロードができたらSTEP2へ！
STEP2 : コードを解読してみよう！
それではコードを書いていきましょう！まずはテンプレートを展開（解凍）してフォルダーを開きます
この中のindex.htmlというファイルを開くのですが、このままでは開けないんですよね。なので1工程入れていきます！※スマホの方のみ
inxdex.htmlを選択し、名前の変更で.htmlのところを.txtに変更します。
すると文字が書けるようになります！PCの方はフォルダをVS CODEに入れてもらえれば変える必要はないです
それではコードを書き始めていきましょう！下に書いてあるコードをコピーして、index.html（.txt）に張り付けてください
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>それではこのコードの解説をざっくり行います
<!DOCTYPE html>サーバー側にhtmlと認識させるためのコード
<html lang="ja">Lang（言語）の指定ですね、メインで使っている言語によってここは変更してください（日本語ならja英語ならeu）
<meta charset="UTF-8">文字化け防止コード
<title>Document</title>タブに表示する内容指定
STEP3 : 実践
それでは一つ簡易的なサイトを作成してみましょう！
index.htmlを開き、文字を付け足してみましょう！今回使用するコードは
<h1>じゆ</h1>h1はheadingの略で簡単に言うと見出しですね。hの後の数字は6まで設定することができ、数字をでかくすると小さくなっていきます。そしたらsaveをしてサイトを見てみましょう！（htmlを開く）
すると文字がでできたと思います！これで完成です！
最後に
ここまで出来たら立派なDeveloper（開発者）です！友達にでも自慢してやりましょう！笑
有料コース
今回は有料コースをご用意しました、一応有料コースの内容を書いておきます
・サイトを実際に公開する方法
・初心者、中級者むけのhtmlを細かく解説（discord）
・CSSの基礎的な部分、ちょっとしたサイトのテンプレートを購入者向けに配布
ここから先は
¥ 450
この記事が気に入ったらサポートをしてみませんか？