# Discordコミュニティはこちら はい、どうもこんにちは。胸形です。 このチャンネルでは、今流行りのAIを使って、 開発未経験からでもプログラミングを学ぼうというコンセプトで、 開発の基礎知識や最新のAIツールについて お話ししていきます。 今回はですね、HTML言語っていうやつを もうちょっとだけ深掘りさせてください。 以前話した内容で、ウェブサイトの作り方が 大きく分けると2つあるよっていう話をしまして、 その中でそのHTMLというのを直接書くパターンと フレームワークというやつを使うっていう、 2パターンあるよっていう話をしたんですけど、 そのHTMLですね、ちょっと専門用語がんがん出ているんですが、 そちらのもうちょっと詳しいこと、 AIプログラミングの文脈で必要なところをもうちょっとだけですね、 説明したいと思います。 HTMLっていう言語なんですけど、 生成されるファイルがだいたいドット小文字で HTMLと書かれたファイルができるんですけど、 このですね、そのHTMLっていうファイルの名前の部分が URLの一番最後の部分に紐づく形になります。 なので、top.htmlだったら、 URLの最後にスラッシュtop.htmlという形で、 そこの名前の部分がですね、 URLの最後に使われるっていう形になるんですけど、 1個だけ特別な名前がありまして、それがインデックスですね。 作員とかそういう意味のindex.htmlという名前で作成したときだけは、 そのファイル名を省略できるという特徴がもともとあるので、 AIプログラミングで作成するときですね、のファイル名は、 index.htmlで作ってという一文を入れると、より安心というか短い URLで指定できるようになるかなと思ったので、 こちらちょっと補足ですね。 もしその複数のページに渡るものがあったら、そのファイル名を変えたものをいくつか作ってですね、 トップページから、例えばブログに行ったりとか、あとはお仕事ページ、ワークスみたいなページに行ったりっていう繊維があるときは、 それぞれ違う名前のhtmlファイルを作ればいいんですけど、 1ページだけのものであれば、基本はこのindex.htmlという名前で作るようにしてほしいですし、 一応AIに全部お任せで作ったときにも、そういう名前になっているかどうかは、念のためチェックするといいかなと思います。 仮にAIが違う名前で作ったとしても、名前部分だけなら自分で手動でリネーム、名前を変更すれば大丈夫なので、 ここですね、1つウェブページを作るときにはチェックするポイントになるかなと思います。 もう1つお話ししたいところで言うと、作成したページをどうやってチェックするかなんですけど、 ちょっと口頭なので簡単な方法でご紹介すると、作ったページをですね、作ったファイルか、 htmlのファイルを何かしらフォルダーで開いたときにダブルクリックをして開くっていうふうにするとですね、 その中身がすぐに確認できるというようになります。 なので作るだけ作って、中身チェックせずに公開とかもできるんですけど、 基本的には作ったものを実際に開いてみると、使っているブラウザで大体開かれると思うんですけど、 もし開かれないときは、そのhtmlファイルをですね、ドラッグ&ドロップマウスとかで引っ張って持っていくと、 中身が確認できるようになるので、こちらも作る上でチェックするときにぜひ活用してもらえればと思います。 あともう1つだけ、ここに関しては知ってなくても大丈夫なんですけど、 Webページはhtmlっていうので作られるよという話をしたんですけど、 大きく分けると3つの要素で作られていて、1つはhtmlというタグで囲われた部分ですね、っていうのがあって、 もう1つがCSSっていう、こちらはですね、見た目の装飾の部分に関わるところっていうのと、 あともう1つがJavaScriptっていう、サイトの動きの部分を制御するっていう、大きく3つのパーツに分かれていて、 それぞれ別々のファイルとして作るっていうこともできますし、1つのhtmlというファイルの中にまとめて定義するっていうこともできるので、 AIに完全にお任せしたときは、1つしかファイルができないときと、3つですね。 .htmlと.cssと.jsという3つができる場合があるんですけど、中身としては一緒で、 その3つのパーツを分離するか1つで書くかという違いがあったりします。 なので、htmlっていうので、全体の枠組みですね。 どういう関係性で、どういう位置に何を表示するかっていうのを定義して、 CSSでより細かい配置とか、あとは見た目の装飾、背景の色とか、文字のサイズとか、枠線とかを定義して、 そのままだと完全に動かないページになっちゃうので、JavaScriptっていうのを使って、ボタンを押したら何かコードをアクションするとか、 あとは時間経過でちょっと背景が動いたりとか、そういうことを司っているという形で分離されております。 ということで、今回はhtmlというやつの簡単な特徴についてお話しして、 AIで作るときに気をつけなきゃいけないのは、まずファイル名ですね。 というのが、index.htmlという名前だったら、公開したときに省略することができるんですが、 違う名前だった場合には、その名前をちゃんと指定しておかないとページが開けないということになるので、 作ったファイル名に関しては気をつけてくださいよという話と、あとは作ったものを確認するときはダブルクリックで開けばOKと。 もし、設定によってたまにダブルクリックでページが開かれないよということがあるんですけど、 そのときはWebブラウザーですね。Google ChromeとかMicrosoft Edgeとかに対して、 そのドラッグ&ドロップすれば確実に見れるようになるかなと思います。 もう一つが、一応その三つのパーツに分かれていて、AIの作り方によっては、htmlとcssとjsという三つに分かれることもありますし、 一つのhtmlというファイルの中で全部定義するという方法があるので、増えたり減ったりするかもしれませんが、 そういう作りだよということだけ覚えていってもらえればいいかなと思います。 ということで、今回改めてWebサイトを作るときのhtmlという言語のちょっとした豆知識みたいなことを紹介させていただきました。 では、今回は以上にさせていただきます。今回もお聞きくださいましてありがとうございました。