Twitter Bootstrap グリッドのサンプル2

※bootstrap.min.cssだけを読み込んでおり、表示幅に応じたレイアウトの変化はありません。

▼SAMPLE1

4段組の例。 「<div class="span3">~</div>」の記述を4つ並べて、均等幅の4段組を作っています。

HTML5

「HTML5」は、「HTML4」や「XHTML」の後継となる、便利な機能が増えた次世代のHTML。HTML5の基礎についての解説記事集です。

記事リストを見る »

CSS3

「CSS3」は、従来のCSSに新しく便利な仕様を加えたものです。CSS3の基礎についての解説記事集です。

記事リストを見る »

携帯WEB

携帯端末・スマートフォン向けサイトの作成が初めてという方向けに、携帯端末向けサイト作成の基本をまとめました。

記事リストを見る »

小技

ホームページ作成初心者の方向けに、ホームページ作成時に役に立つテクニック・小技をまとめました。

記事リストを見る »

▼SAMPLE2

2階層の段組を作った例。 1階層目では、「<div class="span4">~</div>」と「<div class="span8">~</div>」で2段組を作っています。 その右側の段の中に、2階層目の段組を作っています。 2階層目では、「<div class="span4">~</div>」の記述を3つ並べて、均等幅の3段組を作っています。

Twitter Bootstrap(ツイッター・ブートストラップ)を使ったサンプルページです。 使用例として、All About ホームページ作成の記事紹介などを掲載しています。 以下は、お勧めの記事3本です。

IE9「ピン留め」対応

自分のウェブサイトを、Internet Explorer 9以降に搭載されている「ピン留め」機能に対応させる方法をご紹介。ユーザに使いやすいジャンプリストを提供することで、アクセス頻度の向上を図ってみましょう。

記事を読む »

サイトアイコン作成

サイトアイコンの存在は、ウェブサイトの識別に役立ちます。複数サイズのアイコンを1ファイルに含めたfavicon.icoファイルを簡単に作成できる「x-icon editor」を使って、サイトアイコンを手軽に作る方法をご紹介。

記事を読む »

Firebug

ウェブサイトの構造把握やデザインの試行錯誤に便利なFirefoxアドオン「Firebug」をご紹介。描画とソースとを対にして表示したり、その場でソースを修正して表示確認したり、ウェブ作成を強力に支援する機能が満載。

記事を読む »

▼SAMPLE3

グリッドの指定方法いろいろ。

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

2

2

2

2

2

2

3

3

3

3

4

4

4

5

5

2

6

6

7

5

8

4

9

3

10

2

11

1

12

▼SAMPLE4

複数階層の段組の例。先のSAMPLE2よりも表示内容が少ないので、こちらの方がHTMLソースの構造が把握しやすいでしょう。

▼2階層 = 2段組+右側の段をさらに3段組


サイド
3

メイン
9

ボックス
4

ボックス
4

ボックス
4

▼3階層 = 2段組+右側の段をさらに3段組+中央をさらに3段組



サイド
2


メイン
10


ボックス
3

ボックス
6

小枠
4

小枠
4

小枠
4


ボックス
3