個人プロフィールサイト作成に挑戦
こんにちは、インターンをやらせていただいているRyuseiです。今日もプログラミング学習（HTML, BEM）を進めたので備忘録を残していきます。
参考にしたのは schooの動画です。動画を見ながら、HTMLファイルの作成から手を動かして進めていきました。最終的にはラグジュアリーなサイトを目指して、基礎からコツコツ積み上げていきます！
cssは元々書かれているものを使って、次回cssは学んでいきたいと思います。
今日からサイト作成、ページ作成を便利するツールとして拡張機能のliveserverを導入していきます。
liveserverとは：
liveserverはVScodeなどにもある拡張機能で、サイトを表示しながらHTML 、CSSを書いていけるものになっています。
注意しなければいけないのはフォルダの指定などが開発フォルダと異なった参照をする場合があるのでその場合はパスの指定をするか、めんどくさい人は別のフォルダで開いて、作成してから、そのまま埋め込む形で使うと便利だと思います。
BEMとHTMLの基本
BEM（Block, Element, Modifier）を意識して、クラス名をしっかり付ける練習をしました。
<figure> <img src=”/mnt/data/CleanShot 2025-05-26 at [email protected]” alt=”HTMLのコード例”> <figcaption>HTMLのコード例。BEMを意識してクラス名を付ける練習中。</figcaption> </figure>
特に気をつけたポイントは以下の通り。
ハンバーガーメニューはbuttonタグで作成
右上などにあるメニュー表示ボタン（ハンバーガーメニュー）はdivなどの要素で作ってしまう人が多いようで、僕もBEMを学ぶ前はdivで要素を作っていました。
しかし、本当はbuttonタグて括って作ったほうがユーザー体験が向上するそうです。
理由
tabキーなどで順々でフォーカスが当たるようになって、視覚障害者などに優しい視覚障害者などに優しいデザインにできるから。
この時「aria-label”メニューボタン”」としておくとフォーカスが当たった時にメニューボタンと読み上げてくれるそうです。
- リストのclass名は複数ある時はitem、一つしかない場合はbody
- figure要素で画像とキャプションをまとめる
figure要素を使うことで画像とキャプションを一つにまとめて管理することができて便利です。
今日はここまでできたので続きは後日学習していきたいと思います。
次回の目標
次回からは、引き続き命名規則について学びながら、さらにサイトの作り込みをしていきたいと思います！
よりCSSを活用して、デザイン性の高いページに挑戦していく予定です。
おわりに
今回は、前回学んだBEMの概念、命名方法をハンズオンで学んでいきました。
少しずつですが、これからも積み重ねていけたらと思います。
最後まで読んでいただきありがとうございました！次回もよろしくお願いします！