就労移行支援事業所でＣＳＳ３を学ぶ③（ナビゲーションタグ）（第７回）
新横浜の就労移行支援事業所に通う、minminです。
CSS3の勉強もだんだんと進んできて全６回のうち今日はすでに4回目。
今日も、オンライン授業schooのＣＳＳ授業を使って勉強開始。
今日第４回のテーマはこちら。
「ＣＳＳ入門 ナビゲーションのすべて」
目次はこんな感じ。
- 自己紹介＆アジェンダ
- 01:41
- サイトの要「グローバルナビ」
- 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
- hoverの振る舞い: オープンソースでコードを配布しているサイト
いろいろな投稿記事をカテゴリー別にわけて並べて、利用する人が検索しやすいようにするもので、どんなＨＰにもあるサイトの要です。
スマホサイトで縦に並ぶグローバルナビを設置するコードを一緒に書いて練習しました。いままで一番難しく、今までやった内容を総動員する感じでした。
それでも縦にナビがきれいに配置され、マウスオーバーすると色が変わるようにhoverしたりして工夫できた画面を見ると、それっぽい感じで、なんか嬉しいです。
続いて第5回も受講してしまいました。
テーマは
「ＣＳＳ入門 ナブバー（横並びメニュー）デザインのすべて」
目次はこんな感じです。
- 自己紹介＆アジェンダ
- 01:16
- 横にならんだナブのデザイン
- 04:48
- 横にならんだナブのデザイン: 【実践】貼り付けた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
今回はＰＣサイトで良く使われている横のナビゲーションタグ、ナブバーを作りました。
一緒にコードを書きながらでしたが、幅を合わせたり、仕切りの線を入れたりと様々なＣＳＳコードを書かないといけないのがなかなか難しかったです。
自分でオリジナルを作るならしっかりできるようにならないといけないでしょうが、ちょっとここまではできるか心配になってきました。
ならばオープンソースになっているものを使って、あとはカスタマイズしていく方が早いような気が。弱気になっているからなのかもしれませんが、カスタマイズする際のベースとなる知識を身に付けている位に考えれば良いかと。
焦らず頑張っていこう！
