勉強の続き：複数ページのサイトを作る（CONCEPTページのコーディング）

昨日はTOPページが終わりましたので、今日からCONCEPTページに入りました。

セクション3 CONCEPTページをコーディングしよう
　HTMLファイルを確認しよう
　CSSを書く前に確認しよう
　ページ上部の共通パーツを作ろう

今日はここまで。

どんどん新しい内容が出てきて、インプットもアウトプットも大変です。

えっとまず、タイトル文字を整えるところ。タイトル文字は、htmlファイルでは、conceptと小文字で書いてあるんです。それをCSSでわざわざ大文字にしている。そのために書いたのが、

text-transform: uppercase;

これで、「全部大文字にする」という意味なんですって。

どうしてわざわざこんなことをするのかというと、HTMLにそのまま大文字で書いてしまうと、音声ブラウザが略語だと誤解してしまう可能性があるからだそうです。

A.A.O.-ページが見つかりませんでした

。A.A.O.は、官公庁、独立行政法人、自治体等公共機関ホームページの制作・運用を支援する情報を配信します。

視覚に障がいがある人が使うブラウザなんですね！なるほどね！

webアクセシビリティというやつですね。

https://www.gov-online.go.jp/useful/article/202310/2.html

2024年から、努力義務ではなく義務化されると書いてあるじゃないですか…。勉強していかないと…。

話を戻すと、スクリーンリーダーとかで略語だと思われないために、htmlには小文字で書いておき、cssで大文字にする対策をする、ということが求められているということですね。

で、次に、「タイトル文字にグラデーションをかける。」

1.background-image: liner-gradient(135deg, #&&&&& 0%, #%%%%% 100% );　背景にグラデーションを指定する。マーカーをつけたところにはカラーコードが入ります。135degが傾き。%は、色をどこから変えるかの位置。
2.background-clip:text　背景をテキストの形に抜く
3.color: transparent;　文字色を透明にする

この3ステップで、文字にグラデーションをかけることができると。なるほど。

そのほか、background-clipに対応していないブラウザ向けにベンダープレフィックスも記述するとあって、？？？　となりましたが、background-clipは、新しいcssの技術なんですって。なので各ブラウザが対応していないことがあるので、対応していなかった場合のcssも指定しておく必要があるんですね…。すごいな、私、プログラミングとか初めて勉強してるんですけど、こういう細かい指定が大切なんですね。

今日ね、私ね、background-image: liner-gradient(135deg, #&&&&& 0%, #%%%%% 100% );のところの、パーセンテージの後の「,」を忘れたんですよ。

文字が表示されませんでした。うう…こういうケアレスミスが多い私、コーディング苦労しそうだなぁ…。

あとこんなサイトを見つけました。CSS グラデーションジェネレーター