Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
[CSS]よく使用するクラスをまとめたスタイルシート -Toolbox CSS
CSS-Tricksのエントリーから、異なるサイトにも利用が可能な、よく使用するクラスをまとめたスタイルシート「Toolbox CSS」を紹介します。 <textarea name="code" class="css" cols="60" rows="5"> .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } </textarea>
[CSS]ツールチップや画像拡大など実用的な4つのチュートリアル
<textarea name="code" class="css" cols="60" rows="5"> a{ z-index:10; } a:hover{ position:relative; z-index:100; } a span{ display:none; } a:hover span{ display:block; position:absolute; float:left; white-space:nowrap; top:-2.2em; left:.5em; background:#fffcd1; border:1px solid #444; color:#444; padding:1px 5px; z-index:10; } </textarea>
[CSS]スタイルシートの記述簡略化のチートシート
leigeberのエントリーから、スタイルシートの記述の簡略化のチートシートを紹介します。 チートシートは、PDFで配布されています。 <textarea name="code" class="css" cols="60" rows="5"> #div { background-color: #CCCCCC; (named, hex, rgb or 0-255) (default = transparent) background-image: url(images/bg.gif); (url or none) (default = none) background-repeat: no-repeat; (repeat, repeat-x, repeat-y or no-repeat) (default = repeat) background-attachment: scroll; (f
クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and
DiaryTechnology クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』 クリエイティブなCSSを実装したい。 そんなあなたにおすすめなのが、『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』。クリエイティブなCSSサンプル&チュートリアル50選だ。 以下にいくつかご紹介。 » Better Ordered Lists (Using Simple PHP and CSS) ↑のキャプチャはこちら。今までのリストとは違った見せ方をしたいときに。 » List Based Calendar リストでカレンダーを作成する方法。 » Create Custom Search Bars C
[CSS]HTMLを診断するスタイルシート -CSS Diagnostics
NealGrosskopf.comのエントリーから、HTML 4.01で非推奨とされる要素や空の要素、空の属性などをピックアップするスタイルシートの紹介です。 CSS Diagnostics - Find Depreciated Elements Using CSS CSS Diagnosticsは、meyerweb.comのCSS Tools: Diagnostic CSSの影響を受けて作成されたもので、非推奨の要素・属性、要素・属性が空の箇所などにボーダーを表示します。 Depreciated Elements：非推奨の要素 <textarea name="code" class="css" cols="60" rows="5"> applet, basefont, center, dir, font, isindex, menu, s, strike, u { border: 5px
[Think IT] 第2回：HTML 5の機能を試す！(1/3)
【即実践！HTML+CSS】ポストWebコーディング 第2回：HTML 5の機能を試す！ 著者：吉田 光利 公開日：2008/04/14（月） HTML 5で実現される世界 前回は「HTML 5が結構いけそうで、マイクロソフトも含めたブラウザベンダが足並みをそろえてHTML 5に向かっている」ということをお伝えしました。今回は実際にどのようなことができるのかに焦点を絞って解説していきましょう。実際にサンプルを試せる内容になっていますので、ぜひ体験してみてください。 sample.zip （ZIPファイル/1.26 KB） HTML 5を一言で言うと「WebアプリケーションとセマンティックWebを実現するためのHTML」ということになります。HTML 4が勧告された1999年は、WebアプリケーションやセマンティックWebという存在がありませんでした。それから9年を経た今、ようやくそれらを考
CSSだけでアコーディオン風ＵＩを実現するサンプル:phpspot開発日誌
The CSS-Only Accordion Effect - CSSnewbie CSSだけでアコーディオン風ＵＩを実現するサンプル。 通常、アコーディオンを実装する場合はJavaScriptが必要ですが、PureCSSで実現したものが公開されています。 :hover の際に高さを変えるというテクニックを使っているようで、沢山の情報をコンパクトにまとめられる魅せ方として使えそう。 当然アニメーションしませんが、サクっと軽く動作する感じもなかなかよいですね。 関連エントリ コンテンツをブロック内でスクロールさせられる「Easy Scroll」 カーソル位置によって自動スクロールする小窓実装ライブラリ
[CSS]Firefoxで「overflow:-moz-scrollbars-vertical;」の指定は危険 | コリス
信じられないサイトのエントリーで、「overflow:-moz-scrollbars-vertical;」を使用するとFirefoxで横スクロールバーがでない、と指摘があったのでテストしてみました。 結論から書くと、Fx1.5, 2, 3ともに横スクロールバーが表示されませんでした。 Firefoxでの検証 ブラウザの表示領域より広いコンテンツをブラウザに表示させ、左側に「overflow:-moz-scrollbars-vertical;」、右側に「overflow-y:scroll;」をbodyに指定したFx2, 1.5, 3のキャプチャです。 検証結果 Fx2, 1.5, 3の全てのFirefoxで「overflow:-moz-scrollbars-vertical;」を指定した場合、横スクロールバーが表示されませんでした。 また、「overflow-y:scroll;」を指定した場
CSS3 のカスケーディングについてのおさらい - IT戦記
いつも忘れて、毎回どうだったっけって確認するのがめんどいのでまとめておきます。 仕様 参照する仕様は CSS3 とします。（ワーキングドラフトなので、この内容は変わる可能性があります） CSS3 の仕様は以下から探してください site:http://www.w3.org/TR/css3 - Google Search カスケーディングとは カスケーディングに関する言葉の意味は以下に書いてあります。 CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called “cascading”. http://www.w3.org/TR/css3-cascade/#abstract 超意訳すると CS
コンテンツをブロック内でスクロールさせられる「Easy Scroll」:phpspot開発日誌
Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」 先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。 狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。 関連エントリ カーソル位置によって自動スクロールする小窓実装ライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートでパララックス(視差)効果を狙ったサイト集
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス
[CSS]50+のクリエイティブなスタイルシートのチュートリアル | コリス
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
CSSで修飾したテキストを作成＆プレビューするのに便利な「CSSTXT」:phpspot開発日誌
[CSS]印刷用のCSSのフレームワーク -Hartija | コリス
[CSS]背景画像を半々に表示するスタイルシート | コリス