デイトラweb制作上級編パターン2 DAY31~44①
nakano
卒業制作課題パターン2 1日目
今回からパターン② 歯科医院『みなみ歯科クリニック』のホームページを作成
画像の書き出し
アイコンの色を黒色→青色に変化させるため、pngではなくsvgで画像を書き出す
書き出しについては → web制作中級編 DAY11
svgにおいての書き出しは↓
※「パスのアウトライン」・・・ 使用しているフォントがほかの環境で別のフォントに変わったり文字化けしたりするのを防止
参考記事
・Adobe XDでのSVG形式の書き出し方法
→ プレゼンテーション属性などの意味
svgを保存先から開きデベロッパーツールでhtmlをコピー
表示したい場所にコードを貼り付ける
<ul class="header__nav">
<li class="header__nav-item">
<a href="#">
<!-- ここから -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect width="24" height="24" fill="#1391e6" opacity="0" />
<path
d="M20.42,10.18,12.71,2.3a1,1,0,0,0-1.42,0L3.58,10.19A2,2,0,0,0,3,11.62V20a2,2,0,0,0,1.89,2H19.11A2,2,0,0,0,21,20V11.62a2.07,2.07,0,0,0-.58-1.44ZM10,20V14h4v6Zm9,0H16V13a1,1,0,0,0-1-1H9a1,1,0,0,0-1,1v7H5V11.58l7-7.15,7,7.19Z"
fill="#1391e6" />
</svg>
<!-- ここまで -->
<span>ホーム</span>
</a>
</li>
</ul>rectタグとpathタグの「fill="#1391e6"」は削除しておく
色を付けたい場合はsvg pathタグに対して「 fill: 色; 」
// ↑のhtmlの場合
.header__nav-item {
a {
svg {
path {
fill: #1391e6;
}
}
}
}まとめ
今回からまた新しい卒業制作課題に取り組み始めました。
WordPress化は2回目なのでまだ時間はかかるかもしれませんが、前回よりは早く丁寧に終わらせることを意識したいです！
