BOOKS
by Sukeharu Kano / 狩野祐東 著書

Schooで生放送登壇!「Webデザイナー中級者になるためのHTML5/CSS3テクニック10選」

2017-04-19

動画生放送授業サイトSchooで放送決定。4月29日(土)21:00-

動画生放送授業サイトSchooで放送決定。4月29日(土)21:00-

初級・中級者向けHTML/CSSマークアップテクニックのライブコーディング授業を、4月29日(土)21:00から生放送でおこないます。

書籍『HTML5&CSSデザインレシピ集』(狩野祐東著/技術評論社刊・2017年2月初版)で紹介している全300サンプルの中から10トピックを厳選、その場で著者自身がコーディングしながらポイント解説をします。新しいテクニックを知りたい、効率的なマークアップを学んでスピードアップしたいという方、ぜひ授業にご参加ください。

授業に参加するには事前に会員登録などが必要です。くわしくはSchooサイトの次のページをご覧ください。

https://schoo.jp/class/3936

授業で取り上げる中身はこんな予定

  1. レイアウトのマークアップのコツ
    シングルコラム・マルチコラム・フルーイドデザイン・固定レイアウトを問わない、汎用的なHTMLマークアップの手法を紹介します
  2. フロートに振り回されない
    フロートは、原理がわかればしめたもの。なかなかうまくいかないフロートを使ったレイアウトのポイントを伝授します
  3. フレックスボックスに挑戦。ナビゲーションを作成してみよう
    フロートに代わる新しいレイアウト手法、flexbox。フロートよりもずっと簡単で、レスポンシブデザインとも好相性。ぜひマスターしてしまいましょう
  4. 属性セレクタを使ったスタイリングで作業効率アップ
    属性セレクタ、使いこなしていますか? 便利な使い方、教えます
  5. border-radiusの仕組みを知って「カド丸」を手なずける
    border-radiusプロパティにある特徴があります。その特徴を知っていれば、カプセル型のボックスを簡単に作れてしまいます
  6. 蛍光ペンの太さのアンダーラインを引こう
    Webサイトでときどき見かける「太い下線」。あれ、borderじゃないんです
  7. 1文字目だけ大きくして、雑誌のようなタイポグラフィを実現
    最近よく見かけるようになった、テキストの1文字目だけを大きくするテクニック。ちょっとしたコツを掴んでどんどん使いましょう
  8. 1行で収まらないテキストの後ろを省略するには
    フォトギャラリーレイアウトや、Webアプリケーションで重宝する「長すぎて収まらないテキストを省略する」テクニック。これ、CSSだけでできちゃうんです
  9. 意外と知らない?フォームで使える擬似クラス
    擬似クラスって、:hoverとか:activeとかだけだと思っていません? 使えるヤツがいろいろあるんです!
  10. モバイル向けの小ワザマークアップ
    モバイルサイト向けのちょっとしたマークアップを紹介します

時間があまったらおまけの話もする予定です。

お楽しみに!

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。
アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。