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

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

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

就労移行支援事業所でCSS3を学ぶ③(ナビゲーションタグ)(第7回)

CSS

新横浜の就労移行支援事業所に通う、minminです。

 

CSS3の勉強もだんだんと進んできて全6回のうち今日はすでに4回目。
今日も、オンライン授業schooのCSS授業を使って勉強開始。

  


今日第4回のテーマはこちら。

「CSS入門 ナビゲーションのすべて」

目次はこんな感じ。

 
  • サイトの要「グローバルナビ」
  • 03:15
 
  • 親要素の指定で子要素が決まる
  • 01:47
 
  • 親要素の指定で子要素が決まる: 【実践】スマホ用縦型ナビを作ってみよう
  • 05:15
 
  • 親要素の指定で子要素が決まる: 【実践】スタイルタグの中にcssを書いてみよう
  • 05:01
 
  • 親要素の指定で子要素が決まる: 【実践】headerとnavを書いてみよう
  • 04:19
 
  • 親要素の指定で子要素が決まる: 【実践】ボタンの指定を作ってみよう
  • 04:28
 
  • 親要素の指定で子要素が決まる: 【実践】navの中のulの指定をしよう
  • 09:31
 
  • hoverの振る舞い
  • 02:23
 
  • hoverの振る舞い: はみ出したものを非表示にする指定をしよう
  • 07:12
 

 

いろいろな投稿記事をカテゴリー別にわけて並べて、利用する人が検索しやすいようにするもので、どんなHPにもあるサイトの要です。

スマホサイトで縦に並ぶグローバルナビを設置するコードを一緒に書いて練習しました。いままで一番難しく、今までやった内容を総動員する感じでした。

それでも縦にナビがきれいに配置され、マウスオーバーすると色が変わるようにhoverしたりして工夫できた画面を見ると、それっぽい感じで、なんか嬉しいです。

 

続いて第5回も受講してしまいました。

テーマは

「CSS入門 ナブバー(横並びメニュー)デザインのすべて」

目次はこんな感じです。

 
  • 横にならんだナブのデザイン
  • 04:48
 
  • 横にならんだナブのデザイン: yui css resetについて
  • 02:07
 
  • 横にならんだナブのデザイン: 【実践】貼り付けたlinkタグの下に styleタグを書き、その中にcssを書いていこう
  • 03:16
 
  • 横にならんだナブのデザイン: 【実践】liは⽩の背景⾊をしよう
  • 01:58
 
  • 横にならんだナブのデザイン: 【実践】liの幅を指定しよう
  • 03:49
 
  • 横にならんだナブのデザイン: floatの特性について
  • 04:36
 
  • ナブバーのデザイン: 【実践】liとliの間にmargin-rightを指定して隙間を作ろう
  • 05:12
 
  • ナブバーのデザイン: 【実践】displayを指定してマウスの当たり判定エリアを作ろう
  • 06:14
 
  • マウスオーバーでデザインを変える: 【実践】a:hover =aタグにマウスが乗っている状態に対してcssを指定しよう
  • 06:15
 
  • マウスオーバーでデザインを変える: オープンソースでコードを配布しているサイト
  • 01:19

 

今回はPCサイトで良く使われている横のナビゲーションタグ、ナブバーを作りました。

一緒にコードを書きながらでしたが、幅を合わせたり、仕切りの線を入れたりと様々なCSSコードを書かないといけないのがなかなか難しかったです。

自分でオリジナルを作るならしっかりできるようにならないといけないでしょうが、ちょっとここまではできるか心配になってきました。

ならばオープンソースになっているものを使って、あとはカスタマイズしていく方が早いような気が。弱気になっているからなのかもしれませんが、カスタマイズする際のベースとなる知識を身に付けている位に考えれば良いかと。

焦らず頑張っていこう!

f:id:minmin999:20161222190936p:plain