デイトラ-Day26~27- ポートフォリオサイト作成(headerまで）
ポートフォリオサイト作成編、です。
えっ、この初期段階でポートフォリオなんか作れるの？とりあえず指示通りに作ってみます。
、、、と思ったけど、いろいろ考えるところがあり、指示通りではなくて少々変えてしまいました。あとでなんかおかしいことしていないかチェック用に、学んだことと合わせて、何を変えたかも記録しておきます。
Sassのファイル構造、ファイル名
まだ慣れていないのでなんとも、なんですが、色の変数名を_colors.scssというファイルに入れていたけど、そんなに細かくやってたらフォントとかz-indexとか、どんどん増えてすごいファイル数になるんでは？と思い、色以外も含めた変数まとめ用のscssファイルにしておきました（まだ試行錯誤中です）。
初：svgファイル
アイコン用にsvgファイルが準備してありました。
前にもちょっと調べて「文字が長すぎるぅ」と思って敬遠してしまってました。テキストだから軽いというのは覚えていて、使えたらよさそうとは思っていましたが。
ホバーした時の色の変化とかに柔軟に対応できるので、使い勝手よさそうです。（fill: 色コード;）
ただ本当に長くて場所を取るの嫌。…と思ってたけど、vscodeで表示を閉じることができた。SVGさん、これからお世話になりますが、小さく畳んでおきます。
Sassセレクタ指定の入れ子で「&__」とする件
以前、クラスを入れ子で「&__（ドットなしのアンダースコア2つ）」はだめ、クラス名で検索できないから、って言われた事があります。しかし今回のはそう書くようなカリキュラムになっている。
改めて調べてみると、大きめな開発だとやっぱり使ってはいけないというルールのところはあるらしい。個人開発だとクラス名で検索しなくてもmapで書いてある場所はわかるし、あまり困らない気もする。
が、違う理由になりますが、今回のお手本コードは入れ子が多すぎて、コード見慣れていない私にはわかりづらいと思ったので、やっぱりやめました。今は「&__」は使わないでやってみます。
headerのボタン
位置指定、あまりpositionを多用するのは好きではないので、お手本から変えてflexにしました。
アコーディオンボタンのアクセシビリティ
アコーディオンボタンのアイコンに、「menu」というテキストを入れて、「color: transparent;」 にする意味がわからない。。と思っていたら、同じことをなんと本日！質問している方がいました。すごいタイミング！ありがとうございます。
アクセシビリティ対応だったようです。なるほどー。
アイコンのみで情報を伝える場合
視覚的に認知できるユーザー以外も考慮します。
視覚的には要素を非表示にするユーティリティクラスを用意します。
「aria-label」属性を使った方が簡単そう、と思ったのですが、翻訳されないブラウザがあるとか、検索できないとか、コピーできないとか、問題がいろいろあるようです。
通常のテキストがベストというご意見がありましたので、私もこちらの方法を使っていこうと思います。
あとがき
見本サイトをじっくり見てから作り始めました。
いろいろ疑問あり、調べながらなのでなかなか進まないけど、勉強してる実感はあります。引き続きがんばりましょー。