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

12グリッドシステムの考え方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、CSSフレームワーク「Bootstrap」の中に用意されている、12グリッドをベースにしたレスポンシブなレイアウトの考え方について、ご説明していきます。
講師:
03:21

字幕

このレッスンでは CSS フレームワークBootstrap の中に用意されている12グリッドをベースにしたレシポンシブなレイアウトの考え方について説明していきます。今ご覧頂いている Bootstrap のWeb サイトの説明ページですとかもしくはダウンロードしてきたLess や Sass のファイルを紐解いていきますとこのようにデフォルトのグリッドのカラム数が12に指定されていることが分かります。これは画面を縦方向に12等分に分割をしてここは3列分ここは4列分といったように、必要に応じて組み合わせて使っていくイメージです。12という数字は2でも3でも4でも割り切れますので均等なカラム分割のバリエーションを作りやすいということもありますし全てを均等に分割しなくても例えば 2:10 、3:9 、4:8 のように不均等に分けてサイドバーとメインコンテンツのような使い方にすることも可能です。基本的には PC のような大きな画面で見ている時に、この12グリッドを横に並べた状態で表示される訳ですけれどもウィンドウの幅が変化する時はどのように見えるかということを確認してみましょう。ブラウザの方に移動してみます。 こちらは Bootstrap の CSS を使って私が予め作っておいた HTML です。今ウィンドウの横幅が広い時には3つのカラムが横に並んでいますけれどもこれが、スマートフォンのように狭いウィンドウの横幅になった場合はこのように縦方向に変化します。これが非常にベーシックなレシポンシブのレイアウトの仕組みです。但しコンテンツの内容によっては横幅を狭くした時でも横並びのままにしておきたいということもあるでしょう。Bootstrap にはどんなに狭い横幅になってもずっと横並びにしておくというバリエーションも用意されています。ここまで見てきたような考え方を利用してPC のように横幅が広い環境向けには横並びを中心にしたレイアウトスマートフォンのようにウィンドウの横幅が狭い端末の場合にはそれが縦方向に並んだレイアウトになる、このようなものを制作していくことになります。勿論、必要に応じてタブレットのような中間サイズのレイアウトを用意しておいても良いでしょう。以上、このレッスンではCSS フレームワークBootstrap の中に用意されている12グリッドレイアウトの考え方について解説しました。

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

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

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

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

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

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