CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here a
YAML CSS Framework — for truly flexible, accessible and responsive websites
A modular CSS framework for truly flexible, accessible and responsive websites Features Bulletproof flexible grid system Flexible forms toolkit with theme-support Focussed on web standards & accessibility Optimized typography for all standard elements Matched building blocks for rapid prototyping Namespacing avoids conflicts with third-party CSS Well prepared for HTML5 and CSS3 Very slim framework
Blueprint: A CSS Framework | Spend your time innovating, not replicating
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. What does Blueprint have to offer? A CSS reset that eliminates the discrepancies across browsers. A solid grid that can support the most complex of layouts.
inuit.css—cooler than a polar bear’s toenails…
Another CSS framework?! Yup, ’fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file. inuit.css keywords Progressive Flexible Mobile Tablet Sensible Extensible Accessible Pragmatic Functional Useful Production-ready More What does it do? Mobile & tablet… inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such
画面下部にフッター表示-CSS TIPS
動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、ス
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
HTMLタグ/リストタグ/開始番号を変更する - TAG index
上記の属性は、HTML 4.01では非推奨とされています。（Strict DTDでは使用できません） 非推奨要素と非推奨属性 次のように、type属性と併せて使用することもできます。 <ol type="A" start="5"> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ol> 使用例 開始番号を5にした例 <ol start="5"> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ol> 表示例 リスト項目1 リスト項目2 リスト項目3 type属性と併せて使用した例 <ol type="A" start="5"> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ol> 表示例 リスト項目1 リスト項目2 リスト項目3
『ol li の番号リストがIEで表示されないCSSバグ』
ol liとcssを指定したのに なぜかＩＥだけで番号リストが表示されない。。。 ハマリマシタ・・・・ FFでもoperaでもsafariでも表示されてるのに、なぜかIEだけ・・・ 元々 <div class="content-body"> <h4>test</h4> <ol> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> </ol> </div> に対して .content-body ol{ width:555px; height:100%; line-height:1.6; float:left; clear:both; margin:5px 0 5px 1px; padding:3px 0 3px 19px; text-align:left; list-style:outside; list-style-typ
ol li の番号リストがIEで表示されないCSSバグ
ol liとcssを指定したのに なぜかＩＥだけで番号リストが表示されない。。。 以前もliで悩まされた記憶があるんだけど～。 ググってみると苦しまれた方が多いようで 解決策として * { zoom: 1; } と指定して、かつ ul, ol, li { zoom: normal; } としてあげると即解決！！となるそうです。 zoom: 1;なんての、初めて知った。 でもあたしの直らないんですがっ＿|￣|○ 誰かタスケテ～～！！ 必死に答えを探しては試す、を繰り返す。。。 そして見事に解決！ それは、li要素にwidthを指定しないこと。 liをくくってるdivにwidth指定していたので それを消すと、解決した =3=3=3=3 でも、なんでダメなんだ～？？ も～っ 人騒がせなＩＥめっ
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
スタイルシートをめぐる冒険
HTML5対応版clearfix（予告） » 最近、あるサイトのソースをXHTML1.0からHTML5に書き換えていて、私家版clearfixに不具合があることを発見した。近... [read more] clearfixの決定版を作る －Mac IE編－ » 前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがな... [read more] clearfixの決定版を作る －IE編－ » 今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか... [read more] inline-blockの奇妙な世界 » inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」
Inset Border Effect
Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco
1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Marketing & SEO A Better Google Analytics AlternativeOur recent migration to GA4 left a lot to be desired and led us to explore for better google analytics alternatives. We tried just about everything out there, including Plausible, Fathom, and several others, all with their own pros and cons. The biggest hurdles were: limited features and higher costs.… CSS offers an array of tools that, when use
Speech Bubbles With CSS
Speech Bubbles With 100% CSS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
30+ CSS Tutorials for Beginners
Today’s article gathers 30+ CSS tutorials for beginners that will teach you some neat CSS tricks to improve your design skills. If you want to learn how to create 3D button styles, social link buttons, progress buttons, navigation menus, 3d typography, menus, and more, these CSS tutorials for beginners are just what you were looking for. Are you new to CSS? The initial process of learning this nif
Design Snack / The web design showcase that you control.
Get awesome stuff delivered straight to your inbox! Twice a month! Plus a list of tools and plugins we use.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Leaverou | Latest Social Media Marketing Trends
IDEA * IDEA
HTML+CSS templating
http://www.designwalker.com/2010/06/html5-template.html
