更新日
05｜svgを利用してアイコンを実装しよう
web兄さん
動画解説と一緒にコードを書いていこう
課題用ファイルをダウンロード
今回は動画を見ながら一緒にファイルの修正をしていくので、以下のファイルをダウンロードしてください。
学習した内容を正しく反映できているかのチェック
ここまでの講座ではポートフォリオサイトのトップページに以下の技術を反映させました。
- カスタムプロパティ
- hover
- 擬似クラス
- 共通クラス（モジュール化）
- svg
上記の反映を全て完璧にできていたら以下の完成版と同じになっているはずです👍
SVGで文字情報を含みたい場合は？
例えば以下の例のようにテキストがないデザインだけどボタンであるため、SVGに文字情報を持たせなければいけない場合があります。（イメージとしてはimgのalt属性）
その場合はsvgの入れ子に<title>ここに文字情報</title>を追加してテキスト情報を記述しておきます。
こうすることで表示されませんが、ブラウザはテキスト情報を読み取りどんな要素かを理解することができます。
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Twitterでシェア</title>
<rect width="56" height="56" rx="28" fill="#1DA1F2"/>
<path d="M40 20.5497C39.101 20.9472 38.1481 21.2094 37.1723 21.3278C38.2013 20.7121 38.9713 19.7433 39.3388 18.6019C38.3727 19.177 37.3146 19.5813 36.2111 19.7971C35.5364 19.075 34.6599 18.5728 33.6958 18.3558C32.7317 18.1387 31.7246 18.2169 30.8055 18.5801C29.8864 18.9434 29.098 19.5748 28.5427 20.3923C27.9875 21.2098 27.6912 22.1755 27.6923 23.1638C27.6905 23.5421 27.7332 23.9193 27.8195 24.2877C25.8603 24.1908 23.9435 23.6819 22.1942 22.7942C20.445 21.9065 18.9025 20.6599 17.6675 19.1359C17.0381 20.2213 16.8455 21.5057 17.1289 22.7281C17.4123 23.9505 18.1503 25.0191 19.1932 25.7169C18.4102 25.6967 17.6439 25.4855 16.9612 25.1015V25.1625C16.961 26.3002 17.3544 27.4029 18.0746 28.2835C18.7949 29.1642 19.7977 29.7685 20.9128 29.9939C20.4903 30.1085 20.0545 30.1666 19.6168 30.1667C19.306 30.1673 18.9958 30.1367 18.6911 30.0753C19.0056 31.0545 19.6184 31.911 20.4437 32.5247C21.269 33.1385 22.2655 33.4788 23.2938 33.4982C21.5496 34.8691 19.3945 35.6126 17.176 35.6087C16.7829 35.6079 16.3902 35.5839 16 35.5367C18.2446 36.9955 20.8652 37.7695 23.5422 37.7644C32.6051 37.7644 37.5582 30.2524 37.5582 23.7376C37.5582 23.524 37.5532 23.3104 37.5429 23.1019C38.5058 22.4024 39.3376 21.5385 40 20.5497V20.5497Z" fill="white"/>
</svg>次回以降の流れ
ここまではポートフォリオのトップページを活用しながら簡単なセレクタや効率的な書き方を学習してきました。
初級編のゴールは下層ページの完成ですが、今まで学習したCSSの知識だけでは完成させることができません。
そのため、次回の講座からはまた新しいHTMLやプロパティの習得に戻ります。
また座学か〜。とガッカリしてしまいますが、ここから新しく覚えるCSSプロパティを身につければ、理論上ほとんどのWebサイトを実装することができます。