【週刊ドットインストール】 レッスン制作の進捗、HTMLの検証ツール、写真アップロード時の注意点

ゼルダの新作が発表されましたね…。ティアキンが一通り終わってしまってがっくり来ていたのですが、今度の新作も自由度が高くてなんとも楽しそう。9月末まであと3ヶ月…！それまでは仕事に没頭したいと思います。

楽しみすぎて落書き。なにか違うような気もするが楽しかったからヨシ！

さて、それでは今週もドットインストール社内のいろいろをお伝えしていきますね。

レッスン制作の進捗

今週は Emmet の無料レッスンをリリースしました。HTML/CSS のコーディングスピードを上げたい！という方におすすめです。

特にサイト模写などに取り掛かる前に覚えておくといいですね。レッスンの詳細は以下よりご確認ください。

なお、同時進行で「Laravel 入門」を作り直しています。最新版の Laravel 11 を Codespaces 上で学ぶことができるレッスンになります。来週頭には基本機能編をなんとかリリースしたい…！という感じです。お楽しみに。

なお、現在レッスン制作を検討しているのは以下ですね。頓挫する可能性もあったりしますが…汗、共有しておきます！

• Laravel入門を完成させる（Laravel 11対応、Codespacesを利用）

• Swiperでカルーセルを実装してみよう（Swiper、便利ですよね）

• Go言語 入門….（ちょっと時間かかりそうではあります）

• STUDIO入門…（ノーコードですが、とてつもなく良くできていますよね…）

HTML/CSSを極めるコーナー（仮）

Web 制作で迷いがちなトピックについてコラム的に解説していく不定期連載です。今回は HTML のバリデーター（検証ツール）について見ていきましょう。

HTML では「たくさんの書き方があって、唯一の正解はない」と言われますが、いくつかの「こう書いてはいけない」というルールがあります。たとえば「コンテンツカテゴリーに違反して、許可されている内容以外を書いてはいけない」などですね（プレミアム動画ですが…. → 参考レッスン）。

ただ、初学者のうちはそうしたミスに気づくことが難しいでしょう。そこでおすすめなのが VS Code の拡張機能、「W3C Web Validator」です。

これを入れておくと、HTML ファイルを編集しているときに「W3C Validation」というメニューが出てくるので、それをクリックすることで「ここがちょっとね…」という箇所を教えてくれます。

HTMLファイルを編集中にこちらをクリック

おかしなところに赤線が引かれて「ここがおかしいよ！」と教えてくれます

「表示」メニューから「問題」タブを開けば（英語ではありますが）詳細を教えてくれます

HTMLを正しく書いておけば、検索エンジンなどのコンピュータが内容を正しく解釈してくれるようになりますね。HTMLを書いたらとりあえずチェックしてみる、というクセをつけておくのがおすすめです。

おまけ

今年は「作ったことのないレシピを毎週試す」というチャレンジをしているのですが、最近作ったものを（突然ですが）あげておきます。

とはいってもクリームチーズといくら、小ねぎをクラッカーに載せて胡椒をふっただけですが…おいしいですよね、クリームチーズといくら。

おいしくいただきました

あと余談ですが、スマホなどで撮った写真にはEXIF情報や位置情報がついている場合があるので、個人的にはいったんPCで表示し、そのスクショを撮ってからあげる派です。

そのまま写真をあげると位置情報が流出してしまうことも…要注意です

自分が撮った写真にどういう情報がついているかは「EXIF 確認」などで検索して出てくるツールを使ってみるといいですね。ITリテラシーの基本かもしれませんが、こうした小技はこれからもちょくちょく紹介していきたいと思っています。

さて今週の週刊ドットインストールは以上ですかね。また来週も投稿するのでお楽しみに！