ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
CSS liefde – CSSの使える!と思えるテクニックを紹介。 » 文章をはみ出さずに折り返す
HTML <pre class="wrap">テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト</pre> pre { width: 300px; margin: 20px 30px; background-color:#d8d1cd; border: 3px solid #c0c0c0; padding: 5px; } .wrap { /* Mozilla */ white-space: -moz-pre-wrap; /* CSS3 */ white-space: pre-wrap; /* IE 5.5+ */ word-wrap: break-word; } PREにはWidthを指定 折り返したい物にはClassをつけて、Fx用CSS3用IE用と指定します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
