Webデザイン/制作

セレクト講座

CSS レイアウトを習得 CSS GRID LAYOUT入門講座

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

POINT

CSS Grid Layoutを学ぶ
FlexBoxレイアウトとの違いを知る

今すぐ申し込む

こんな方にオススメ

  • 日々制作に追われて新しいレイアウト手法や技術を学習する時間のない方
  • 「Float、Position」レイアウトを「ある程度」理解して一般的なサイト制作ができる方
  • 「Flex Box」を「ある程度」理解し、簡単なサイトが組める方

  • 「CSS Grid」を独学でやってみたが、いまいちピンとこなくて、興味がなくなってしまった方

  • 「Bootstrap」や Foundation」などの「CSSフレームワーク」がなんとなく嫌いな方
  • 「HTML」「CSS」を手打ちするのが大好きな方
  • 「モノ」をつい均等に並べたくなる方

INTRODUCTION

セミナー紹介

CSS GRID LAYOUT MASTER

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レッスンを予定しています。

授業料
6,000円(税別)

特典

事前のクレジット/銀行振込決済の方につき、受講料10%OFF!!

定員 8名
カリキュラム CSS Grid基本概念
グリッド「アイテム、コンテナ、ライン、セル、トラック、エリア、ギャップ」の学習
持ち物・動作環境 <持ち物>
・ノートPC(Mac歓迎)

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

<貸し出し>
※PCは3台まで教室のWindowsPCを利用することが可能です。
 教室PCの利用が必要な方はお早めにご連絡をお願いいたします。
 貸し出しに費用は発生しません。
最少催行人数 2名
※2名のお申込みがなかった場合は中止となる場合がございます。
オンライン開催時の注意事項 ◆◆◆オンライン受講をされる方へ◆◆◆
本講座はオンライン受講のみで受講可能な日があります。
オンライン受講にはZoomを使用します。
Zoomの事前インストールをお願いします。
https://zoom.us/
Joining a Meeting: ミーティングの参加
アカウント登録される場合は無料アカウントで大丈夫です。

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

★★=== オンライン受講でご準備いただく受講環境 ===★★
AdobePhotoshop(CC2020以上)インストール・動作確認済みのPCをご準備ください。

身につくスキル

  • グリッドレイアウトの概念
  • CSS Gridの正しい記述、使い方
  • フレックスレイアウト(flex box)との違い、使い分け
  • CSS3の実践的なTIPSやテクニック
  • レスポンシブサイトの考え方、作り方
  • 正しいHTML5マークアップの記述

INSTRUCTOR

講師紹介

真夜

Akros東京校インストラクター

PROFILE

現役WEBコンサルタント、クリエイターでもある本職プロ講師の真夜です。

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

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

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

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

レッスンの方針は一度じっくりヒアリングをして、生徒さんに沿った内容を提案し、趣味の一環で始める方、プロになりたい方等、幅広くご要望に応じて常時カスタマイズしていきます。

マンツーマンレッスンも老若男女問わず、現在も含めて数十名近い生徒さんを請け負った経験がありますのでご安心ください!

今ならもれなく真夜系タロット占いが付いてくる可能性がありますよ!?

よくあるご質問

教材費などは別にかかりますか?

講座によって別途教材費が発生する場合がございます。講座ページをご確認ください。講座ページに掲載・指示の無い費用は発生致しませんのでご安心ください。

パソコンを持っていく必要はありますか?

通学講座は教室にPCをご用意していますので基本的には不要なのですが、インストールが必要なソフトウェアの有無によってはご自身のPCをお持ちいただく場合がございます。またオンラインではご自身のPCをご利用いただく必要がございます。
通学・オンライン共に講座ページに必要な持ち物が記載されておりますのでご確認ください。

友達と一緒に受けたいのですが。

誠に申し訳ございませんが、お席の確保などを保証しかねますので、お手数ではありますが、各自でのお申込みとさせていただきます。

PCスキルがないのですが、大丈夫でしょうか。

わからない部分はいつでも講師にお尋ねいただけます。
Akrosは参加される生徒さんが置いてけぼりになるような授業はいたしません。また、質問しやすい雰囲気作りなどにも注力しておりますので、安心してご参加ください。

当日急に都合が悪くなった場合はどうすれば良いですか?

フリーダイヤルにご連絡頂ければ幸いです。
または以下のアドレスまで、メールでご連絡ください。

フリーダイヤル 0120-941-071

info@akros-ac.jp

1教科に限らず自分の目標に沿って、先生に個別で教わりたいのですが。

Akrosのプロ講座をお勧めいたします。プロ講座では講師とマンツーマンで目標に沿ったカリキュラム、ご都合に合わせた受講日時を調整して授業を受けることが可能です。詳しくはこちらのAkros Web & Business Design Academy 講座ページからご確認ください。プロ講座は事前の無料体験カウンセリングも受けることができます。

ENTRY FLOW

お申込みの流れ

STEP. 01 お申し込み

各コースページのフォームより、必要事項をご入力の上お申し込みください。
お申し込み受付のメールが届きます。

STEP. 02 開催決定

お申し込みが、最小催行人数に達したら開催決定のご連絡をいたします。

STEP. 03 お支払い

クレジット事前払いを選択された方:
開催決定メールとは別にご請求用のメールを送信いたします。メール内に記載された「カードで支払う」をクリックし決済用ページよりお支払いください。
銀行振込事前払いを選択された方:
開催決定通知メールに記載された口座に、7日以内にお振込み下さい。
開催決定通知メール届いた日がすでに受講日まで7日未満だった場合のみ、受講日前日までにお振込下さい。
尚、振込手数料はお客様ご負担でお願いいたします。
当日クレジット払い/当日現金払いを選択された方:
当日、クレジットカード、もしくは受講料をお持ちいただき、直接お支払いください。
交通系電子マネーでのお支払いも可能です。
領収書について
●銀行振込、当日現金払いの場合、領収書を発行することが可能です。
●クレジット事前払い、当日クレジット払いの場合、領収書を発行することができないため、それに代わるものとして受講証明書を発行いたします。

STEP. 04 受付完了

クレジット/銀行振込事前払いの方:
お振込が確認できましたらスクールよりメールにてご連絡致します。

そのご連絡を以て、お申し込み完了となります。

PAYMENT

お支払い方法

お支払方法には以下の4種類がございます

銀行振込で
事前での決済

当日(現地での)
現金お支払

クレジットカードでの
事前決済

クレジットカード・交通系電子マネーでの当日(現地での)決済

下記のメールフォームにてお申込みの際に、ご希望の決済方法をお選びください。

※領収書の発行が必要な方は「当日現金支払い」または「銀行振込」でお申込み下さい。

キャンセルに関しまして

銀行振込及びクレジットカードで事前に決済された方

原則として受講料の返金は行いません。

当日(現地での)現金/クレジットカード・交通系電子マネー等でのお支払い

現金/クレジットカードの場合、キャンセル料等は掛かりません。キャンセルの旨をご連絡ください。
交通系電子マネーの場合、当日決済後授業開始までの間にキャンセルされる場合は4%の手数料を引いた金額を現金で返金いたします。
授業開始後の変更やキャンセルには応じかねます。

その他受講前の注意事項についてはこちらをご確認ください。

MasterCard,AMERICAN EXPRASS,Diners Club,VISA,JCB,DICOVER

※税込5万円を超える講座の場合、VISA、MasterCard、AMERICAN EXPRESSのみお取り扱い可能です。
※交通系電子マネーの決済限度額は2万円です。
※iDの決済限度額は3万円、QUICPayの決済限度額は2万円です。

ENTRY FORM

お申込み

お申込フォームに入力の上、ご送信ください。お申込み後、メールにてご案内をお送り致します。
は必須項目です。
弊社からは"@akros-ac.jp"のドメインから送付いたします。
メールが届かない場合は迷惑メールフォルダに入っていないかご確認ください。

参加希望日
お名前
電話番号 - -
メールアドレス
お支払い方法
領収が必要な場合の宛名(銀行振込、現金払いのみ)
受講証明書が必要な場合の宛名
(クレジット支払いのみ)
受講証明書サンプル
職業
カメラ持ち込み有無
※有の方にはカメラの種類の確認のご連絡をさせて頂きます。
ご意見/ご質問
授業料 円(税込)

セミナーお申込みの前に受講に関する注意事項をご確認ください。

ご入力いただいた個人情報は、サイト利用規約の個人情報管理項目に基づき管理を行います。

その他のおすすめセミナー

CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)