2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves,

上記の画像のように、見出しのタイトルに更新日などの情報を並べて表示する、というデザインがよくあります。 実現方法は色々ありますが、CSS でどのように実現するのが簡単でしょうか。 例えば、HTML は以下です。 <div id="press-release"> <h2>プレスリリース</h2> <p class="update">2009年03月09日更新</p> <!-- /#press-release --></div> 良く見かけるのは h2 と p をそれぞれ「position:absolute」で左と右に配置するもの、もしくは h2 を「float:left」、p を「float:right」にする方法です。 どちらを使うにせよサンプルの HTML のように h2 と p を div で囲う必要があり、CSS も長くなりがちです。 以下の方法が最も楽チンだったりします。 HTML

横並びのリンクメニューを作成するときに | （区切り）を表現する方法はいくつかあると思いますが、 今回はシンプルなソースで実現する方法を、紹介したいと思います。 HTML は <ul> <li> のみでシンプルに。 <ul> <li><a href="http://c-brains.jp/blog/wsg/">ホーム</a></li> <li><a href="http://c-brains.jp/blog/wsg/about.html">はじめての方へ</a></li> <li><a href="http://c-brains.jp/blog/wsg/contact.html">お問い合わせ</a></li> <li><a href="http://feeds.feedburner.jp/bashalog">RSS Feed</a> </li> </ul> CSS <ul> に widt

<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:

tableにおけるmarginの相殺 ネタ元：tableのmargin相殺 Firefoxのtableにおけるmargin相殺はちょっとややこしいので補足しておきます。 基本的に垂直方向の2つの要素にtable要素(display:table)が含まれる場合、marginの相殺は行われないです。 p{ margin-bottom:20px; } table{ margin-top:20px; } サンプル table要素にcaption要素が含まれる場合、table要素のmargin-topとcaption要素のmargin-bottomでmarginの相殺が行われます。 p{ margin-bottom:20px; } caption{ margin-bottom:20px; } table{ margin-top:20px; } サンプル Firefox以外のブラウザでは通常のブロック

スタイルシートのcontentプロパティと:beforeや:afterセレクタを利用すれば、指定した位置に文字や画像を追加することができる。CSS 2で定義されたもので、基本的な機能にはFirefox、Safari、Operaが対応している。Internet Explorerはずっと未対応のままだったが、バージョン8（ベータ版）で対応した。 今回はCSS 2.1で追加されたcontentプロパティの「none」という値にFirefox 3が対応したので、それがどのように機能するのかを確認していきたい。 スタイルシートでコンテンツを追加する まずは、スタイルシートでコンテンツを追加する方法を確認しておく。コンテンツを追加するには、contentプロパティでコンテンツの内容を、:before／:afterセレクタで追加する位置を指定する。 たとえば、コンテンツの内容を「COLUMN」、追加する

「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし

Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here. Block Hover Effect Links How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here. How To Make Clic

CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right. Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy! CS