7/16(Tue)

今日の生放送

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

CSS入門 -cssとは何か?-

第1回:2015年8月24日公開

60min

CSS入門 -cssとは何か?-

おためし受講する(5分)

コース概要

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

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

■ 事前準備

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

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

担当の先生

パーソナリティ

  • 江川 みどり

    江川 みどり

    スクー放送部

  • 田原 彩香

    田原 彩香

    スクー放送部

参加したい受講生 : 1886

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

「aの役割を最大限表現する: 【実践】schoo WEB-campusの「受講する」ボタンを書いてみよう」において、収録当時と現在では受講ボタンのCSSが異なっております。 添付ファイルをご参照ください。

※授業以外での利用は禁止します。

おかえり、デザインの学び場へ「The Designers Lounge」
月額980円で、4,600本以上の授業が見放題

授業リスト

CSS入門 -cssとは何か?-

2015年8月24日公開

60min.

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

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

今回の授業では、どういう経過でcssができたのか、webサイトでどのような役割をはたしているのかを学んで行きましょう。

■ 事前準備

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

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

スライド資料

CSS入門 -文字デザインの全て-

2015年8月24日公開

60min.

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

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

今回はCSSで文字をデザインする手法を学んでいきます。PCからスマートフォンまでどんなデバイスで見ても美しくて読見やすいスタイルを指定する方法を学びます。

■ 事前準備

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

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

スライド資料

CSS入門 -アンカータグデザインの全て-

2015年8月31日公開

60min.

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

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

今回はハイパーリンクを作り出すaというhtmlタグに指定するCSS手法をマスターできる授業です。aタグの振る舞いをしっかり知ってCSSデザインを自分の物にしましょう。

■ 事前準備

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

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

スライド資料

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

2015年8月31日公開

60min.

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/

  • 自己紹介&アジェンダ
  • 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の振る舞い: オープンソースでコードを配布しているサイト
  • 01:19
  • Q:アニメーションの「transition-dulation」は、 <nav>の方に指定するのですか??
  • 00:24
  • Q:今後を考えるとNormalize.cssに慣れたほうがいいですか?
  • 01:42
  • Q:なぜ最初からhtmlでナビを上にして作成してあるのでしょうか?
  • 00:51
  • Q:position:fixedをつかうと下のコンテンツが上に上がってきてヘッダー部分と重なってしまいますがnavより下はどういうcssを使えばいいですか?
  • 00:57
  • Q:色の指定で♯fffと♯FFFFFFの時の使い分けを教えてください
  • 01:39
  • Q:<header></header>を最初にマークアップしなかった理由を教えて下さい。
  • 00:41
  • Q:スマホの場合hoverは有効なのでしょうか?
  • 00:53
  • Q:現場でSCSSって使ってるところ多いのでしょうか?
  • 01:13
  • Q:navはseoの関係でメインとfooterの間に書くのが良いと教わりましたが、田中先生もそうされてるケースもありますか?
  • 01:24
  • Q:サイドメニューは右側と左側、どちらをお勧めしますか?

スライド資料

CSS入門 -ナブバー(横並びのメニュー)デザインの全て-

2015年9月7日公開

60min.

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/

  • 自己紹介&アジェンダ
  • 01:16
  • 横にならんだナブのデザイン
  • 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
  • Q:リセットcssを行うことについて
  • 00:52
  • Q:overflowは、navに指定しても見た目的に同じになると思うのですが、ulに指定した方がいいのでしょうか?
  • 00:53
  • Q:floatが出てきたら、overflow:hiddenはペアで覚えておいた方がいいのでしょうか?
  • 01:25
  • Q:float:left;とdisplay:inlineーblock;の使い分けとかってありますか?
  • 00:55
  • Q:ナビゲーションを横にするとき現場ではどれが一番使われますか?
  • 01:43
  • Q:float時の「高さ」対策について
  • 01:54
  • Q:heightで高さを指定しましたが、paddingとかでも問題ないでしょうか
  • 03:05
  • Q:htmlのソースの見方について
  • 01:13
  • Q:レスポンシブで作ることについて
  • 00:56
  • Q:上下方向中央にする方法はありますか?
  • 01:57
  • Q:a指定するコードについて

スライド資料

CSS入門 -サイトの段組-

2015年9月7日公開

60min.

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/

  • 自己紹介&アジェンダ
  • 01:06
  • サイトの土台となるレイアウト
  • 03:35
  • ボックスモデルを理解する
  • 02:05
  • ボックスモデルを理解する: navの中のulの中のliの中のaの構造
  • 04:10
  • 2カラム固定幅のデザイン
  • 02:47
  • 2カラム固定幅のデザイン: 【実践】エディターを⽴ち上げてhtmlのテンプレを作ろう
  • 02:13
  • 2カラム固定幅のデザイン: 【実践】bodyタグの中にheaderタグ、articleタグ、asideタグ、 footerタグを⼊れよう
  • 01:35
  • 2カラム固定幅のデザイン: 【実践】header内にh1とp、article内にh2とp、aside内にnavの中に⼊れたulをコピペしよう
  • 02:56
  • 2カラム固定幅のデザイン: 【実践】ブラウザ感の差異を無くしてからcssを書いていこう
  • 03:27
  • 2カラム固定幅のデザイン: 【実践】⼤外のdivの横幅を、流用する4回⽬で作ったnavの横幅にあわせ背景色を指定しよう
  • 04:57
  • 2カラム固定幅のデザイン: 【実践】articleとaside合わせて親要素のdiv幅になるように 幅を指定しよう
  • 05:40
  • 2カラム固定幅のデザイン: 【実践】コース4限目で書いたnav部分のcssを加えてみよう
  • 02:29
  • 2カラム固定幅のデザイン: 【実践】新しく加えたcssの全てnavからのルートに指定しよう
  • 07:35
  • Q:firefoxやChromeの開発ツールが充実してからWEB制作を始めましたが、昔は大変だったのでしょうか?
  • 00:49
  • Q:Webデザインに必要なCSSの基礎が固められるお勧めの本はありますか?
  • 02:04
  • Q:子孫セレクタでulを書かなかったですが、今後仕様変更があると思われる場合は、略さないで書いた方がいいですか?
  • 00:56
  • Q:先生はBEMを使用されますか?
  • 01:38
  • Q:paddingの見てくれについて
  • 01:07
  • Q:articleとasideの幅について、「左右が綺麗に見える割合のこつ」とかありますか?
  • 00:57
  • Q:wrapperについて
  • 00:44
  • Q:articleとasideの高さを常にnavの下段とfoterの上段に位置する状態に保つ方法はありますか?
  • 01:10
  • Q:liのaは<p>で囲むとSEO的に良いと、schooの授業でみたのですが、やはりpで囲む方が良いでしょうか。

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ