【プログラミング・Web制作勉強ログ#93】6/9の積み上げ成果

2022年6月10日2022年6月11日

今日の積み上げ 181日目成果

https://twitter.com/o_89965328_k/status/1534824626769240065

＼宣言した内容はこちらです／

本日の学び

品質チェック＆エラー修正の無限ループ

　品質チェックが始まりました。しかしまたしても修正地獄。

　HTMLのエラーがないか、The W3C Markup Validation Serviceでチェックしています。

結果、40個以上もエラー出てきて「まじかよ・・」って思いました。

しかし、よーく見ると、エラーの内容はだいたい４つくらいのカテゴリになっていました。

source要素にaltは不要

imgタグのsrcに不要なスペースがある

お問い合わせフォームのselectタグ、labelタグにidが抜けている

aタグ内にボタン属性を入れてはいけない

　１番目と２番目のエラーである、picture＞source・imgタグの構成については、色んな人のコーディングをパクっているうちに間違った使い方をしているものがちょこちょこあったみたいです。

　自分なりにググって修正し、エラーがなくなるまで検証した結果、pictureタグ内はこういうコーディングが良かろうということになりました。多分これでいい・・・はず！！笑

            <picture>
                <source media="(min-width: 769px)" srcset="images/PC_FirstView_01.png 1x, images/PC_FirstView_01@2x.png 2x">
                <source media="(max-width: 768px)" srcset="images/SP_FirstView_01.png 1x, images/SP_FirstView_01@2x.png 2x">
                <img src="images/PC_FirstView_01.png" srcset="images/PC_FirstView_01.png 1x, images/PC_FirstView_01@2x.png 2x" alt="top">
            </picture>

pictureタグを修正する上で参考にしたサイトはこちら

あわせて読みたい

レスポンシブイメージはpicture要素で！ | Webデザイン・Webデザイナースクール今回はHTML5.1で新しく加わる要素の一つであるpicture要素について解説していきたいと思います。HTML5.1は2016年9月の勧告を目指して動いている仕様ですが、picture要素は…

模写修行