goldheadのブックマーク - はてなブックマーク

CSSでtable幅を設定するためのまとめ

CSSでtable幅を設定するためのまとめです。以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。１．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用例として、次のtable要素を利用します。

goldhead 2018/03/12

html

リンク

CSSでfloatを解除する方法のまとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除するということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。１．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi

goldhead 2013/03/28

css
html

リンク

いまさら聞けないCSS font-familyのまとめ

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。認識誤りがありましたらどこかでつぶやいてください。１．font-familyとは？通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳＰゴシック」などがフォントファミリー名です。このフォントファミリー名を指定するためのプロパティが「font-family」です。サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳＰゴシック","MS PGothic",sans-serif;

goldhead 2012/08/14

css

リンク

Movable Type 4 の再構築負荷を軽減する8つのTips

Movable Type 4 の再構築負荷を軽減する方法をまとめました。Movable Type を運用していて、「再構築に時間がかかるな」と思い始めたときに参考になれば幸いです。１．SSIによるモジュール化サイドバーの「最近のブログ記事」「最近のコメント」「カテゴリーリスト」「月別アーカイブリスト」「タグクラウド」などは、メインページや各アーカイブページ・ブログ記事ページの各テンプレートから呼び出され、必要なページ分再構築を繰り返します。例えば、あるブログに100のブログ記事が投稿されていると仮定すると、ブログ記事ページは100ページあり、ブログ記事ページの再構築を行なった場合、サイドバーの情報も（同じ内容を出力する場合でも）100回再構築を繰り返すことになります。テンプレートタグを使っているリスト類が多いほど、再構築の負荷が大きくなります。サイドバーのリスト類の再構築の負荷を軽