「<div class="col-12 col-md-6 col-lg-3">～</div>」のブロックを4つ並べて、均等幅の段組を作っています。
広い画面(lg)では4段組に、やや狭い画面(md)では2段組に、とても狭い画面では段組なしになります。
ここではコンテナとして、横幅をフルに使う「container-fluid」を指定しています。
500種類を超える豊富なアイコンをWebフォント機能で表示できる「Font Awesome」の使い方を解説。画像ではなく、独自のフォントを使った「文字」でアイコンが表示できる点が特長。CSS(スタイルシート)を使うことで簡単に望みのサイズ・配色でアイコンを表示できます。
複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーを作る方法を解説。jQueryを使ったスクリプト「A Simple jQuery Slideshow」を使うことで、とても短いJavaScriptソースで作成できます。
Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。ソースを編集したりWYSIWYG編集が可能。ソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成ソフトです。
ウェブサイト内の特定のページやディレクトリにアクセス制限を施す方法として、基本認証(BASIC認証・ベーシック認証)の使い方を初心者向けに解説しました。ユーザー認証(IDとパスワードの入力)機能で閲覧制限が施された会員制ウェブページを作ってみましょう。
ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応しています。
レスポンシブ・ウェブデザインとは、閲覧者の画面サイズに応じて適用するスタイルを分けることで、閲覧者の端末に合ったデザインでウェブページを表示させる方法です。作成・管理の手間が少ない、PC・モバイル両対応のウェブサイトが作れます。
フォームへの入力文字列や選択項目が、指定の条件に合致しているかどうかをリアルタイムに調べられるスクリプトの使い方を解説。その場にバルーンの形で入力チェック結果を表示できるため、いちいち戻る手間が不要で便利な入力フォームが作れます。
大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動で整列してくれるスクリプト「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、極力無駄な隙間ができないように詰めて配置してくれます。
※上記では、下記のように12分割されたグリッドを、(広い画面では)3つ分ずつ使って4段組を構成し、(やや狭い画面では)6個分ずつ使って2段組を構成し、(かなり狭い画面では)12個分すべてを使って段組をなくしています。
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
3/12
3/12
3/12
3/12
6/12
6/12
12/12