BootstrapでスピーディーにレスポンシブWebデザイン

lessとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
lessとはCSSをもう少し便利にしたプログラム言語です。そのままではCSSのように読み込むことはできませんが、ソフトなどを利用してCSSに変換することができます。
講師:
08:04

字幕

Bootstrap はパーツのデザインがこの様に決まっているのでそのまま使うとみんな同じようなサイトになってしまいます。そこで重要なのが CSS をカスタマイズすることですね。しかし Bootstrap は CSS ファイルをカスタマイズしようとすると沢山複雑なものを見なければならず非常に大変です。なんと、この1つのファイルで5786 行もあります。上から見ていってスタイルを変えるだけでも大変ですがもしかしたら上の方を変えても下にそれを上書きしているクラスがあるかもしれません。それを見つけて1つ1つ直していくのはとても大変です。何故こんな構成なのでしょうか。それは、この Bootstrap の CSSこのスタイルはLESS という CSS をもう少し便利にしたプログラム言語のようなものを使って作られているからなんです。プログラムと聞くと難しそうかもしれませんが基本は CSS です。それほど難しくありませんのでまずはその下準備から始めましょう。Less はダウンロードすることができます。Bootstrap のトップページへ戻りましょう。Download Bootstrap とするとここに3つありますね。 Bootstrap の CSS をそのまま使う場合は左で大丈夫ですがこの右2つはプログラム言語によってスタイルをカスタマイズできるものです。こちらは Less という今回のレッスンで扱うものでこちらは Sass と凄く似ているんですがもうちょっと高機能な感じです。今回は Less を使うので、この真ん中Source codeこれをダウンロードしましょう。ダウンロードが完了するとこの様なフォルダーにこんな感じで色んなファイルが入っています。なんだかいっぱい増えてちょっと不安ですね。でも安心して下さい、私たちが使うのは、こここの less というフォルダーのみです。中身を見てみると、沢山のファイルが入っていることがわかります。小分けされているようですね。Less ファイルは今のお使いのテキストエディターで開くことが出来ます。例えばこの一番左上のalerts というのを開いてみましょう。この様に開くことができました。このファイルを1つを見るとそれほど行数もなく比較的シンプルですね。Less というプログラム言語というから少し身構えてしまったかもしれませんが見てみると、ほんの少し違いますが見覚えのある、この書式があります。 ドットで始まって、こちらの括弧とかpadding とか bottom はもう見慣れたものでしょう。唯一違うのは、ここら辺です。そして Less で注意しなければならないのはこの Less ファイルそのままではブラウザーが認識することができません。こういった Less ファイルCSS に変換する必要があります。最初にみた、こちらの CSS ファイルもこの Less を変換してこの様に bootstrap.css と1つに纏めているんですね。ではこれを変換するソフトをダウンロードしましょう。ブラウザーを開いてpreprosと検索してみて下さい。こちらですね。この様な画面が開きます。新しいバージョン限定になってしまいますがMac 10.8 以降そして Windows XP 以降で使うことが出来ます。無料でトライアルができるのでまずこれを見てみることが良いでしょう。では Prepros をダウンロードしましょう。クリックしてダウンロードが完了するとこの様なアイコンが表示されました。これを使います。これをダブルクリックしてこの様に出た場は「開く」を押します。これが Prepros の画面です。まずはここにフォルダーをドラッグすれば良いようです。 先程ダウンロードしてきたこのディレクトリの中からless このフォルダーをそのままドラッグしてしまいましょう。そうすると、less と今登録したディレクトリが左側に表示されました。そして右側に2つ項目が用意されてます。これを変換してCSS にします。まず変換したいものを選択して右クリックを押します。Change Outputこれで自分の好きな所に限らず設定ができます。例えば、わかりやすいように、こここのフォルダーの外側ここに CSSというフォルダーを作っておきましょう。ここに bootstrap.css として保存しておきます。これでファイルの書き出し場所が変わりましたね。theme.less というのはこの Bootstrap のベースとして用意されているテーマを更に少しフラットデザインから質感のあるシャドウやグラデーションを使った物に変更するものです。これも必要であれば合わせて書き出し先を変更しておきましょう。theme.css とSave します。これで準備が OK です。この様に選択すると右側に色んなチェック項目がありますね。Auto Compile というのは保存した時に自動で CSS に変換してくれることです。 Compile というのはLess ファイルをこの様に CSS などブラウザーで実行できるものに変換することです。この Less 以外にもCompile って使えます。他のプログラムでもCompile するとかって言いますね。これで準備が整ったのでこれを Compile というボタンを押します。そうすると Compilation Successfulと出ました。これで Compile が出来たんですね。では本当にファイルが書き出されたのか見てみましょう。右クリックしてファインダーを表示させます。そして上に移動して先程作った CSS のディレクトリに1個項目ができてます。bootstrap.css ができています。これと同様に theme もこのまま Compile とすれば OK です。Less ファイルはそのまま使うことはできませんがこの様に変換してくれるアプリケーションを使うことでCSS ファイルに書き出すことができます。このレッスンでは Bootstrap のカスタマイズのためにLess ファイルをダウンロードしてその Less ファイルをCSS に Compile するアプリケーションを紹介しました。

BootstrapでスピーディーにレスポンシブWebデザイン

Twitter社が提供するBootstrapは、よく使うテンプレートをまとめてCSSを読み込むだけですてきなスタイルを適用できるとても優れたフレームワークです。このコースではBootstrapについて解説しながら、その簡単な使い方やlessによる便利なスタイルのカスタマイズ方法について紹介します。

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

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

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

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