おためし受講中

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:16  (00:14 ~ )
    横にならんだナブのデザイン
    04:48  (01:30 ~ )
    横にならんだナブのデザイン: yui css resetについて
    02:07  (06:18 ~ )
    横にならんだナブのデザイン: 【実践】貼り付けたlinkタグの下に styleタグを書き、その中にcssを書いていこう
    03:16  (08:25 ~ )
    横にならんだナブのデザイン: 【実践】liは⽩の背景⾊をしよう
    01:58  (11:41 ~ )
    横にならんだナブのデザイン: 【実践】liの幅を指定しよう
    03:49  (13:39 ~ )
    横にならんだナブのデザイン: floatの特性について
    04:36  (17:28 ~ )
    ナブバーのデザイン: 【実践】liとliの間にmargin-rightを指定して隙間を作ろう
    05:12  (22:04 ~ )
    ナブバーのデザイン: 【実践】displayを指定してマウスの当たり判定エリアを作ろう
    06:14  (27:16 ~ )
    マウスオーバーでデザインを変える: 【実践】a:hover =aタグにマウスが乗っている状態に対してcssを指定しよう
    06:15  (33:30 ~ )
    マウスオーバーでデザインを変える: オープンソースでコードを配布しているサイト
    01:19  (39:45 ~ )
    【後半】質疑応答
    Q:リセットcssを行うことについて
    00:52  (41:30 ~ )
    Q:overflowは、navに指定しても見た目的に同じになると思うのですが、ulに指定した方がいいのでしょうか?
    00:53  (42:22 ~ )
    Q:floatが出てきたら、overflow:hiddenはペアで覚えておいた方がいいのでしょうか?
    01:25  (43:15 ~ )
    Q:float:left;とdisplay:inlineーblock;の使い分けとかってありますか?
    00:55  (44:40 ~ )
    Q:ナビゲーションを横にするとき現場ではどれが一番使われますか?
    01:43  (45:35 ~ )
    Q:float時の「高さ」対策について
    01:54  (47:18 ~ )
    Q:heightで高さを指定しましたが、paddingとかでも問題ないでしょうか
    03:05  (49:12 ~ )
    Q:htmlのソースの見方について
    01:13  (52:17 ~ )
    Q:レスポンシブで作ることについて
    00:56  (53:30 ~ )
    Q:上下方向中央にする方法はありますか?
    01:57  (54:26 ~ )
    Q:a指定するコードについて
      (56:23 ~ )