幅可変、1カラム、文字サイズ100%、フォントは指定なし、これ以上にない閲覧者任せのデザイン
てんぽ: 幅可変、1カラム、文字サイズ100%、フォントは指定なし、これ以上にない閲覧者任せのデザイン CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 表示幅や文字サイズ、フォントなどは、ページ制作者がわざわざ指定しなくても、閲覧者側でブラウザのデフォルト設定を変更してもっとも読みやすいようにすればいいという話。 で、その指標が「幅可変、1カラム、文字サイズ100%、フォントは指定なし」。 このサイトでは全部は実践していませんが。 幅可変 リキッドレイアウト（幅可変）なら、もっとも読みやすくなるようにブラウザの幅を調節すればよい。 リキッドレイアウトの「欠点」としてたまに挙げられる「解像度の高いパソコンで見ると1行が長くなりすぎる」ことは欠点ではないと思う。 文字サイズ100% 本文にはfont-sizeを指定しなければ、ブラウザの設定を変えることで閲覧者の好みのサイズ
絶対配置要素の位置の基準
『ザ・ルールズ・オブ・スタイルシート』PDF資料18,19ページのposition:absoluteに関する説明で、絶対配置要素の位置の基準について以下のように書かれているのですが、 これはあまり正確ではない。 position: absolute 包含ブロック（左上）からの移動距離 ただし、ブラウザ実装はbodyからの移動距離 包含ブロック（左上）からの移動距離というのは正しいのですが、 ただし、ブラウザ実装は～という表現から包含ブロックについて誤解があることを読み取れます。 包含ブロックとは単に親要素のことを指すのではありません。CSSの仕様で細かく場合分けして定義された用語で、 絶対配置要素の包含ブロックは「祖先要素のうち最も近い、positionの値がstaticでない要素のパディング辺。該当するボックスがなければ、初期包含ブロック」です。 PDF資料の例では、position:
Last regrets収録のCD
てんぽ: Last regrets収録のCD CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 京アニ版『Kanon』では音楽に原作ゲームのBGMだけでなく、Re-feelやrecollectionsなどのKanon関連CDの曲も使われている。 第16話ではI'veのGirls Compilationアルバム「regret」に収録されているLast regrets -X'mas floor style-までかかった。 Last regretsと言えば、最近シングルCDが発売されて、これでバージョン違いがいくつになったのか気になったのでまとめてみた。 KANON original arrange album "anemoscope" PCゲーム初回特典音楽CD。戸越まごめによるBGMのアレンジ曲と主題歌のフルコーラス版を収録。非売品。 Last regrets/Place
blockquoteで切る - てんぽ
初めて訪れたHTMLリファレンスサイトでは、まずblockquote要素の解説を見てみる。 blockquote要素を正しく解説しているサイトは少なく、これを見るだけでそのサイトが信頼できないサイトかどうかすぐに判断できる。 XHTML1.0やHTML4.01のStrict、XHTML1.1ではblockquote要素の直下に素の（ブロックレベル要素でマークアップされていない）テキストやインライン要素を書くことはできない（Transitionalではできる）。 この仕様はHTMLのマークアップの概念を考えれば当然のことであるので、 HTMLを理解している制作者はblockquoteの直下に素のテキストを書こうとは思わない。 サンプルソースでblockquoteの直下に素のテキストが書かれているリファレンスサイトは、他のページを見るまでもなく去ることにしています。
オートスクロールの効かないdivにユーザースタイルシートで対処
ブログデザインの好みについてちょっといわしてもらいます あとCNETだとかITMediaだとかそれ系の企業が運営してるITニュースサイトで腹立つのが、マウスのオートスクロールが効かないやつ。 本文読みながらスクロールバー動かすのがめんどくさいのでオートスクロールしようとしてホイールボタン押すと(俺はホイールボタン押しでオートスクロールするように設定してる)、効かないんですよ。 そんでもうブラウザの画面ギリギリはじっことかを押すと出来たりする。 DIVによって、オートスクロールが効くやつと効かないやつがあるんですな。 CSSでoverflow:hiddenなどが指定してある部分では、IE6でオートスクロールができないようです。 自分もブログのデザインをするときにはよくやるんですが、overflow:hiddenを指定しておけば、 コンテンツ領域をはみ出す部分（大きな画像など）があっても、それ
『セオリー・オブ・スタイルシート』発売
CSS 2.1今度こそ スタイルの設計とCSS 2.1 セオリー・オブ・スタイルシート 神崎先生――神崎正英氏はなぜかこう呼ばれることが多い。ごく簡単なHTMLの説明でHTML入門した自分にとってはやはり「先生」である――のCSS解説本。 CSSの理論と実践の2部構成。 前半部、CSS2.1に基づいた「ボックスと視覚整形モデル」の詳細な解説が圧巻。 Web上で読めるCSS解説ではCSS2リファレンスが最強ですが、 CSS2.1を本格的に解説した（日本語の）サイトや本を見るのは本書がはじめてです。 難解な部分については根拠となる仕様書の該当部分を示し、ブラウザの実装状況やCSS2との相違点についても触れられています。 後半は関拓也氏による「スタイルシートの実践」。こちらはCSSデザインでWebサイトを作り上げるチュートリアル形式の解説。 要所には前半の理論部分への参照もあり親切です。 CSS
メモ：MacIE5 bottomのバグ
MacIE5で、絶対配置ボックスのコンテナブロックがposition:relativeによって形成されているとき、 そのボックスの位置をbottomプロパティで正しく指定できない。 <div> <p>static</p> <p class="hoge">absolute</p> </div> div { position:relative; } .hoge { position:absolute; bottom:0; } position:absoluteが指定されたボックスは、その位置の基準として、positionの値がstatic以外である最も近い祖先要素を参照します。 上記のソースの場合、絶対配置要素のマージン下辺はdiv要素の下辺と重なるはずですが、MacIE5ではdivの上辺の位置になるようです。 divがposition:absoluteの場合、またはdivにheightが指定
div id="header"の違和感
div要素とデザインの関係 ブログ型 div要素で全体をヘッダ・フッタ・本文などに区分する。 ブログ型のdiv要素の使い方のうち、とくにh1要素（といくつかの要素）をヘッダとしてまとめることには違和感を覚えます。 （XHTML2.0型でいうところの） h1が「支配する」範囲はページ全体であると考えられるのに、以下のようにdivがその範囲を分断してしまう（木構造のバランスが悪い）からです。 <div id="header"> <h1>見出し1</h1> </div> <div id="body"> <h2>見出し2</h2> （以下略） 自分の場合、FC2ブログのテンプレを作るときには、XHTML2.0型とブログ型の中間のようなdivの使い方をしていますが、 h1を含んだヘッダdivは使いません（XHTML2.0型）。とはいえ、見栄えのためにdivを追加することもあって（ブログ型）、その場合
CSSで三段組
三段組で遊ぼ 次の条件を満たす段組をCSSでレイアウトしやがれ。今作れ、すぐ作れ、直ちに作れ。 3カラムのリキッドデザインであること。 両端のカラムは固定幅とし、中央のカラムのみ可変幅にすること。 HTMLソースでは中央のカラムを他のカラムより先に記述すること。 position: absoluteは使用禁止。floatでデザインすること。 では作ってみようか、と思ったけどCSSによる段組（マルチカラム）レイアウト講座のメインカラム幅可変、サイドバー幅固定 3カラムに解説があるので、そちらを参照のこと。 「三段組でメインコンテンツを先に書いてみるテスト（rtmr）」ではレイアウト講座とは違ったやり方で実現しています。 .main-w { float: left; width: 100%; margin-right: -100%; } margin-right: -100%;というのが大胆で
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
フロートとマージン辺
floatを使った段組では、各カラムのwidthの合計がコンテナの幅を超えないことが「カラム落ち」しないことの条件だと思われがちですが、 仕様にはそのような規定はありません。重要なのはマージン辺（外辺）です。 floatによる段組は「ボックスの回りこみ」なんていう曖昧な表現では説明できません。 浮動体の振る舞いを支配する厳密な規則を、 2カラムレイアウトにおける連続するふたつの左フロートに適用して考えると、 <div id="container"> <div id="main"> 1番目の左フロート </div> <div id="sub"> 2番目の左フロート </div> </div> 2番目の左フロートの外左辺（左マージン辺）は、1番目の左フロートの外右辺より右側になければならない 2番目の左フロートの外右辺は、コンテナの右辺より右側にあってはならない これらの条件が守られている限り
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
