LIVE
ON AIR

17:00 - 17:45

さくらのクラウド入門 -「さくらのクラウド」の基本操作を覚えよう- 生放送中

LIVE
ON AIR

17:00 - 18:00

媒体社とアドテクノロジー 生放送中

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

  • このエントリーをはてなブックマークに追加
高解像度ディスプレイに最適化するために必要なテクニック5選
次回の生放送
11月24日(金)
19:00 - 20:00
生放送の参加は無料です

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

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

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

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

次回の生放送

11月24日(金) 19:00 - 20:00

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

■アジェンダ

  • テクニック1:ボックスと画像の下に空くスペースをなくそう
  • テクニック2: 実際のサイズとは異なるサイズで画像を表示しよう
  • テクニック3:背景に高解像度画像を使用しよう
  • テクニック4:標準解像度ディスプレイに合わせて画像を切り替えよう
  • テクニック5:SVG形式の画像ファイルを表示しよう
授業一覧
修正・変更に強いWebサイト作りに必要なテクニック5選
2017年9月22日公開
01:00:00

■アジェンダ

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

 

先生

狩野 祐東

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

レスポンシブWebデザインに必要なテクニック5選
2017年10月27日公開
01:00:00

■アジェンダ

  • テクニック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選
生放送11月24日(金) 19:00 - 20:00

Google カレンダーに登録

授業内容は変更になる場合があります

■アジェンダ

  • テクニック1:ボックスと画像の下に空くスペースをなくそう
  • テクニック2: 実際のサイズとは異なるサイズで画像を表示しよう
  • テクニック3:背景に高解像度画像を使用しよう
  • テクニック4:標準解像度ディスプレイに合わせて画像を切り替えよう
  • テクニック5:SVG形式の画像ファイルを表示しよう
こんな人にオススメ
WEBデザイナー(初心者)

独学でコーディングを勉強し、もっとスキルアップしたい人

タグ
授業で使用するファイル

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

担当の先生
受講生代表
  • 徳田 葵

    徳田 葵

    スクー放送部

  • 花海 志帆

    花海 志帆

    スクー放送部

この授業を受けたい(2168人)
その他 2088人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

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

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

次回 11月24日(金) 19:00~20:00

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×