CSS GRID LAYOUT MASTER

参加枠申込形式参加費 参加者
事前支払い
先着順 30,800円
事前支払い
0人 / 定員10人

イベント内容

◆概要
--------------------------------------------------
従来のレイアウトとは一線を画す「CSS グリッド」集中講座!本格グリッドレイアウトをCSSで完結させる次世代必須のレイアウト手法をマスターしよう! あなたも、そろそろ「display:grid」使ってみませんか?

CSS Gridは2019年8月現在スタンダートブラウザーの93%をカバーしています。
CSS Grid Layoutを使えば、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。
またHTMLの構造から完全に分離したレイアウトをCSSだけで行うことが可能になり、まさに同じ格子状系(表組み)のテーブルレイアウトを知るクリエイターからすれば、感涙ものの仕様を多数持ったCSSレイアウトなのです。

現在のスマホを中心としたレスポンシブサイトに最適なレイアウト構造をグリッドで簡単に再現することができます。それでいて奥が深いです。
ほぼ間違いなく、数年後のレイアウト手法は従来の「Float、Position」そして現行の「Flex Box」に加えて「Grid」が主流になります。
この4つのレイアウト手法で、CSSレイアウトは本来あるべき形で完成されたといっても過言ではありません。


現在主流の「Flex Box」が定着するのに数年以上かかっていますので、覚えたばかりの人もまだいるかと思いますし、ここでまた新しいレイアウト手法の「Grid」を本格的に学習するのを避けるクリエイターもいるかもしれません。
ただ「Flex Box」でのレイアウトも、場合によっては レイアウトがはみ出してしまうことがあったりと、万能ではありません。その問題を解決する新しい選択肢が「CSSグリッド」なのです。

CSS Gridを使用するということは従来レイアウト手法を使用しない、ということではなく、WEBレイアウト史上初めてそれらの特徴に応じて適材適所の用途別に使い分けられる時代になったと考えてください。

例えば、「Float(文字の回り込み専用)」「Position(絶対・相対配置専用)」「Flex Box(横並び専用)」「Grid(ページ全体、格子状のレイアウト専用)」といった具合です。
単純なグリッドレイアウトを学習するのは簡単ですが、これを実践的に使用とすると一気に奥が深くなります。

本講座ではその深い部分にまで可能な限り対応し、実践的なサイトを制作できるまでのCSSレッスンを予定しています。


◆カリキュラム
--------------------------------------------------

  1. 全5回:1コマ2時間
  2. 1)CSS Grid:基本概念、グリッド「アイテム、コンテナ、ライン、セル、トラック、エリア、ギャップ」の学習
  3. 2)CSS Grid:各種プロパティーを使用したグリッドレイアウトのパターン学習
  4. 3)CSS Grid実践「1」カラム系レイアウト各種
  5. 4)CSS Grid実践「2」カード型レイアウト(FlexBoxも使用)

内容に変更がある場合がございます。

◆日程
--------------------------------------------------

  1. 12月金曜日コース
  2. 1回目 12月06日(金) 13:00-17:00
  3. 2回目 12月13日(金) 13:00-17:00

2日間、計8時間のコースになります。



◆このような方におススメです
--------------------------------------------------
・日々制作に追われて新しいレイアウト手法や技術を学習する時間のない方
・「Float、Position」レイアウトを「ある程度」理解して一般的なサイト制作ができる方
・「Flex Box」を「ある程度」理解し、簡単なサイトが組める方
・「CSS Grid」を独学でやってみたが、いまいちピンとこなくて、興味がなくなってしまった方
・「Bootstrap」や Foundation」などの「CSSフレームワーク」がなんとなく嫌いな方
・「HTML」「CSS」を手打ちするのが大好きな方
・「モノ」をつい均等に並べたくなる方


◆この講義を受講するとこんなことができるようになります、身につきます
--------------------------------------------------
グリッド(網目、格子状)レイアウトという概念
CSS Gridの正しい記述、使い方
CSS3の実践的なTIPSやテクニック
レスポンシブサイトの考え方、作り方
正しいHTML5マークアップの記述
従来のレイアウト手法の本来の使い方


◆持ち物・動作環境
--------------------------------------------------
<持ち物>
・ノートPC(Mac歓迎)

<環境>
・HTMLエディタ(DreamWeaver、Brackets、Atom、Visual Studio Code)等
 ※DreamWeaerのデザインビューではグリッドは再現できない上、コードヒントも半数以上出ないので注意が必要です。
・Firefox最新版(ブラウザ)


◆そのほか注意事項
--------------------------------------------------
※内容は一部変更になることがございます。

Techplayからの事前申し込みの場合、領収書が発行できません。
領収書が必要な方、また会社の申請ルールを通して受講を検討されている方は、 事前に以下までお申込み方法についてお問い合わせください。
info@akros-ac.jp
※メールを受信するにあたり、上記メールの受信ができるようにしておいてください。
※講座名や開催日程情報などを添えてお問い合わせください。

◆キャンセルに関しまして
--------------------------------------------------

申込み頂いたあとに、急遽キャンセルされる場合は、その旨をお知らせ下さい。
info@akros-ac.jp
<注意>
当日のキャンセルはお受けできませんのでご了承下さい。

参加費のお支払いについて

本イベントの参加費は、クレジットカードでの事前支払いとなります。
ご利用可能なクレジットカードをご用意いただき、お支払い手続きを行ってください。
本イベントは終了しました

類似しているイベント