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