1. JAGAT
  2. 研究会
  3. クロスメディア部会
  4. クロスメディア部会　年間スケジュール
  5. 印刷会社のためのBootstrap入門［Web制作ワークショップ］

印刷会社のためのBootstrap入門［Web制作ワークショップ］

掲載日：2014年10月20日

Web制作で使いこなせると非常に便利なのがCSSフレームワーク。今回は、そのなかのひとつ、Bootstrap（ブートストラップ）をワークショップ形式で体験します。

開催日時：2014年10月24日（金）　14：00～17：00
対象：基本的なHTML、CSSが理解できる方
身に付けられること：Bootstrapの使い方、カスタマイズの基本的な流れ

10月のクロスメディア研究会では、CSSフレームワークのひとつ「Bootstrap（ブートストラップ）」を体験するワークショップを開催します。

CSSフレームワークとは、デザインの枠組みやスタイルがまとまっているパッケージのようなもの。適用すると、Webサイトにデザインが適用されます。スピーディーに統一的なデザインをするために、すごく便利なしくみです。

WebデザイナやWeb制作者にとって、Bootstrapが使えると非常にサイト構築がしやすくなります。本ワークショップでは、実際にBootstrapを使ったサイト制作やカスタマイズを体験することで、最短距離で知識や使い方を身に付けられます。

【STEP1】Bootstrapを利用し、簡単なサイトを作成する

自身のプロフィールサイトなど1ページ程度のシンプルなWebサイトを既存パーツを利用して作成します。

  • パーツをコピー、ペーストしてWebサイトを作成する
  • サンプル画像、サンプルテキストの簡単な挿入方法
  • スマートフォン、PC時の見た目を確認する

【STEP2】 Bootstrapカスタマイズの基本的な流れを知る

  • カスタマイズ用にHTMLを変更する
  • bootstrapのファイル構成
  • lessの4つの特徴
  • 初期設定ファイル(variables.less)を見てみよう
  • 背景色を変更してみよう
  • コンパイラでファイルを変換してみよう
  • ブラウザで確認する

講師：ザ・マーズナレッジ株式会社　代表取締役社長　 石嶋 未来氏

プロフィール：1982年生まれ 高校卒業後、栃木県のデザイン事務所を転々としパチンコ屋のチラシや、観光協会Webサイト、求人チラシや地域情報紙などを制作。2007年に Twitterがきっかけでライブドアに入社。Web制作を本格的にはじめる。2009年に「ウープスデザイン」として独立。デザイン業の他、執筆やコ ワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。

好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。twitterでライブドア株式会社に就職など、twitter、blog、 facebook等のソーシャルメディアを使ったマーケティングにより販促費0で事業を拡大中。

★参考：今日からはじめる！Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜（Find Job! Startup）

 

講師の石嶋さんからコメント

Webサイトはブラウザによっての表示崩れなどがあり、それらを統一させるは現実的ではありません。
マルチデバイス時代へ突入したことによって、今まで以上にたくさんの端末が増えたからです。
それらを1pxたがわず調整するというのは、リソースもかかりどの端末でも情報が得られることが最大のメリットである「Web」の特性を活かしきれてないとも言えます。

本講座では、前時代的なコーディングを脱して、これからの制作に求められるコーディングを学ぶきっかけとして、Bootstrapによる、スピーディーなレスポンンシブコーディングを解説いたします。

まずはブラウザで動くものを作り、多数の端末での動作を確認できてからビジュアル作成へ移行する。

そんなコーディングのはじめの一歩を踏み出しましょう。

必要なもの

  • ノートパソコン (講師は基本的にMacで操作を行います)
  • 最新のブラウザ (chrome,firefox,safariなど)
  • HTMLの編集ができるテキストエディタ (windows:terapadなど , mac:miやsublimetextなど)
  • Bootstrapファイル　http://getbootstrap.com/getting-started/#download
    * 上記URLへアクセスし、Download Bootstrapをクリックしてダウンロードしておいてください。
  • less コンパイラ
    * Bootstrapに使われているプログラムをブラウザで見られるカタチに変換するソフトです。すでにお使いのものがあれば、そちらで問題ありませんが、はじめての方は下記をダウンロードしておいてください。　http://alphapixels.com/prepros/

※本ワークショップは、HTML、CSSが理解できる方を対象としています。

【開催・申込要項】

会場

日本印刷技術協会　3Fセミナールーム
（〒166-8539　東京都杉並区和田1-29-11）

参加費

クロスメディア研究会会員：無料（1社2名まで）／一般：10,800円（税込）

申込

Webからお申込み

・Web申込フォーム に必要事項をご記入のうえ、ご登録ください。

FAXからお申込み

・申込書をプリントして必要事項をご記入の上、 FAX（03-3384-3216）にてお申し込みください。
（クロスメディア研究会メンバーの方は、別途送付の専用申込み用紙をご利用ください）

問い合わせ先

内容に関して
研究調査部　クロスメディア研究会担当　　　電話：03-3384-3113（直通）

お申し込み及びお支払に関して
管理部　電話：03-5385-7185（直通）