Webデザイナー中級者になるためのHTML5/CSS3テクニック10選

Webデザイナー中級者になるためのHTML5/CSS3テクニック10選

  • 第1回
    Webデザイナー中級者になるためのHTML5/CSS3テクニック10選
おためし受講中
  • 授業で使用する教材

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

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【前半】授業
  • 授業概要
  • 00:00:23〜(00:27)
  • 自己紹介
  • 00:00:50〜(01:55)
  • アジェンダ
  • 00:02:45〜(00:53)
  • レイアウトのマークアップのコツ
  • 00:03:38〜(06:18)
  • フロートに振り回されない
  • 00:09:56〜(06:02)
  • フレックスボックスに挑戦、ナビゲーションを作成してみよう
  • 00:15:58〜(03:25)
  • 属性セレクタを使ったスタイリングで作業効率アップ
  • 00:19:23〜(05:24)
  • border-radiusの仕組みを知って「カド丸」を手なずける
  • 00:24:47〜(01:55)
  • 蛍光ペンの太さのアンダーラインを引こう
  • 00:26:42〜(03:45)
  • 1文字目だけ大きくして、雑誌のようなタイポグラフィを実現
  • 00:30:27〜(06:02)
  • 1行で収まらないテキストの後ろを省略するには
  • 00:36:29〜(03:12)
  • 意外と知らない?フォームで使える擬似クラス
  • 00:39:41〜(07:02)
  • モバイル向けの小ワザマークアップ
  • 00:46:43〜(03:13)
  • 番外編:作業効率をアップするための「その他のテクニック」
  • 00:49:56〜(03:06)
【後半】質疑応答
  • Q.レイアウトが美しい。おすすめのサイトがありましたら教えて下さい。
  • 00:53:18〜(00:52)
  • Q.Borowser-Sync?
  • 00:54:10〜(01:37)
  • Q.狩野先生は、前にWordPressの本を出したいとか呟いてましたが、本の発売予定とかありますか?
  • 00:55:47〜(00:37)
  • Q.cssでemailの書式チェックを行った場合、書式エラーでも送信はできてしまいますか?
  • 00:56:24〜(00:50)
  • Q.CodaでEmmetは使えますか?
  • 00:57:14〜(00:29)
  • Q.使ってないCSSを見つけ出すソフトはありませんか?
  • 00:57:43〜(00:58)
  • Q.擬似クラスafterのcontentにアイコンを指定する方法をしりませんでした。いつも背景でアイコン指定していたのですが、どちらでも大丈夫なのでしょうか?
  • 00:58:41〜(00:46)
  • Q.ワードプレスは、レイアウトの自由度が下がるのですか⁉️やっぱり、項目が増えると、ひたすら縦長になったりしますか⁉️
  • 00:59:27〜

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全1回 2017年4月29日公開
    Webデザイナー中級者になるためのHTML5/CSS3テクニック10選

    「作業効率に課題を感じている」
    「作りたいページのデザインの実現方法がわからない」

    日々webサイトを制作しているなかで、このような悩みを抱える方も多いのではないでしょうか。

    この授業では、初心者から中級者へのステップアップを目標に「便利な機能」「比較的新しい機能」を中心に実演形式でご紹介し、実際のWebサイト制作時によく使われる&役立つテクニックを学びます。

    ■アジェンダ ()内の番号は、書籍内のサンプル番号です

    1 レイアウトのマークアップのコツ(248、251など)
    2 フロートに振り回されない(206)
    3 フレックスボックスに挑戦。ナビゲーションを作成してみよう(237)
    4 属性セレクタを使ったスタイリングで作業効率アップ(195、196)
    5 border-radiusの仕組みを知って「カド丸」を手なずける(197)
    6 蛍光ペンの太さのアンダーラインを引こう(198)
    7 1文字目だけ大きくして、雑誌のようなタイポグラフィを実現(058)
    8 1行で収まらないテキストの後ろを省略するには(117)
    9 意外と知らない?フォームで使える擬似クラス(182)
    10 モバイル向けの小ワザマークアップ(272)...電話番号にリンクする・電話番号にリンクしない など
    11 番外編:まず形から…テキストエディタの話や、次のステップ(Sassとかemmetとか)など

    ※授業内容は変更になる可能性があります

    ■今回の先生

    狩野祐東 氏 Web/アプリケーションUIデザイナー

    サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。書籍執筆のほか、セミナーや研修講師としても活動中。

    主な著書に『HTML5&CSS3デザインレシピ集』(技術評論社)、『いちばんよくわかるHTML5&CSS3デザインきちんと入門』『確かな力が身につくJavaScript「超」入門』『スラスラわかるHTML&CSSのきほん』(SBクリエイティブ)など。

    Webデザイナー中級者になるためのHTML5/CSS3テクニック10選 (全1回)

    受講生代表

    • 江川 みどり

      江川 みどり

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!