[B! CSS] [6ページ] wims_Teaのブックマーク

wims_Tea id:wims_Tea

CSSに関するwims_Teaのブックマーク (186)

[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
wims_Tea 2008/05/28
画像をクリップや額縁でデコレーションするスタイルシート

CSS
リンク
[CSS]スタイルシートでパララックス(視差)効果を狙ったサイト集
kremaliciousのエントリーから、パララックス（視差）による面白いエフェクトを実装したサイトを紹介します。エフェクトはスタイルシートだけではなく、スクリプトを併用しているものもあります。 Showcasing the CSS Parallax Effect: 12+1 Creative Usages
wims_Tea 2008/05/26
スタイルシートでパララックス(視差)効果を狙ったサイト集

CSS

WEB

デザイン
リンク
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。印刷用デザインをどうするか。当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方︵基本編︶もかなり︵むしろほとんど︶参考にさせてもらいました。そのポイントを以下の7つにまとめました。なお、文末にアックゼ
wims_Tea 2008/05/18
印刷用デザインをきれいにまとめるための7つのポイント

WEB

デザイン

CSS
リンク
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>
wims_Tea 2008/05/13
dtをfloatする場合の注意点

CSS
リンク
[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>
wims_Tea 2008/05/08
よく使用するクラスをまとめたスタイルシート -Toolbox CSS

CSS

まとめ
リンク
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス
Six Revisionsのエントリー「30の卓越したCSSテクニック」から、CSSとHTMLだけで実装するエクセレントなテクニックをいくつか紹介します。 30 Exceptional CSS Techniques and Examples
wims_Tea 2008/04/30
アイデア満載のスタイルシートのテクニック30選

CSS

まとめ
リンク
[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>
wims_Tea 2008/04/28
ツールチップや画像拡大など実用的な4つのチュートリアル

CSS

チュートリアル
リンク
[CSS]スタイルシートの記述簡略化のチートシート
leigeberのエントリーから、スタイルシートの記述の簡略化のチートシートを紹介します。チートシートは、PDFで配布されています。 <textarea name="code" class="css" cols="60" rows="5"> #div { background-color: #CCC CCC; (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
wims_Tea 2008/04/23
スタイルシートの記述簡略化のチートシート

CSS

チートシート
リンク
クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and
DiaryTechno logyクリエイティブな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
wims_Tea 2008/04/22
クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50 Creative Examples and Tutorials』

CSS

チュートリアル
リンク
[CSS]50+のクリエイティブなスタイルシートのチュートリアル | コリス
noupeのエントリー「50+のクリエイティブなCSSのチュートリアル」から、CSSのテクニックをいくつか紹介します。 Using CSS to Do Anything: 50+ Creative Examples and Tutorials 先日、紹介した「チェックしておきたい50のCSSのテクニック」とは、別のものとなっています。
wims_Tea 2008/04/22
50 のクリエイティブなスタイルシートのチュートリアル

CSS

チュートリアル
リンク
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
wims_Tea 2008/04/16
Scriptを使わないCSSエフェクト、Tipsいろいろ

CSS

DesignWalker
リンク
[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
wims_Tea 2008/04/15
HTMLを診断するスタイルシート -CSS Diagnostics

CSS

HTML
リンク
[Think IT] 第2回：HTML 5の機能を試す！(1/3)
︻即実践！HTML+CSS︼ポストWebコーディング第2回‥HTML5の機能を試す！著者‥吉田光利公開日‥2008/04/14︵月︶ HTML5で実現される世界前回は﹁HTML5が結構いけそうで、マイクロソフトも含めたブラウザベンダが足並みをそろえてHTML5に向かっている﹂ということをお伝えしました。今回は実際にどのようなことができるのかに焦点を絞って解説していきましょう。実際にサンプルを試せる内容になっていますので、ぜひ体験してみてください。 sample.zip ︵ZIPファイル/1.26 KB︶ HTML5を一言で言うと﹁WebアプリケーションとセマンティックWebを実現するためのHTML﹂ということになります。HTML4が勧告された1999年は、WebアプリケーションやセマンティックWebという存在がありませんでした。それから9年を経た今、ようやくそれらを考
wims_Tea 2008/04/14
第2回：HTML 5の機能を試す！(1/3)

HTML

CSS

読み物
リンク
CSSで修飾したテキストを作成＆プレビューするのに便利な「CSSTXT」:phpspot開発日誌
CSSTXT - Create a style to your textCSSで修飾したテキストを作成＆プレビューするのに便利な﹁CSSTXT﹂。指定可能なのは、font-family, letter-spacing, word-spacing, text-size, line-height, color, font-weightなどテキストに関わる殆どのCSSプロパティ。以下、作成してみた例。単にCSS書いたらいいだけなのですが、手軽に出来るところが意外に便利でした。ＰＨＰＳＰＯＴ CSSの学習用や、動作確認用に便利に使えますね。日本語も使えるようです。
wims_Tea 2008/04/14
CSSで修飾したテキストを作成＆プレビューするのに便利な「CSSTXT」

CSS

デザイン

オンラインサービス

PHPSPOT開発日誌
リンク
[CSS]印刷用のCSSのフレームワーク -Hartija | コリス
Hartija - Css Print Framework Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> </textarea>
wims_Tea 2008/04/14
印刷用のCSSのフレームワーク -Hartija

CSS
リンク
CSSだけでアコーディオン風ＵＩを実現するサンプル:phpspot開発日誌
The CSS-Only Accordion Effect - CSSnewbie CSSだけでアコーディオン風ＵＩを実現するサンプル。通常、アコーディオンを実装する場合はJavaScriptが必要ですが、PureCSSで実現したものが公開されています。 :hover の際に高さを変えるというテクニックを使っているようで、沢山の情報をコンパクトにまとめられる魅せ方として使えそう。当然アニメーションしませんが、サクっと軽く動作する感じもなかなかよいですね。関連エントリコンテンツをブロック内でスクロールさせられる﹁Easy Scroll﹂カーソル位置によって自動スクロールする小窓実装ライブラリ
wims_Tea 2008/04/11
CSSだけでアコーディオン風ＵＩを実現するサンプル

CSS

PHPSPOT開発日誌
リンク
[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;﹂を指定した場
wims_Tea 2008/04/10
Firefoxで「overflow:-moz-scrollbars-vertical;」の指定は危険

CSS

FireFox
リンク
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
wims_Tea 2008/04/08
CSS3 のカスケーディングについてのおさらい

CSS
リンク
コンテンツをブロック内でスクロールさせられる「Easy Scroll」:phpspot開発日誌
Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。関連エントリカーソル位置によって自動スクロールする小窓実装ライブラリ
wims_Tea 2008/04/07
コンテンツをブロック内でスクロールさせられる「Easy Scroll」

CSS

Javascript

PHPSPOT開発日誌
リンク
[CSS]背景画像を半々に表示するスタイルシート | コリス
<textarea name="code" class="html" cols="60" rows="5"> <body> <div id="rightHalf"></div> </body> </textarea>
wims_Tea 2008/04/04
背景画像を半々に表示するスタイルシート。これをすることはほぼ皆無だとは思うけど、これの応用ならなんとか。

CSS
リンク
前のページ 1 2 3 4 5 6 7 8 9 10 次のページ