おためし受講中

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

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/

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:41  (00:14 ~ )
    サイトの要「グローバルナビ」
    03:15  (01:55 ~ )
    親要素の指定で子要素が決まる
    01:47  (05:10 ~ )
    親要素の指定で子要素が決まる: 【実践】スマホ用縦型ナビを作ってみよう
    05:15  (06:57 ~ )
    親要素の指定で子要素が決まる: 【実践】スタイルタグの中にcssを書いてみよう
    05:01  (12:12 ~ )
    親要素の指定で子要素が決まる: 【実践】headerとnavを書いてみよう
    04:19  (17:13 ~ )
    親要素の指定で子要素が決まる: 【実践】ボタンの指定を作ってみよう
    04:28  (21:32 ~ )
    親要素の指定で子要素が決まる: 【実践】navの中のulの指定をしよう
    09:31  (26:00 ~ )
    hoverの振る舞い
    02:23  (35:31 ~ )
    hoverの振る舞い: はみ出したものを非表示にする指定をしよう
    07:12  (37:54 ~ )
    hoverの振る舞い: オープンソースでコードを配布しているサイト
    01:19  (45:06 ~ )
    【後半】質疑応答
    Q:アニメーションの「transition-dulation」は、
    00:24  (46:42 ~ )
    Q:今後を考えるとNormalize.cssに慣れたほうがいいですか?
    01:42  (47:06 ~ )
    Q:なぜ最初からhtmlでナビを上にして作成してあるのでしょうか?
    00:51  (48:48 ~ )
    Q:position:fixedをつかうと下のコンテンツが上に上がってきてヘッダー部分と重なってしまいますがnavより下はどういうcssを使えばいいですか?
    00:57  (49:39 ~ )
    Q:色の指定で♯fffと♯FFFFFFの時の使い分けを教えてください
    01:39  (50:36 ~ )
    Q:
    を最初にマークアップしなかった理由を教えて下さい。
    00:41  (52:15 ~ )
    Q:スマホの場合hoverは有効なのでしょうか?
    00:53  (52:56 ~ )
    Q:現場でSCSSって使ってるところ多いのでしょうか?
    01:13  (53:49 ~ )
    Q:navはseoの関係でメインとfooterの間に書くのが良いと教わりましたが、田中先生もそうされてるケースもありますか?
    01:24  (55:02 ~ )
    Q:サイドメニューは右側と左側、どちらをお勧めしますか?
      (56:26 ~ )