DAY4:ボタン、見出しを自在に作れるようになる

見出しやボタンのパーツが利用頻度がたぶん一番多いです。

HTMLやCSSで自在に作れる状態がベストです。そこまでいかなくても、コピペしたとしてどの値を変更すれば見た目が変わるか分かる状態にしておきましょう。

よくある見出しのパターンをXDで作ってみたので、これらをすべてコーディングで再現してください。
※ こちらのデザインカンプの再現は別のHTMLファイルに作成してください。

https://xd.adobe.com/spec/69a68ba5-f809-4bed-7ac0-a250330ad35b-1f97/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

この辺の作り方が分かるようになれば、他のデザインで使われがちなデザインもおおよそ再現できるスキルを持ててるようになるかと思います。

見出しやボタンのコードサンプル

自力で作るのが難しそうなら、サルワカ先生のサンプルを参考にしてみてください!

見出し

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

ボタン

CSSで作る!押したくなるボタンデザイン100(Web用)

※ マウスホバーについては、また別日で課題を用意しているので、今はどちらでも大丈夫です。

余裕があったら…

アローアイコンを3パターンで表現

色々なデザインのボタンがありますが、結局一番多いのは、シンプルなボタンデザインにアローアイコンが付いているパターンです。アイコンが画像で手に入る前提でアローボタンが作れるようになっていれば、おおよそ大丈夫です!

ボタンでアローアイコンをCSSで表現する3つの方法

例えば今回作成した「ボタンはこちら2」を、以下の3パターンで再現できるかやってみてください!

  • 背景画像
  • 疑似要素
  • HTMLタグ

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事