就労移行支援事業所でＣＳＳ３を学ぶ②（アンカータグデザイン）（第６回）

就労移行支援事業所に通うminminです。

ＨＴＭＬ５を終えてデザインを学ぶということでＣＳＳ３を勉強始めました。

色がついたり、形がかわったり、少し動きがあったりするのをコードで書けると楽しいです。

今回もオンライン受講schooの講座で勉強します。

今日はその第３回、テーマは

「ＣＳＳ入門　アンカータグデザインのすべて」

目次はこんな感じです。

• 自己紹介＆アジェンダ
• 01:35

 

• htmlタグの特別な存在a
• 02:32

 

• htmlタグの特別な存在a: リンクについて
• 01:25

 

• aの役割を最大限表現する
• 01:32

 

• aの役割を最大限表現する: 【問い掛け】どうやってschoo WEB-campusの授業リストをクリックできると見破りましたか？
• 03:43

 

• aの役割を最大限表現する: 【実践】schoo WEB-campusの授業リストを真似して作ってみよう
• 08:54

 

• aの役割を最大限表現する: スマホでマウスオーバーしなくても「リンク先に飛べる感」を出してみる
• 02:14

 

• aの役割を最大限表現する: 【実践】schoo WEB-campusの「受講する」ボタンを書いてみよう
• 12:34

 

• aの役割を最大限表現する: ベンダーグラフィックスについて
• 02:22

 

• aタグマジック
• 00:13

 

• aタグマジック: 【実践】マウスオーバーした際のインタラクションを指定してみよう
• 05:37

 

• aタグマジック: 【実践】トランジションを書いてみよう
• 04:27

 

• aタグマジック: 3Dトランスフォームについて

 リンクがあって「飛べるんだなあ」と見た人に気が付いてもらう意識が大切で、捜しやすいようなデザインでまずはあるべきなのかと。

ボタンでもすでに多くのサンプルが公開されているので、それを利用させてもらいつつ、形を少し丸みを帯びる感じでborder-radiusを使ったり、大きさや色や配置の工夫も様々実践してみました。
またマウスオーバーした時の変化で、たとえば色が変化するopacityや変化する時間を調整するtransition-duration、１８０度回転させたりもできるtransform-rotateYなど工夫すれば、結構良い感じな仕上がりになるだろうなあと思いました。