11/15(Thu)

今日の生放送

初心者が中級WEBデザイナーにレベルアップするためのHTML5/CSS3テクニック15選

修正・変更に強いWebサイト作りに必要なテクニック5選

第1回:2017年9月22日公開

60min

修正・変更に強いWebサイト作りに必要なテクニック5選

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

コース概要

本授業は、コーディング初心者が中級者にレベルアップするための授業です。

各回、テーマに沿ったHTML5/CSS3テクニックを、「HTML5&CSS3デザインレシピ集」の書籍内で紹介されている300のテクニックの中から5つずつ紹介します。また今回は特別に書籍には掲載していないテクニックも紹介します。

第1回「修正・変更に強いWebサイト作りに必要なテクニック5選」
第2回「レスポンシブWebデザインに必要なテクニック5選」
第3回「高解像度ディスプレイに最適化するために必要なテクニック5選」

ご登壇するのは、「HTML5&CSS3デザインレシピ集」の著者である狩野先生。スクー人気授業『Webデザイナー中級者になるためのHTML5/CSS3テクニック10選』の先生も担当しました。授業の後半には、質疑応答の時間もあるので、エンジニアとして働きたい人は、狩野先生に質問してみましょう。

こんな人にオススメ

WEBデザイナー(初心者)
独学でコーディングを勉強し、もっとスキルアップしたい人

担当の先生

パーソナリティ

  • 徳田 葵

    徳田 葵

    スクー放送部

  • 花海 志帆

    花海 志帆

    スクー放送部

参加したい受講生 : 2804

カテゴリー

タグ

サンプルファイル

授業で使用するファイル
今なら初月無料ですべての授業が見放題!
今すぐ無料でおためし

授業リスト

修正・変更に強いWebサイト作りに必要なテクニック5選

2017年9月22日公開

60min.

■アジェンダ

  • テクニック1:ブラウザの開発ツール
  • テクニック2:継承・カスケード・詳細度〜CSSが適用される仕組みを詳しく知ろう
  • テクニック3:コードが荒れないCSSの書き方・更新の仕方を知ろう
  • テクニック4:シンプルにコラムレイアウトを実装しよう
  • テクニック5:多数のボックスを整列して並べよう

 

先生

狩野 祐東

この3回シリーズでは、これから実践的なHTML/CSSコーディングをしたいという方向けに、モバイル端末に対応するための基礎的なコーディング知識と、修正に強く、よりシンプルでわかりやすいHTML/CSSを書くためのテクニックや考え方を紹介します。
質問や意見、アイディア等をお持ちの方はどんどんコメントをください。疑問にはできるだけ回答したいと思っています。みんなで役立つ知識とテクニックを共有しましょう。

スライド資料

レスポンシブWebデザインに必要なテクニック5選

2017年10月27日公開

60min.

■アジェンダ

  • テクニック1:レスポンシブWebデザインに対応するための基本マークアップ
  • テクニック2:メディアクエリとモバイルファーストCSS
  • テクニック3:スマートフォンとパソコンでページ全体のフォントサイズを変更しよう
  • テクニック4:動画をキービジュアルにしよう
  • テクニック5:テーブルの見た目を「見出し+本文」に切り替えよう

  • オープニング
  • 00:24
  • 全3回の予定
  • 01:07
  • 自己紹介
  • 01:28
  • 本日紹介する5つのテクニック
  • 01:50
  • 【先生からの質問】コーディングにおける悩みは何ですか?
  • 00:29
  • レスポンシブWebデザインに対応するための基本マークアップ
  • 07:35
  • 皆さんからのコメント
  • 02:25
  • メディアクエリとモバイルファーストCSS
  • 11:34
  • スマートフォンとパソコンでページ全体のフォントサイズを変更しよう
  • 07:26
  • 動画をキービジュアルにしよう
  • 05:18
  • テーブルの見た目を「見出し+本文」に切り替えよう
  • 09:38
  • 質疑応答
  • 09:51
  • まとめ
  • 00:37
  • 次回授業のお知らせ
  • 01:07
  • エンディング
  • Q.wordpresでcssを変更しようとしてもうまくcssが当たりません。
  • 36:34
  • Q.リキッドレイアウトとレスポンシブが頭のなかでごっちゃになってしまって%の使い所がわからないことがあります。カラムの幅等で使うぐらいに考えておけばいいでしょうか?
  • 02:15
  • Q.html と html * は同じ意味な気がしますが違いはあるんでしょうか?
  • 02:08
  • Q.remを使うときにrootを61.5%で10pxにすることが多いです。メディアクエリのときも同じようにすることはありますか?
  • 02:07
  • Q.HTML * は子要素に適用というのですが、子要素とは <html></html> 内にある要素は全部適用されるということでしょうか?
  • 01:02
  • Q.articleとsectionの使い方に迷います。具体的に教えてください。

スライド資料

高解像度ディスプレイに最適化するために必要なテクニック5選

2017年11月24日公開

60min.

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ