chevron_left

WebデザインのためのCSS入門

PREMIUM
第4回

CSS入門 -ナビゲーションデザインの全て-

2015年8月31日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 24

授業の概要

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトのデザインを担当するCSSを学んで行きましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で勧告となった最新情報に基づいてCSS2とCSS3を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとCSSに対する理解が深まります。

今回はサイトの要となるグローバルナビゲーション(いわゆるメニュー)のCSSデザイン手法を学んでいきます。基本指定から、マウスオーバーでインタラクションをつけてしまう手法まで学びますのでお楽しみに!

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/がオススメです。

参考ファイル: 「webデザイナーのためのcss入門」のコード一式のURL
http://behomazn.com/schoo/css_Introduction/

こんな人にオススメ

listタグのcss指定方法を一から学びたい方・メニューのcssデザイン手法をマスターしたい方・ナビボタンのcssデザインをマスターしたい方

チャプター

play_arrow
自己紹介&アジェンダ
01:41
play_arrow
サイトの要「グローバルナビ」
03:15
play_arrow
親要素の指定で子要素が決まる
01:47
play_arrow
親要素の指定で子要素が決まる: 【実践】スマホ用縦型ナビを作ってみよう
05:15
play_arrow
親要素の指定で子要素が決まる: 【実践】スタイルタグの中にcssを書いてみよう
05:01
play_arrow
親要素の指定で子要素が決まる: 【実践】headerとnavを書いてみよう
04:19
play_arrow
親要素の指定で子要素が決まる: 【実践】ボタンの指定を作ってみよう
04:28
play_arrow
親要素の指定で子要素が決まる: 【実践】navの中のulの指定をしよう
09:31
play_arrow
hoverの振る舞い
02:23
play_arrow
hoverの振る舞い: はみ出したものを非表示にする指定をしよう
07:12
play_arrow
hoverの振る舞い: オープンソースでコードを配布しているサイト
01:19
play_arrow
Q:アニメーションの「transition-dulation」は、 <nav>の方に指定するのですか??
00:24
play_arrow
Q:今後を考えるとNormalize.cssに慣れたほうがいいですか?
01:42
play_arrow
Q:なぜ最初からhtmlでナビを上にして作成してあるのでしょうか?
00:51
play_arrow
Q:position:fixedをつかうと下のコンテンツが上に上がってきてヘッダー部分と重なってしまいますがnavより下はどういうcssを使えばいいですか?
00:57
play_arrow
Q:色の指定で♯fffと♯FFFFFFの時の使い分けを教えてください
01:39
play_arrow
Q:<header></header>を最初にマークアップしなかった理由を教えて下さい。
00:41
play_arrow
Q:スマホの場合hoverは有効なのでしょうか?
00:53
play_arrow
Q:現場でSCSSって使ってるところ多いのでしょうか?
01:13
play_arrow
Q:navはseoの関係でメインとfooterの間に書くのが良いと教わりましたが、田中先生もそうされてるケースもありますか?
01:24
play_arrow
Q:サイドメニューは右側と左側、どちらをお勧めしますか?