Bootstrap3（ブートストラップ3）を使ったサンプルページです。
使用例として、All About ホームページ作成の記事紹介などを掲載しています。
ブラウザ上での表示とHTMLソースを参照してご活用下さい。
ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応しています。
レスポンシブ・ウェブデザインとは、閲覧者の画面サイズに応じて適用するスタイルを分けることで、閲覧者の端末に合ったデザインでウェブページを表示させる方法です。作成・管理の手間が少ない、PC・モバイル両対応のウェブサイトが作れます。
フォームへの入力文字列や選択項目が、指定の条件に合致しているかどうかをリアルタイムに調べられるスクリプトの使い方を解説。その場にバルーンの形で入力チェック結果を表示できるため、いちいち戻る手間が不要で便利な入力フォームが作れます。
500種類を超える豊富なアイコンをWebフォント機能で表示できる「Font Awesome」の使い方を解説。独自フォントを使った「文字」でアイコンが表示できる点が特長。CSSを使うことで簡単に望みのサイズ・配色でアイコンを表示できます。
複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーを作る方法を解説。jQueryを使ったスクリプト「A Simple jQuery Slideshow」を使うことで、とても短いJavaScriptソースで作成できます。
Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。ソースを編集したりWYSIWYG編集が可能。ソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成ソフトです。
ウェブサイト内の特定のページやディレクトリにアクセス制限を施す方法として、基本認証(BASIC認証・ベーシック認証)の使い方を初心者向けに解説しました。ユーザー認証(IDとパスワードの入力)機能で閲覧制限が施された会員制ウェブページを作ってみましょう。
※このサンプルページでは、Bootstrapを使うために以下のファイルを読み込んでいます。
オプションCSSファイルを読み込んだ場合の例は、Sample2をご覧下さい。