specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
[CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
[CSS]マージンとパディングの使い分けをおさらい | コリス
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例：15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
TJK Design
TJK Design is now cssmojo Please update your bookmarks! TJK Design has been retired. A few articles have been moved here while others have been left behind. You can search cssmojo, check the home page, check the Site Map, or browse these topics: html css javascript a11y trick tricks layout rwd opinion bfc float clearfix misc
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
CSSでWebページの背景画像を指定する - builder by ZDNet Japan
DXの成否を分けるのはガバナンス Microsoft Security Forum 2021 Day2 どこよりもわかりやすい基調講演解説！ 現場業務のデジタル化の最適解 JBSのアプリポケットとアプリメーカーが 企業のデジタル化をサポート 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 Microsof
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
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集:phpspot開発日誌
Dynamic Drive CSS Library- CSS Oval buttons These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible oval shaped CSS buttons, similar to CSS Square Buttons. CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集。 次のようなボタンのＣＳＳとＨＴＭＬが公開されています。 マウスオーバーでホバーします。 マークアップは次のように、div と a , span タグを併用 <div class="buttonwrapper"> <a class="ovalbutton" hre
CSSでお店のメニュー風なページを作成:phpspot開発日誌
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
ホームページのデザイン本を買う前に見ておくとお得なエントリまとめ 見本サイト数135程*ホームページを作る人のネタ帳
（このイメージは、このブログの記事内容をイメージするもので、実在しません） 先日書店に、ホームページのデザイン集なるものがおいてあったので、買ってみた。 2000円出して買った本ですが、どうも損した気分に陥る。 そんな損した気分に陥る人が他にもいるかもしれないので、ホームページ、及びブログのデザインのインスピレーションをここにまとめておく事にします。 30ブログデザイン 最近話題になったエントリ。 30 More Excellent Blog Designs 良質なブログデザイン30サイトのまとめエントリ。 Simplicity and Whitespace（シンプルと空白のデザイン）からはこのブログデザインが好き。 すごくすっきりしているというのとさっぱりしていて、ちょっとクドイ。 Theocacao Weblogs Which Don’t Look Like Weblogs（ブログのよ
CSS解説 -カスケード (The cascade)-
あるHTML文書に適用されるスタイルシートには、 「HTML文書作成者」・・・HTML文書に直接記述したり、別ファイルとして用意してLINK要素で連携させたりする。 「ユーザ（利用者）」・・・使用するブラウザ等で指定できる場合がある。 「UA（ブラウザ等）」・・・CSSに適合するUAでは、どのスタイルシートよりも先にデフォルトスタイルシートが適用される。（或いはそうであるかの様に動作する。） という３通りの出所があります。これら３つのスタイルシート間で宣言が衝突したり、或いは一つのスタイルシートの中であっても宣言が衝突する事があります。そういった場合に、最終的にどの指定が適用されるのか、その優先順位を決めるのがこの「カスケード処理」です。 この「カスケード処理」では、以下で説明する、 出所による優先順位 詳細度による優先順位 位置による優先順位 の順に処理されます。 その１．出所による優先
CSSにおけるセレクタの優先順位 - reflux flow
セレクタの優先順位を決める詳細度の計算方法。 このページの目次 はじめに セレクタの種類 優先順位の計算方法 参考文献 主な変更履歴 はじめに ここではCSS2.1の仕様を元にセレクタの優先順位を決める詳細度（specificity）の計算方法について説明します。 セレクタの種類 まずは用語の確認（参考: 5 Selectors）。 全称セレクタ すべての要素に適合するセレクタ。「*」と記述する。 IDセレクタ id属性（HTML/XHTMLの場合）に基づくセレクタ。「#ID」と記述する。 クラスセレクタ class属性に基づくセレクタ。「.クラス名」と記述する。属性セレクタを用いた「[class~=クラス名]」と意味は同じ。 属性セレクタ 属性および属性値に基づくセレクタ。「[属性名]」、「[属性名=属性値]」、「[属性名~=属性値]」、「[属性名|=属性値]」のように記述する。 疑似ク
CSSで美しくデザインされたカレンダーのCSSサンプル:phpspot開発日誌
A CSS styled calendar | Veerle's blog Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar. CSSで美しくデザインされたカレンダーのCSSサンプル。 CSSで次のように美しくスタイルされたCSSサンプルが公開されています。 カレンダーのデザインって微妙に難しいのですが、このデザインはシンプルだけど綺麗にまとまっていて美しいですね。 カレンダー部分のデザインの参考にできそう。 あと、こちらのサイトでは、いろんなサイトのデザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Most used CSS tricks | StylizedWeb.com
CSS Spriteを活用しよう - DesignWalker
SitePoint CSS Reference
pen-and-paper.de
CSSMENUMAKER.COM