[オンライン]CSS GRID LAYOUT入門

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

イベント内容

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

CSS Gridは2019年8月現在スタンダートブラウザーの93%をカバーしています。
CSS側でレイアウトをコントロールする手法としてグリッドレイアウトを学べば、HTMLの構造や意味を損なわずにデザインする、デザインのあるべき姿の高みを目指せることでしょう。

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

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

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

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

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


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

  1. CSS Grid基本概念
  2. グリッド「アイテム、コンテナ、ライン、セル、トラック、エリア、ギャップ」の学習



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


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


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

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


◆◆◆オンライン受講をされる方へ◆◆◆
オンライン受講にはZoomを使用します。
Zoomの事前インストールをお願いします。
https://zoom.us/
Joining a Meeting: ミーティングの参加
アカウント登録される場合は無料アカウントで大丈夫です。

★★=== オンライン受講での注意事項 ===★★
・開催前にZoomに接続するための招待URLをご連絡いたします。
 事前にZoomに接続できることを確認しておいてください。
・周囲の音を拾わないよう、講義が始まりましたら音声はミュートにしてご参加ください。
 お一人お一人に質問を行い回答していただきますので、その際にはミュートを解除してご回答をお願いいたします。
・受講者の顔を見ながら実施いたしますため、ビデオ機能はONにしてご参加ください。
・受講中の録画・録音は禁止とさせて頂いております。

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

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

◆開催条件
--------------------------------------------------
最少催行人数:2名

事前支払いによるお申込みの場合、全額ご返金致します。

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

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

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

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

類似しているイベント