1. はやつ~のしゃべる練習
  2. 「HTML Day 2026 Kyoyo」
「HTML Day 2026 Kyoyo」
2026-08-08 12:29

「HTML Day 2026 Kyoyo」

関連ページURL

感想

まだ感想はありません。最初の1件を書きましょう!

サマリー

「HTML Day 2026 京都」イベントに参加し、HTMLの基礎から最新の書き方までを学びました。ルビやファビコンの実装、Visual Studio CodeやEmmetといった現代的なツールの活用、さらにはAI(Claude)を使ったコーディングやGitHub Pagesでの公開方法を体験。HTML、CSS、JavaScriptの役割分担とAIの進化がウェブ開発に与える影響について考察しました。

HTML Day 2026 京都の概要と参加体験
こんにちは、しゃべ練やります。 今回のテーマは、「HTML Day 2026 京都」です。
8月8日は、HTMLの日みたいな感じなのかな。 世界中でイベントがあるということらしくて、
その中の一つとして、京都のイベントを 長山さんの方で主催いただいて、開催されるということで参加してみました。
ちょっと落ちてしまいまして、到着しまして、 今回参加したのが大木海岸というところに行きました。
京都の須城河原町からバスで5分とか10分とか 行ったところにある場所でした。
そこに入って、みんなでHTMLをかけて、 最後に発表というか、みんなでお披露目するという感じの場となっていました。
HTMLの知識とウェブ技術の変遷
HTMLは昔ですね、ホームページを作ろうみたいな時に、 多少は勉強して、IMGとか、Aって言ってHREFで打つとか、
そういうのは多少勉強しましたけれども、 そこからあまりアップデート、知識がされていなくて、
最近はHTML5になってみたいな、 昔のような書き方をするのか、今どきの書き方をするのか、
みたいなところもあまり詳しく把握できていないんですけれども、
昔はHTMLの仕様が今よりもすごく素朴、 HTMLとか周りの仕様が素朴だったので、
結構装飾みたいなところをHTMLの中で 頑張って書いたりしていたところが、
だんだんそれは装飾の部分と意味の部分を分離していくという風なところが、
考え方が変わってきているところなのかなという風に理解していまして、
装飾のところはCSSを使うところであったりとかですね。
最近はさらにその上にJavaScriptをガンガン使うことによって、
プログラム、静的なサイトの上にサイトを表示しつつ、
それをさらにJavaScriptでいかようにも料理できる、 するという時代になってきているのかなという風に感じています。
新たに学んだHTML要素と機能
今回改めて東方のwwwとかのページを見て勉強しながら書いていましたけれども、
今回特に勉強したこととしては、まずはRubyですね。
フリーガナーみたいなやつをつけることができるタグがありますけれども、
それを結構使ってみたりしました。
これまでも普通に使えるんだなということが分かりました。
あとはFabiconっていうのをつけてみたりしていました。
昔はICO、アイコンファイルみたいなのを作らないといけないのかなという印象がありましたけれども、
今の時は別にPNGのファイルでもJPEGのファイルでも特に問題なくFabiconとして表示してくれるみたいでした。
Fabiconに使うにしては大きな画像を指定してしまったので、それは本当にあまり良くないなと思いました。
現代のHTML作法と理解の難しさ
そんな感じで僕は初心者的にHTMLも勉強していましたけれども、
他の発表者の方とかはかなりすごい使いこなしているという感じの内容ですごかったです。
あとHTMLについて思うこととしては、
ドックタイプとかっていうのを書くのが今時の大作法だということみたいなんですけれども、
頭のところですね、HTMLのタイプが何かみたいなのを書く、
HTMLタグの前に書くのかな、みたいにしたけれども、
そういうのがたまにしか書かない僕としては分かりにくいというか、
あとHTMLでこのタイプはHTML5だよとか、バージョンはこれだよとかいうふうな書き方のほうが分かりやすいなと思うんですけど、
どういう経緯なのか、そうではないというところを改めて学んで、
僕はまだここでいてもどうこうなるわけでもないので、
それをまた改めてしっかり記憶に焼き付けて覚えるというところを頑張りました。
開発効率を高めるツールの活用
最初の写はもう完全に手で書く、手で写るというところを縛りとしてやって、
HTMLを書いてましたけれども、途中からちょっとずつ現代のツールを解禁して、
まずはVisual Studio Codeで開くようにして、
それだとフォーマットドキュメントというのをやると一発でインデントとかきれいに整えて、
今時のこういうふうに整えるべきというのにきれいに整えてくれるので、そういうのも頼ったりとかしてましたね。
あとはEmmetとかいうみたいですけれども、ビックリマーク、そしてタブとかエンタキーとかを叩くとひな形みたいなやつを貼ってくれる、
コードスニペットとかというのがあると思うんですけれども、
多分それに近い感じのことができる機能だと思うんですけれども、そういうのもちょっと便利に使ってみたりしました。
AIを活用したコーディングと公開
最後の方ではAIですね、クロードコードとかも参戦してですね、Rubyを難しい感じにだけ打ってみたいな、
このページに必要な情報を適当に書いてみたいな、丸投げ感のある感じでお願いしてみて、いろいろ追加してみたいとかいうのをやってみました。
あとはHTMLについてわからないなとか、画像がすごいでっかくなっちゃったけどもうちょっと小さくする方法は、
それはクロードのアプリのチャットの方で質問をしています。
そうすると、ウィルスというパラメーターを使えばいけますよとか教えてくれるので、それに沿って書いたりしてました。
書いたものは、これもクロードにチャットで質問して、GitHubにリポジトリを作ってリポジトリに上げて、それをGitHubページで公開するみたいなのを、
それも自分の勉強のためにやってもらうのではなくて、やり方を教えてというと、ウィザードチックにステップ5くらいやって、聞こえつつやって、
右ボタンとか押すと次のステップの指示が出てくるので、その指示に沿って、手順に沿ってやるとできるみたいなことが勉強になりました。
ウェブ技術の未来とAIの役割
今回初めてhtmldayというのがあるということを認知したんですけれども、他にもあるんですかね。
cssdayとかあるんですかね。
個人的にはrssdayがあったらいいんじゃないかなと。
そこが一番僕は、まさにそこは感謝したい、感謝するべきフォーカスポイントとしてはあるなと思ったりはします。
あとね、xmlとかいろいろありますよね。
今回もhtmldayなので、htmlファイルだけで頑張るのかなという印象もありましたけど、
結構ね、cssとかjavascriptとかも活用されてるなという印象でした。
最終的にはみんなhtmlとして、htmlが主職としてあって、
javascriptは何でもできちゃうんですけど、cssとか装飾というところになってくれるということなのかなと思います。
javascriptがプログラムチップにhtmlを書いてくれたりとか、動的にいろいろ動かしたりアニメーションしたりとかいうことができる。
アニメーション自体はcssでもできるし。
同じことをするにしてもやり方がいろいろあるので、結構僕とかは混乱してしまうんですけれども、
適材適所というところでやれるといいのかなというふうに理解しています。
あとはこの適材適所の中にAIも参戦してきたので、
AIを活用した中でさらに適材適所ポイントが変わってくるのかなというところで、
これからもいろいろ楽しくhtmlで遊べそうだなというふうに思いました。
まとめ
というわけで今回のおしゃべりは以上です。ではまた次回。
12:29

コメント

スクロール