No-Class CSS Framework チャレンジ 2

published: 2021-09-05, updated: 2021-09-05

夏休みの宿題を最終日にやるように思い出して整理しています。思わぬ仕事で作業に追われて過ごした1年。付き合いかたをイイ加減にして止まっていたことを動かしています。

さて、No-Class CSS Frameworkですが現在このサイトで使用しているものをベースにCSSを更新しました。元のファイルはCharacter: 7461, Word: 245です。

CSSの見直しポイント3つ

1年ぶりに見直した感じでは、想定して用意したものを使っていなかったり重複したものを今後編集しやすいように再構成します。

サイトを作るとパターンが多くなりそうなリストタグ <ul>, <ol> 。一般的にメインメニューやサブメニュー、タグなどのラベルやページナビゲーションなどを考慮してたのですが、よくよくみると無駄な指定があったので削除します。

main > aside section ul { ... }

単純な変更ですが <aside> は限られるので <main> はまぁ含めなくても問題なかった。っていうレベルのものをちょこっと修正。

aside section ul { ... }

footer > nav#navigation a[rel="prev"]{ ... }

class 使わない代わりに aria-label 使ってるのはどうなのか！とかありますがスリム化しすぎてもわからなくなるので現時点では許してください。

nav[aria-label="IndexNavigation"] a[rel="prev"] { ... }

単純にミスですが@mediaクエリの prefers-color-scheme が light,dark の他にも何も指定してない記述がありました。これだけで850文字あるのでほとんどこれです。よくチェックしましょう。

また、使うことの多い<ul>は、重複してしまうケースが多いのでブラウザのデベロッパーツールを駆使し取り消し（上書き）状態をチェックしました。

@importsるためにどうするのがいいのか試行錯誤になりそうです。例えばBootstrapなどはnavbarやlabelsなどパーツ単位になっていますので_variables.scssで設定をして@importする感じにします。

このページは画像が一つなので前回投稿したページをチェック

Braveと広告ブロックとBATとBrave Creator
https://demo.openshared.net/craft/posts/brave-adblock

各サイトのチェック結果のページに移動します。

狙っての結果ですから結果は良好ですが、PageSpeedのモバイル結果はまだ改善できる余地があります。今後は、チェック結果を維持しつつアクセシビリティも考慮した表現の幅を増やすことを確認していく予定です。