大量の要素がびっしり詰まっていて全体的に見づらいのを解決 - CSS実践アイデアファイル
04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決 文＝境祐司 マルチカラムレイアウトの各ボックスに配置された大量の要素を一覧すると、その情報量に圧倒されてしまうことがある。ニュースサイトなどは、新聞のフォーマットと同様に、すき間なく情報が詰め込まれる。このような形式のWebサイトは、余白を大きく取るような大胆なレイアウトは難しい。見出しや段落などの間隔をうまく調整し、情報量と読みやすさを両立させなくてはならない。行間、文字の間隔、単語の間隔、そして段落の間隔など、詳細に見ていく必要がある。特に情報のまとまりごとに確保しなければならない余白については、よく検証しよう。 【1】左右、中央の3つのボックスの内容（見出しや記事）が詰まって見える。各ボックスの余白（padding）の値が小さいので、区切り線との間隔がなくなっている。 XHTML 【2】XHTMLで、要素間の余白を確保す
無料ホームページテンプレートのNikukyu-Punch
nikukyu-punch.com 2024 著作権. 不許複製 プライバシーポリシー
ウィンドウサイズによってスタイルシートを変える - builder by ZDNet Japan
ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。 こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。 現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。
CSS examples
Site not Updated!! This site hasn't been maintained or updated for a considerable number of years and is just left in place for historic reasons. Many of the techniques discussed here are not relevant these days and use out-dated techniques not applicable to today's web design structures. The demos may still be of interest as they show various techniques but most of these demos were created before
[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
![[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
グラフィックデザイナーのためのCSSレイアウトメモ : 便利な小技「ヘッダーとメニューを固定する」
CSSレイアウト[便利な小技] ヘッダーとメニューを固定する [注意] 残念ながら「position: fixed;」はWINのIE(4～6)では対応していない。 FireFoxなどで見てください。 このページをスクロールしてみると、他のページと異なり、ヘッダーとメニューがウィンドウに固定され、メインスペースのみがスクロールする。 「position: fixed;」を使うと、フレームセットのように画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。 フレームに代わる画期的なCSS、と喜んだのも束の間。 なぜか、Mac IE5やNNで使えるのに、WINのIEでは使えないCSSだった。というわけでハッキリ言って使えない小技だが、一応作り方を解説する。 ボックスを固定するには 「2段組のレイアウト」で「position: absolute;」の説明をしたが（→「pos
nina-kaz.com:スクリーンショット 各ブラウザの見栄え CSS機能{position:fixed;}
スクリーンショット 各ブラウザの見栄え、CSS 機能・固定ブロック編 ({ position : fixed ;}) CSS 機能・固定ブロック編 ({ position : fixed ;}の説明 Windows版 Firefox の見栄え メニュー固定ブロック Windows 版 SeaMonkey の見栄え メニュー固定ブロック Windows 版 Opera の見栄え メニュー固定ブロック Windows 版 IE7 の見栄え メニュー固定ブロック Windows 版 IE6 の見栄え メニュー固定ブロック Mac 版 Safri の見栄え メニュー固定ブロック Mac 版 Shiira(シイラ) の見栄え メニュー固定ブロック CSS 機能・固定ブロック編 { position : fixed ;} の説明 position プロパティで値を fixed にすると、スクロールして
css による疑似フレーム IE6 標準準拠モード完全対応版 (CSS ハック / JavaScript未使用)
css による疑似フレーム IE6 標準準拠モード完全対応版 (CSS ハック / JavaScript未使用)2009-05-19 css のみを使って、ヘッダ / メニュー / フッタをスクロールしないように固定して疑似フレームを表現する手法は position: fixed による方法が広く知られています。 この方法は、手軽に疑似フレームを表現できる一方で、IE6 が対応していないという非常に残念な現実があり、対象ブラウザから IE6 を完全に外してしまえるような状況ならともかく、(特に仕事の上などでは) IE6 を対象から外せない事も多いので頭痛の種でした。 IE 独自拡張の expression を使って、fixed に近い状況を作り出す技が色々と開発されているのですが、どうも自分にしっくり来るものがありませんでした。 そこで、下記の条件を満たすやり方を開発したので公開します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイドバーを固定にしたサンプル | CSS Lecture
CSSでヘッダーを固定にしたサンプル | CSS Lecture
CSS段組4：段の背景色が切れないようにする(後編) [ホームページ作成] All About![CSS段組4：段の背景色が切れないようにする(後編) [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
スタイルシート ［ホームページ作成］All About
CSS段組3：隣の段が下に回り込むのを防ぐ [ホームページ作成] All About