基本的には今までの知識を総動員すれば作れます。動画で初出のTipsのみ書きます。
目次
SPのみでCSSが読み込まれるようにする(media属性)
linkタグの中にmedia=”screen and (max-width:767px)”のように書くことにより、SPのみでCSSが読み込まれるようにできます。便利！
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" media="screen and (max-width:767px)">リンクの中身を表す(aria-label属性)
そのリンクの中身が何であるかをスクリーンリーダーなどで読み上げられるようにする属性です。今回はSNSのリンクに使いました。頭文字のみ大文字にします。
https://www.ofujimiki.jp/2015/11/04/aria-label/
特殊記号が絵文字になるのを防ぐ(lang属性)
以下のように書くことによって、©️マークがAndoroidで絵文字になってしまうのを防ぐことができるんだそうです。
<p class="footer__copy"><small lang="en">© 2020 sobolon All rights reserved</small></p><!-- /.footer__copy -->以上です。次はSass編ですが、長くなるため何回かに分けるかもしれないです。
コメント