5回コース CSS GRID LAYOUT MASTER

従来のレイアウトとは一線を画す「CSS グリッド」集中講座!

こんなことを学びます

◆概要
--------------------------------------------------
従来のレイアウトとは一線を画す「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レッスンを予定しています。

◆カリキュラム
--------------------------------------------------
全5回:1コマ2時間
1)CSS Grid:基本概念、グリッド「アイテム、コンテナ、ライン、セル、トラック、エリア、ギャップ」の学習
2)CSS Grid:各種プロパティーを使用したグリッドレイアウトのパターン学習
3)CSS Grid実践「1」カラム系レイアウト各種
4)CSS Grid実践「2」カード型レイアウト(FlexBoxも使用)
5)CSS Grid実践「3」写真ギャラリー風のレイアウト(FlexBoxも使用)
※予備)CSS Grid実践「4」FloatレイアウトをGridに修正する実践練習各種

◆このような方におススメです
--------------------------------------------------
・日々制作に追われて新しいレイアウト手法や技術を学習する時間のない方
・「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最新版(ブラウザ)

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

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

浅草・上野

価格(税込)

¥43,200(¥8,640 × 5 回)

受けたい
1人が受けたい登録しています

この講座の先生

加藤 秀樹のプロフィール写真
現役WEBコンサルタント、クリエイター

加藤 秀樹

講師名を「真夜」といいます。
真夜先生とお呼びください。

Web/ITは「夢」を実現できるスキルであるとの信念を基に、個人活動はもちろん、これまで数多く企業のプロジェクトを担当してきました。
現在はフリーランスとしてWEBコンサルタント、デザイン制作などの分野で講師業と併せて積極的に活動しています。

元々WEBやデザインスキルの取得は趣味の「音楽活動(ロックバンド)、タロット、占星術等の占い活動」を具現化させるためのものでしたが、趣味が高じて早15年以上、この世界で仕事をするに至っています。

WEBデザイナー、ディレクター等は15年以上、講師経験は10年以上あり「デジタルハリウッド」「トランスコスモス」等の有名スクールや某IT企業内研修、マンツーマンレッスン等を数多く経験し、業界に多くのクリエイターを輩出してきました。

現在は「東京IT情報クリエイター工学院(大原学園)」「HAL東京(日本教育財団)」にてWEBデザイナー講師を担当、横浜の職業訓練校でも非常勤で講義をしていますので、講師業はある意味本職(天職)でもあるとのスタンス(情熱)で生徒さんには親身になって対応しています。

この講座の主催団体

必要な技術・知識を学べるビジネススクール

プロフェッショナルを目指すAkros Web & Business Design Academy(アクロスアカデミー)- 旧WEB塾超現場主義 のPRO講座では、本気でプロを目指す人に、本気で寄り添うことを講座の目的としています。
だからこそ、講師の巡回質問対応やメンターによるオンラインチャットでの質問対応ではなく、あなたのためだけに作ったカリキュラムで、あなたのためだけに現役のデザイナー・コーダー・プログラマーが授業を教える「完全マンツーマン」レッスン制を採用しています。
他校で謳う「個別指導」が、本当に「マンツーマン」かをご確認ください。
オンデマンド授業を見ながら自習しつつ講師が質問に答える授業、
市販のテキスト通りに制作したものを講師に見てもらう、
講師がつきっきりで一つひとつの工程や意味、どう応用できるかを教えてくれる。
どれを「マンツーマン」と捉えるかは、あなた次第です。

こちらのストリートアカデミーではマンツーマンのプロ講座ではなく、グループで受講を行う短期講座のご案内をしております。
短期講座はおおよ... もっと見る >>

主催団体に質問する 教室ページをみる

カリキュラム

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

    <所要時間>
    2時間

    <当日のレッスンの流れ>
    15分前 開場・受付開始
    授業開始

    授業終了

  • 第2回 CSS Grid:各種プロパティーを使用したグリッドレイアウトのパターン学習

    <所要時間>
    2時間

    <当日のレッスンの流れ>
    15分前 開場・受付開始
    授業開始

    授業終了

  • 第3回 CSS Grid実践「1」カラム系レイアウト各種

    <所要時間>
    2時間

    <当日のレッスンの流れ>
    15分前 開場・受付開始
    授業開始

    授業終了

  • 第4回 CSS Grid実践「2」カード型レイアウト(FlexBoxも使用)

    <所要時間>
    2時間

    <当日のレッスンの流れ>
    15分前 開場・受付開始
    授業開始

    授業終了

  • 第5回 CSS Grid実践「3」写真ギャラリー風のレイアウト(FlexBoxも使用)

    <所要時間>
    2時間

    <当日のレッスンの流れ>
    15分前 開場・受付開始
    授業開始

    授業終了

  • こんな方を対象としています

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

    PC持参になります。ご注意ください。

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

この主催団体の他の講座

relation

関連講座

watching

この講座を見た人は、こんな講座も見ています

お探しの講座が見つかりませんでしたか?