PhotoshopでレスポンシブWebデザイン!

Bootstrapとはなにか

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、レスポンシブなWebサイト制作においてデファクトスタンダードとなっているフレームワーク「Bootstrap」について、概要をチェックしていきましょう。
講師:
05:05

字幕

このレッスンではレスポンシブなWeb サイト制作においてデファクトスタンダードとなっているフレームワーク Bootstrap について内容をチェックしていきましょう。現在 Foundation ですとかYahoo が開発している Pure ですとかとても軽量な Skeleton ですとか非常に多くのレシポンシブ CSS フレームワークが発表されていますがWeb 上で最もナレッジが共有されていて学習しやすいのがこちらの Bootstrap と言えるでしょう。このコースでは Bootstrap のグリッドシステムの考え方を利用してデザインカンプを作成していく予定です。Bootstrap は CSS や JavaScript 等から構成されているフロントエンドのフレームワークで2010 年に Twitter 社のデザイナーによって制作されました。オープンソースプロジェクトとして無料で公開されていますので例えばこちらのダウンロードボタンの所から様々な形式でソースコードをダウンロードすることが可能です。Bootstrap を利用すると縦に12分割された12グリッドをベースにしたレシポンシブなレイアウトを面倒な計算を自分でしなくても素早く作ることができます。 では、ここから実際にBootstrap のグリッドシステムをどのように使うかをちょっと覗いて見てみましょう。ここからソースコードを見ていきますのでDreamweaver の画面に移動します。こちらは私が予め用意しておいたHTML のドキュメントです。head 要素の中にこのように先程のサイトからダウンロードしてきたbootstrap.css を読み込ませています。そして body 要素の中で例えば class="row" ですとかclass="col-md-6" といったように予め Bootstrap の中で決められたルールに則ってクラスを付けてコーディングをしておきます。では、この HTML をブラウザで見てみたいと思います。今ご覧頂いているのは2種類別々のクラスを付けたカラムです。上の方は水色でウィンドウ幅が 992px 以上の時に横並びになる、というクラスが付けられています。下の方は、ウィンドウ幅768px 以上の時は横並びというルールになっています。では、ウィンドウの幅を狭めていってみましょう。どんどん狭めていきますと今ここで水色の方のカラムのレイアウトが縦並びに変化しました。ウィンドウの幅が 991px より小さくなった為です。 ただ、まだ下のピンク色のカラムは横に並んでいます。これもウィンドウの幅を縮めていくとここで縦並びに変化しました。ウィンドウの幅が 767px より小さくなったので縦方向にレイアウトが変化したわけです。因みに、カスタマイズしていないBootstrap の設定ではウィンドウサイズが 768px 未満の時はスマートフォン用のレイアウトとして扱われます。このあと、Photoshop でデザインカンプを制作するにあたりこの Bootstrap の12グリッドのシステムを意識しながらレイアウトのバリエーションを用意していくことになりますので是非覚えておいてください。また、このコースでは利用しませんがBootstrap の中には様々なコンポーネント、部品が用意されています。例えば、Tables 表のデザインが用意されていたりまた、ボタン。このようにデフォルトのボタンのスタイルが予め用意されていますのでクラスを付けるだけで簡単に利用することが可能です。そしてデザインをカスタマイズしたいデザイナー向けにはLess や Sass といったCSS メタ言語の形式でGitHub からソースコードを入手することができますのでこちらのソースコードのファイルを書き換えてコンパイルしてオリジナルのCSS を作ることも可能です。 ここまでレシポンシブな Web サイトの現場で広く普及しているCSS フレームワーク Bootstrap について概要をご説明してきました。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。