【CSS】 dl で float を使う | バシャログ。
サイトトップページのニュースリリースなどで、dlによるfloatはよく使用してます。 昔はtableタグを使用して実現していましたが、「表組み以外でtableタグは使用しない」ことにしています。 WEB標準に順ずるシーブレインの取り組みです。 今回は、dtに日付、ddにニュースタイトルの場合を例としてご紹介します。 サンプルはシーブレインサイトトップページの以下の部分。 htmlタグは以下です。 htmlタグ <dl> <dt>2007-02-20</dt> <dd>辞典機能つきフィードリーダー『G10 Reader』運用開始</dd> <dt>2006-06-30</dt> <dd>マニュアル作成ページをリニューアルしました。</dd> </dl> CSS設定方法 dl dt { float: left; width: 5em; margin: 0 0 0.5em 0; padding:
印刷用CSSを作成する | FSFIELD Labs
CSS 印刷用CSSを作成する Webサイトを印刷すると、背景が表示されなかったり、インクがもったいなかったりします。 そこで印刷用のCSSを用意し、印刷用に最適化されたデザインを作成する方法を紹介します。 htmlの記述 <link rel="stylesheet" type="text/css" href="ここに印刷用のCSSのアドレスを記述" media="print"> head要素内に印刷用CSSを読み込ませます。ポイントはmedia属性で、media="print"とすることで印刷するときに適用されます。 印刷用CSSの設定 おすすめしたい初期設定 * { font-size: 11pt; color: #000000; background-color: #FFFFFF; } a{ text-decoration: underline; color: #000000; }
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index
ブラウザ img要素、map要素、area要素、この3つの要素を組み合わせることで、イメージマップを設定することができます。 イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area s
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
Voosh Themes
Welcome to our free WordPress themes gallery. We specialize in themes for personal and professional blogs, but you will also find some of our themes are appropriate for company websites, magazine layouts, and more. Feel free to browse! First you will need to create a WordPress blog before you can install our themes. Once you have installed WordPress.org you can easily upload any of our themes wit
Demo: Pure CSS speech bubbles – Nicolas Gallagher
By Nicolas Gallagher The demo page for Pure CSS speech bubbles. For a detailed explanation view the CSS file. It is heavily commented. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
IDEA * IDEA
IDEA * IDEA
http://www.designwalker.com/2010/05/css3.html