レイアウト例(float使用)

このサイトで使っている工夫

皆さまのリクエストに応えるべく,以下の例を盛り込みました.詳細は,Webページのソース(htmlファイル)とCSSファイルをご覧ください.

floatではなくてflexbox版のレイアウト例はレイアウト例その3参照.

レイアウトの工夫

ナビゲーションの工夫

アクセシビリティの工夫

[目次に戻る]

画像の横にテキストを回り込ませる

CSSのfloatプロパティを使う場合

左側の画像の右にテキストが回り込む

東京女子大学本館この画像には,CSSで「float:left」と指定してあるので,画像は左側に寄り,その反対側(つまり右側)にテキストが流し込まれます.画像に適当な値のmarginを指定すれば,画像と文字の間に間隔があきます.

CSSで「clear:both」と指定しない限り,全ての要素が右側に回り込み続けるのでご注意ください.

右側の画像の左にテキストが回り込む

東京女子大学本館この画像には,CSSで「float:right」と指定してあるので,画像は右側に寄り,その反対側(つまり左側)にテキストが流し込まれます.

回り込みを解除するのを忘れないように!

CSSのflexboxプロパティを使う場合

左側の画像の右にテキストを置きたい

東京女子大学本館

この画像とこの文章の両方を含むdivボックスにCSSで display:flex; と指定してあるので,2つの要素は横並びになります.floatより簡単で副作用もありません.画像と文章がひっつかないように画像のインラインスタイルで右マージンを取っています.

右側の画像の左にテキストを置きたい

今度は文章を先に書いて図をその後に書けばよいだけです.やはり文章の段落要素にインラインスタイルで右マージンをつけています.

東京女子大学本館

[目次に戻る]

レイアウトテーブル

CSSを使わなくてもテーブル要素を使ってレイアウトすることもできます.以下のような場合,レイアウトテーブルを使えば簡単に画像と文章をそろえて表示できますね.でも,今の時代はCSSグリッドなどもっと適切な方法があるのでレイアウトテーブルの使用はおすすめしません.

実家の池とトンボ 画像を左側に表示して,真中に何かの文章を書く.あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお. この表は3行3列なので,このセルが余ってしまった.3行目に示すようにセルを結合することもできます.
画像を真中に表示して,画像の左側と右側の両方に文章を書くこともできます. 実家の池とトンボ 画像を真中に表示して,画像の左側と右側の両方に文章を書くこともできます.

このテーブルは枠線を表示せず,セル間隔を少し空けるようにスタイルシートで設定してあります.

<table width="100%" border="0" cellspacing="10">
<tr>
<td style="text-align:center"><img ... /></td> <td>画像を左側に表示</td> <td>この表は3行3列</td>
</tr>
<tr>
<td>画像を真中に表示</td> <td style="text-align:center"><img ... /></td> <td>画像を真中に表示</td>
</tr>
<tr>
<td colspan="2">このテーブルは...</td> <td style="text-align:center"><img ... /></td>
</tr>
</table>

レイアウト目的のテーブルを使うときは,th要素やcaption要素を使ってはいけません.table要素の中に,行を表すtr要素とセルを表すtd要素だけを使います.

実家の池とトンボ

[目次に戻る]

センタリングあれこれ

センタリングするときは text-align;center というCSSのルールが使えますが,このルールはブロックレベルの要素にしか適用できません.なので,(インライン要素である)画像をセンタリングしたいときは,下記の規則をCSSに作成して,画像を囲むp要素に適用します.すると,(ブロック要素である)p要素の中にある(インライン要素の)img要素がp要素の真中に表示されます.

.center {
	text-align: center;
}

なべさんの似顔絵

テーブルをセンタリングしたいときは,下記のようにします.つまり,CSSで margin-left:auto; と margin-right:auto; と指定することで,左右マージンが同じ長さに自動調整され,ブロック要素であるテーブルが真中に表示されるわけです.

Triathlonの種目と距離
種目 距離(Ironmanの場合) 距離(オリンピックの場合)
Swim 3.86km 1.5km
Bike 180km 40km
Run 42.195km 10km

ただし,皆さんは不必要にセンタリングしすぎだと思います.教科書やメジャーなWebサイトでは,センタリング表示は一部にしか使わないです.センタリングするとかわいく思えるのは,僕は勘違いだと思います.

[目次に戻る]

背景画像

皆さんのWebページを見ていると,背景画像をページ全体に貼っている場合が多いですが,文字色とのコントラストに気をつけてください.たとえば下記の場合,なんて書いてあるか読めますか?

黄色い背景に白い文字を書くと,僕には読めません.これは極端な例だけれどね.

[目次に戻る]

レイアウト例その2

授業中に出た質問や要望を反映した別のレイアウトページを作ってみました.

レイアウト例その2

レイアウト例その3(flexbox版)

flexboxを使ったレイアウト例を作りました.レスポンシブデザインの例とサブメニューの例も書いてあります.

レイアウト例その3

『HTML5+CSS3の新しい教科書』実践編

『HTML5+CSS3の新しい教科書』のLesson12「実践編」のサンプルデータ(ZIPファイル).(著作権の関係で実際のサイト例を掲載できないので,各自でダウンロード&展開して,ソースを確認してください.)

モバイルサイトの作り方

スマホに対応したサイトを作成する方法をここで簡単に説明するのは難しいので,参考になることだけ書いておきます.

画面が大きなPCでも画面が小さなスマホでも見やすいデザインとして「レスポンシブ ウェブ デザイン」(RWD)があります.CSSの技術を用いることで,画面幅に応じてレイアウトを変更して,画面幅が狭くなっても横スクロールが発生しないようにできます.それ以外に,スマホ専用のサイトを作る方法もあります.あるいは,スマホ用に作ったサイトをPCでも表示することもできます.

Googleの「モバイルフレンドリーテスト」で,作成したサイトがモバイルに対応しているかどうかを確認できます.

サイト例

jQuery MobileBootstrapなどのJavaScript Library(フレームワーク)を用いることで,スマホに対応したサイトを簡単に作成できるので,例を上げます.(この2つ以外にも,スマホ対応のサイトを作成するフレームワークは色々あります.)

[目次に戻る]

table要素の枠線を指定

W3CのMarkup Validation Serviceは,border="1" と書かれたtable要素に対してエラーを指摘します.それを消すには,table要素の「border="1"」を手で消して,CSSに,下記2行を手で追加してください.

table td,th { border: solid 1px; }
table { border-collapse: collapse; }

これで,エラーが消えて,テーブルに枠線が付くようになります.

[目次に戻る]