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

formについて

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ナビ専用のフォームのデザインが用意されています。検索などはナビに入れ込むことが多いので活用しましょう。
講師:
09:03

字幕

Bootstrap のメニューを挿入すると既に用意されている、このフォームフォームというのは Web サイトでも結構頻繁に使う重要なものです。Bootstrap では、こういったフォームに関しても便利なデザインなどいろいろ用意してくれています。ではそのコードを見ていきましょう。テキストエディターを開きます。フォームは、この nav の中のここにあります。ここ、form というタグが入ってますね。これで nav を入れているんですね。class を見ると navbar-formnavbar-left となっています。これは navbar に入った時の form の見た目を制御しているクラスになります。そして次こちらを見てみましょう。input type="text" というのは、こちらの検索のボックスのことです。HTML を少し見たことがあるものであればよく見るものですね。ここに class="form-control"とあります。これを一旦カットして保存をして見てみましょう。今の状況だとクラスがないのでデザインを定義されていないのでこちらの見た目が変わるはずです。更新をしてみます。変わりましたね。 この様にブラウザーで用意されている見た目になりました。テキストエディターに戻って元に戻します。保存をして更新をすると元通りです。フォームのデザインに関してはこちらの form-controlというもので制御しているようです。このクラスは、この type="text" 以外にも幾つかのもので利用することができます。Bootstrap のページに戻り一番上のメニューからCSS をクリックします。右側のメニューからForms をクリックすることでフォームでどのようなスタイルが定義されているかなどを見ることができます。ここのコードを見てみると例えば Emai 用の input ですとかPassword というものにform-control というのが付いているのがわかります。後はテキストエリアなどでも利用ができそうです。ここです、All textual<input, <textarea, and<selectに form-control を付けるとwidth が 100% になるこれは横幅がこの様に定義されたギリギリの所までぴったりと長さを表示させてくれた上にこの様に見た目もかわいく角丸とか、デザインしてくれているということなんですね。 また、こちらのコードを見るとform-group というのが入っています。そういえば、こちらの自分たちがコピーして入れたナビゲーションの所にもform-group というのがありますね。ただここ、1個しか入っていないのにform-group というのはなんだか不思議な話です。これ要らないんじゃないかなと削除してちょっと様子を見てみましょう。この不要な div を削除してみます。貼り付けをして余計なものが削除できましたね。保存をして、この「レッスンページ」更新してみましょう。見た目が変わらないので不要に見えますね。では form-group というのはどういったものをしているのでしょう。この form-group はフォームの縦の時とか横の時のマージンの制御をしてくれているんですね。良い感じに並べてくれる時にform-group というのを入れておけば大丈夫ですが、これは必須ではありません。また、nav にはここの form の所から入れたいものをチョイスして追加することも可能です。Check me outこのチェックボックスを入れたいなという時は、ここdiv class = "checkbox" の開始から終了までをコピーしてテキストエディターに戻りここに挿入するだけで OK です。 form-group とsubmit button の間ですね。貼り付けてインデントを調整してこれで準備が OK です。ファイルを保存して「レッスンページ」を更新してみましょう。これでチェックボックスを入れることが出来ました。スマートフォンの見た目でもこの様にちゃんと改行されてへんに崩れてないですね。非常に使いやすいです。また、この Submit ボタンを変更したいという時もあると思います。そういう時は Bootstrap のページの一番上からComponents をクリックしてこの glyph アイコンから選んでみましょう。丁度ここに虫眼鏡のアイコンがあるのでこれを使ってみましょう。これをコピーします。使い方はスクロールしてここの How to use のこのコードを見れば一目瞭然ですね。クラスを付与していれば大丈夫なようです。ではやってみましょう。テキストエディターに行ってもう不要ですのでこの checkbox は削除してしまいます。そしてこの button の間ここに入れてみたいと思います。span を入れて閉じタグを忘れずにそして Class を入れて、コピーしておいたアイコンの名前を貼り付けます。 ファイルを保存して「レッスンページ」を見てみましょう。まず更新すると多分この Check me out がなくなりこの Submit に先程入れたこの虫眼鏡のアイコンが入るはずです。これですね。では、いよいよ更新してみます。できました、シンプルでかわいい見た目になりましたね。この様にカスタマイズができます。また、テキストエディターに戻りここの placeholderここの Search という文字がこのマウスを乗せた時にもあるこの薄いグレーの文字になっています。どういったものかを、このフォームのテキストの中で表示できるのは分かりやすいですね。ここは任意で変更することができます。これで保存をして更新をします。この様に変わりました。ただこれ、非常に便利ですが注意しておきたいのがバージョンによっては対応していないものがあるということです。この Getting start からブラウザーのバージョンを見てみましょう。placeholder これが先程テキストエディターで編集したものですね。これです。ここの文字の部分のことですね。Placeholder は Internet Explore の 8そして 9 両方とも対応していないようです。 ですので、これだけに頼ってフォームを作ってしまうのは非常に危険ですね。もし IE8 や IE9 に対応するWeb サイトを作るのであればこのボックスの中の見出しだけに頼らない作り方をしておきましょう。例えばこの様な形です。CSS のページのフォームの中にこの様な形になっています。もし Internet Explore の8 と 9 を除外するのであればこの Enter email と Passwordこのフォームだけであるので上の文字は必要ないのですがそうするとInternet Explore の 8 と 9 でそれらを知ることが出来なくなってしまいます。この2つのフォームはなんだろうとなってしまいますのでやはりこの様にラベルなどで調整しておくことは必要ですね。このレッスンでは検索フォームのカスタマイズ方法について学習しました。

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

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

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

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

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

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