読者です 読者をやめる 読者になる 読者になる

就労移行支援事業所でWEBデザインをゼロから学んでみた!

新横浜の就労移行支援事業所でWEBデザイン、PhotoshopやIllustratorといったソフトの使い方からHTML5/CSS3/jQuery、スマートフォンサイト用のコーディング方法、ワイヤーフレーム・デザインカンプの作り方までをゼロから一通り学んだ過程を記録しておきたくて。

就労移行支援事業所でCSS3を学ぶ②(アンカータグデザイン)(第6回)

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

 

HTML5を終えてデザインを学ぶということでCSS3を勉強始めました。

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

 

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

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

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

目次はこんな感じです。

 

 
  • 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タグマジック: 3Dトランスフォームについて

 

 

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

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

f:id:minmin999:20161222130826p:plain