レイアウト例(float使用)
このサイトで使っている工夫
皆さまのリクエストに応えるべく，以下の例を盛り込みました．詳細は，Webページのソース（htmlファイル）とCSSファイルをご覧ください．
floatではなくてflexbox版のレイアウト例はレイアウト例その3参照．
レイアウトの工夫
- CSSを使って，ページ上部にヘッダ，左側にメニュー（目次），ページ下部にフッタを配置．
- ヘッダ部のメニューはページ幅が狭くなれば折り返す．
- ページ全体も，ページ幅が狭くなると，（ある範囲までは）テキストを折り返して表示する．
ナビゲーションの工夫
- 左上にあるロゴ（画像と画像文字）をクリックすると，どのページからでもトップページに戻る．
- ヘッダ部に，サイト内を行き来するためのグローバルメニューがある．いまいるページへのリンクは消してある．
- 左側の目次を使って，ページ内のコンテンツにジャンプできる．（この目次はBlue Griffonの機能で挿入してから，少しソースを編集しています．）
- [目次に戻る]リンクを使って，目次に戻ることができる．
アクセシビリティの工夫
- 画像が見えなくても使える．
- CSSを無効にしても使える．
- 様々なナビゲーション機能があるのでサイト内やページ内を行き来しやすい．
- Web標準に沿って作成してある．
[目次に戻る]
画像の横にテキストを回り込ませる
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"> レイアウト目的のテーブルを使うときは，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; と指定することで，左右マージンが同じ長さに自動調整され，ブロック要素であるテーブルが真中に表示されるわけです．
| 種目 | 距離（Ironmanの場合） | 距離（オリンピックの場合） |
|---|---|---|
| Swim | 3.86km | 1.5km |
| Bike | 180km | 40km |
| Run | 42.195km | 10km |
ただし，皆さんは不必要にセンタリングしすぎだと思います．教科書やメジャーなWebサイトでは，センタリング表示は一部にしか使わないです．センタリングするとかわいく思えるのは，僕は勘違いだと思います．
[目次に戻る]
背景画像
皆さんのWebページを見ていると，背景画像をページ全体に貼っている場合が多いですが，文字色とのコントラストに気をつけてください．たとえば下記の場合，なんて書いてあるか読めますか？
黄色い背景に白い文字を書くと，僕には読めません．これは極端な例だけれどね．
[目次に戻る]
レイアウト例その2
授業中に出た質問や要望を反映した別のレイアウトページを作ってみました．
レイアウト例その3（flexbox版）
flexboxを使ったレイアウト例を作りました．レスポンシブデザインの例とサブメニューの例も書いてあります．
『HTML5+CSS3の新しい教科書』実践編
『HTML5+CSS3の新しい教科書』のLesson12「実践編」のサンプルデータ(ZIPファイル)．(著作権の関係で実際のサイト例を掲載できないので，各自でダウンロード&展開して，ソースを確認してください．)
モバイルサイトの作り方
スマホに対応したサイトを作成する方法をここで簡単に説明するのは難しいので，参考になることだけ書いておきます．
画面が大きなPCでも画面が小さなスマホでも見やすいデザインとして「レスポンシブ ウェブ デザイン」（RWD）があります．CSSの技術を用いることで，画面幅に応じてレイアウトを変更して，画面幅が狭くなっても横スクロールが発生しないようにできます．それ以外に，スマホ専用のサイトを作る方法もあります．あるいは，スマホ用に作ったサイトをPCでも表示することもできます．
Googleの「モバイルフレンドリーテスト」で，作成したサイトがモバイルに対応しているかどうかを確認できます．
サイト例
jQuery MobileやBootstrapなどの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; }
これで，エラーが消えて，テーブルに枠線が付くようになります．
[目次に戻る]