vol.56

グリッドシステムで作る!CSSレイアウト講座

開催日 5月13日(土) 10:00〜18:00
定員 8名
*定員に達し次第募集終了
開催状況 未決定:あと3名で開催
申込期限 2017年5月12日(金)
受講料 50,000 円

講座の特徴

CSSレイアウトの新手法であるflexboxでのレイアウト実装をメインに、グリッドシステムを取り入れたデザイン手法を学びます。今まで利用していたfloatからflexboxでのレイアウトが基本になっています。flexboxの実装はパフォーマンスにも優れ、レイアウトのプロパティのため自由なデザインが実装可能です。

また、単なるレイアウト手法を学ぶだけでなく、スマートフォンやスマートTV、タブレットなどあらゆるデバイスで美しく見える柔軟なデザイン実装の基本を学ぶことでレスポンシブWebデザインにも通じる内容を勉強します。

Curriculums

カリキュラム

  1. グリッドシステムとは?
  2. Flexboxで実化するレイアウト実装
  3. デザインとUI
  4. レイアウトパターン
  5. ブラウザ表示相違の理解と対策
  6. フレキシブルなサイト思考
  7. 実習:CSSレイアウトでのページ制作

学べる内容

グリッドレイアウトの基本と考え方を学び、グリッドに沿った綺麗なデザイン/コーディングができる講座です。考え方を学ぶことで、どのデバイスでも対応できる考え方が学べる講座です。1ページを作る実習を行いながら理解していただきます。

  • 長いソースコードのイメージ
    継承されるCSSとされないCSSが理解し、継承を利用した短い記述方法を学びます
  • グリッドデザインのイメージ
    グリッドデザインの考え方を学習してレイアウト設計を学びます
  • バーティカルリズムのイメージ
    バーティカルリズムを使ったより読みやすいサイトをCSSで実現します

こんな方におすすめです

授業スタイル

  1. ハンズオンでの学習スタイル

    ひとり一台のパソコンを利用し、手を動かし実習をしながら学んでいただけます。

  2. ブラウザについて

    CSSサポートの良いブラウザで正しいCSSを勉強します。

  3. 開発環境

    秀丸(win)、mi(mac)などのエティタを利用して開発します。

授業風景

担当講師

菊池 聡[肖像]

菊池 (きくち さとし)

ガイドラインとグリッドの理解を間違っている方が多くいます。良く、960px;でサイトを構築することがあり、http://960.gs/なども利用されますが、なぜ960px;でサイト制作を行うのが良いのか理解されていない方がいます。Webサイトにはグリッドシステムの考え方は必須で、この講座ではそれらの理由についても理解いただきます。

受講特典

  1. スライド・サンプルのプレゼント

    授業中に利用したスライド、サンプルコードを受講後にプレゼントいたします。

  2. テストで学びきれなかった内容を確認

    受講後のテストで学びきれなかった内容を、確認と復習することができます。

  3. 再受講制度で分からないところも確実に

    受講後半年間は、同じ講座を最大無料で受講することができます。

受講生の声

斎藤邦子さん

斎藤邦子さん

某財団法人Web担当者

ずっと独学で書籍やネットの情報を一生懸命拾っていましたが系統立てて説明してもらうことによって、わからない部分は補完され知っている部分も合わせて頭の中が整理されました。見た目の結果だけでなく「なぜそいういう書き方をするのか」という理由を含めて教えてもらえて、よく理解できました。それと、記述方法が複数ある時、「シンプルな方を選ぶ」「間違いが起こりにくい方を選ぶ」など自分の中にきちんと基準を持っているべきだと思いました。flexboxについてHTML5+CSS基本講座から連携している内容で自分では知ることができなかった内容を勉強することができました。

藤原由希さん

藤原由希さん

Webディレクター

日常、コーディング作業を行っていないため、正直初めて見る要素もまだまだ多い状況です。
ただ、ディレクターの立場からみて、SEO対策など含め正しいコーディングが結果を招くということがよくわかりました。 社内の制作ガイドラインにも反映していきたいと思います。
CSSの技術については、しっかり復習し、上級講習に臨みたいと思います。

滝口裕美さん

滝口裕美さん

マニュアル通りの講座ではなく、1日1日の講座が様々な面で大変中身が濃く勉強になりました。自分自身の理解不足があるので再受講や復習もこれからしていきたいと思います。上級講座も受講できるようにしたいです。

戸田かなえさん

戸田かなえさん

講座は生きものだと思いました。同じ講座でもしばらく時間を置いて受講すると、ポイントやペース配分が異なっていたりします。おかげで前回わからなかったところを集中的に聞くことができてよかったです。 早速自社サイトを更新する打ち合わせを始めました。今後も書籍やWebを見ながら一歩ずつ、ということになると思いますが、受講前に比べると「根本的ことを理解した」という自信がつきました。これは大きいと思います。 ありがとうございました。

この講座が含まれるコース

CSSレイアウト講座が入ったコースです。コースでお申し込みされると割引されます。

Page Top