Web Designers' Browser Support Checklist, Web Designers' Browser Support ChecklistSkip to Main Content (access key: s) Skip to Primary Navigation (access key: n) Skip to Secondary Navigation (access key: b) View Accessibility Statement (acces... 続きを読む

• www.findmebyip.com
• コンピュータ・IT

Bootstrap、Hogan.js、Finagleなど 注目のTwitter系オープンソース Twitter Tokyo Open Houseまとめレポート 山本裕介 2012/5/15 「Twitter Open House」はTwitter社のエンジニアと直接情報交換ができるオフラインイベントで、すでにサンフランシスコの本社では... 続きを読む

• www.atmarkit.co.jp
• コンピュータ・IT

Twitter Bootstrap、流行ってますねー。 Twitter Bootstrapとは、自分であんまりデザインをやりたくない人はこれを使えば、とりあえずレイアウトやボタンを整えてくれるっていう便利ツール。簡単にTwitterみたいなデザインを導入することが出来てしまいます。我... 続きを読む

• kuroigamen.com
• コンピュータ・IT

D89クリップ（41）　Webデザインに役立つイベント 【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン ひらいさだあき 2012/3/29 LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカス... 続きを読む

• www.atmarkit.co.jp
• コンピュータ・IT

The jQuery UI CSS Framework jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI T... 続きを読む

• jqueryui.com
• コンピュータ・IT

Yet Another Multicolumn Layout - continuously developed since 2005 続きを読む

• www.yaml.de
• コンピュータ・IT

例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんでき... 続きを読む

• yusukebe.com
• コンピュータ・IT

A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter'... 続きを読む

• addyosmani.github.com
• コンピュータ・IT

Example body text Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel au... 続きを読む

• stylebootstrap.info
• コンピュータ・IT

この解説ページ群の目次urlトップ(このページです)http://d.hatena.ne.jp/end0tknr/20111016/1318729659入手と設置(install)http://d.hatena.ne.jp/end0tknr/20111016/1318730072グリッドシステムhttp://d.hatena.ne.jp/end0tknr/20111016/1318731266(固定/可変... 続きを読む

• d:id:end0tknr
• コンピュータ・IT

Source at http://github.com/jpablobr/css2sass This simple site is created by Jose Pablo Barrantes @ http://jpablobr.com && heavily inspired by html2haml 続きを読む

• css2sass.heroku.com
• コンピュータ・IT

Набор плагинов для сверхскоростной HTML и CSS вёрстки.Описание возможностейРелиз ветки 1.х Концепт ветки 2.х Возможности Zen HTML, ветка 1.х, скринкаст Возможности Zen CSS, ветка 1.х, скринкаст Возможности Aptana Zen HTML, ветка 2.х, скринкас... 続きを読む

• code.google.com
• コンピュータ・IT

ページをめくるエフェクトのまとめ「5 Extremely Simple Ways To Add Page Curl To Your Website」 ページの右端がめくれかかっていて、マウスオーバーするとページに隠されていたメッセージなり、コンテンツが出てくる手法がたまに見かけますが、今日はそうい... 続きを読む

• design-develop.net
• コンピュータ・IT

There are thousands of sites out there offering tips and tricks for using CSS. But how do you know where that information is coming from? Who says the people writing these “tips” know what they’re talking about? For all you know, it could ... 続きを読む

• www.noupe.com
• コンピュータ・IT

EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで... 続きを読む

• phpspot.org
• コンピュータ・IT

Now days CSS Galleries are great for improving your website’s traffic and pagerank. Getting a site featured in some of the popular galleries can bring thousands of visitors and many valuable inbound links with excellent SEO benefits. These g... 続きを読む

• www.instantshift.com
• コンピュータ・IT

現在「実践Web Standards Design」を読破中。アマゾンでもやたら評価が高かったので気になっていたのですが、改訂版が出るというので待っていたのでした。先日無事に改訂版を購入、一気に読み込んでいます。 ↑ やっと手に入れたぞ、と。 まだ途中ではあります... 続きを読む

• www.ideaxidea.com
• コンピュータ・IT

ボクたちみたいな、Web業界の人間やそういうのに興味ある人でも無ければ、訪れたサイトのソースなんて誰も見ないよね。 そんな感じだから、蔑ろにされやすいし、扱いも低かったりする。 そりゃそーだ。 ボクだって、今の仕事してなかったらサイトのソースなんて... 続きを読む

• css-happylife.com
• 生活・人生

Liquid & Color Adjustable CSS Buttons - CSS/XHTML/Photoshop Tutorial When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop.CSSで色指定が可能な立体的でクールなボタン実装サンプル。 次の... 続きを読む

• phpspot.org
• コンピュータ・IT

Posted at 2006-08-23T02:24:00+09:00 in Web Design all about blosxomのサイトを作った時にハマった、:first-letter絡みのInternet Explorer 6のバグにまたハマった(学習していない)のでまとめておいてみる。そのバグは、display: block;としたa要素に対して:... 続きを読む

• hail2u.net
• コンピュータ・IT

的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回の... 続きを読む

• css-happylife.com
• コンピュータ・IT

XHTMLからスタイルシートの枠組みを作ってくれる『CSS Frame Generator』 April 8, 2008 11:40 PM written by Gen Taguchi こいつはちょっと便利かも。サイトを作るときにおもむろにXHTMLから書き始める人も多いかと思いますが、そうして出来上がったXHTMLから... 続きを読む

• www.ideaxidea.com
• コンピュータ・IT

CSS周りのツールを使ってみたい。 そんなあなたにおすすめなのが、『14 CSS Tools to Save you Time』。時間を節約してくれるCSSツール14選だ。 以下にいくつかご紹介。 » CSS Optimizer CSSのファイルサイズを減らしてくれる。 » Em Calculator pxのフォントサ... 続きを読む

• blog.creamu.com
• コンピュータ・IT

cssCSS の話をする時に名前をはっきりさせてないと混乱するので、整理しておこう。自分用です。けっこう適当です。 仕様ここの仕様を見て書いています。CSS3 module: SyntaxCSS日本語では「スィーエスエス」と言いますね。CSS とはHTML, XML の要素をどのように... 続きを読む

• d:id:amachang
• コンピュータ・IT

Emma Alvarez Siteのエントリー「50のよく使うCSSのTipsとツール」から、CSSのテクニックをいくつか紹介します。 Most Useful 50 CSS Tips And Tools For Webmasters 続きを読む

• coliss.com
• コンピュータ・IT

自己紹介 中村享介 株式会社ロクナナ/ディレクター 月刊『web creators』 すぐに使えるCSSデザインテクニック 連載中 mixiコミュニティ 【優雅な】Web制作者の会 管理人 続きを読む

• kyosuke.jp
• コンピュータ・IT

これは面白すごい。 なかなかさわり心地の良い動き。 しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。 まずは以下のサンプルを触ってみると感動しますよ！（たぶん） サンプルデモは以下に ... 続きを読む

• e0166.blog89.fc2.com
• コンピュータ・IT

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザ... 続きを読む

• blog.creamu.com
• コンピュータ・IT

woork: CSS Message Box collection Message boxes are useful elements to display status messages after or during a specific user request.CSSでデザインされたツールチップボックスいろいろサンプルがダウンロード可能になっています。 どのツールチップ... 続きを読む

• phpspot.org
• コンピュータ・IT

Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実― この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめて... 続きを読む

• artifact-jp.com
• コンピュータ・IT

2008年3月12日 水曜日 たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。 今のところ、 Firefox 1, 2 Netscape 6, 7.1 Safari 2, 3 Opera 9.2 IE 5.01, 5.5, 6,... 続きを読む

• www.yomotsu.net
• コンピュータ・IT

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ ... 続きを読む

• css-happylife.com
• コンピュータ・IT

よく使われているCSSハック12選（＋おまけ） March 14, 2008 9:32 AM written by Gen Taguchi 先日の「知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA」とかぶるところも多いですが、いつか使いたいという意味でメモ的にエントリー。「Most used CSS ... 続きを読む

• www.ideaxidea.com
• コンピュータ・IT

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装... 続きを読む

• coliss.com
• コンピュータ・IT

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。 なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコン... 続きを読む

• standards.mitsue.co.jp
• コンピュータ・IT

Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。 CSS箇所 #column-1{ position:relative; float:left; width:500px; /* remember to set a width */ } .overlay{ position:abs... 続きを読む

• coliss.com
• コンピュータ・IT

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリスト... 続きを読む

• coliss.com
• コンピュータ・IT

時間が無いのでご紹介だけ。 見本コードが掲載されていますので、興味のある方はご自身でお試しください。 以下エントリで。 5 USEFULL CSS TRICKS | Loon Design 次のエントリー 女性イラストのベクター画像のダウンロード 前のエントリー 影を使った優秀な10... 続きを読む

• gura5.blog120.fc2.com
• コンピュータ・IT

テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』 美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだ... 続きを読む

• blog.creamu.com
• コンピュータ・IT

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Candidate Recommendation 19 July 2007 This version: http://www.w3.org/TR/2007/CR-CSS21-20070719 Latest ver... 続きを読む

• www.w3.org
• コンピュータ・IT

tableレイアウトをやってた人も計算してからコーディングしてたと思います。CSSのfloatを使用したレイアウトにしても、floatの挙動を正確に覚えれば、緻密な構成が可能になります。以下は私が覚えたときのフロートレイアウトの考え方のまとめです。 A.フロート... 続きを読む

• www.techdego.com
• コンピュータ・IT

floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、 どうしたら実現できるのでしょう。 例えば、左側を可変で右側を200pxとした場合、左側の width に100% - 200px と指定できれば問題ないのですが このような指定... 続きを読む

• www.bnote.net
• コンピュータ・IT

floatを使った段組では、各カラムのwidthの合計がコンテナの幅を超えないことが「カラム落ち」しないことの条件だと思われがちですが、 仕様にはそのような規定はありません。重要なのはマージン辺（外辺）です。 floatによる段組は「ボックスの回りこみ」なん... 続きを読む

• mb.blog7.fc2.com
• コンピュータ・IT

効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineに... 続きを読む

• blog.creamu.com
• コンピュータ・IT

このページは、Position is Everthing(www.positioniseverything.net) で公開されているHow To Clear Floats Without Structural Markup を Kuro が和訳したものです。このページの文書・画像・マルチメディアの著作権はすべて、元サイトにあります。翻訳は、We... 続きを読む

• www.kuroduction.com
• コンピュータ・IT

2xup.orgのCSS でよく使う装飾定義をコンポーネントとしてまとめるという記事を読んだのですが、挙げられているHTMLの例を見てみて、「いやいやその方向性は無しでしょう」と思ったのでした。何故かといえば、 リストをインラインで表示するために <ul class="i... 続きを読む

• www.akatsukinishisu.net
• コンピュータ・IT

2008/5/22追記：このエントリは情報が不十分だったり間違いが含まれてたりするので、こちらを参照してください↓http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htmCSS3あたりをXPath1.0あたりに変換する表CSSXPath.class/... 続きを読む

• d:id:nazoking
• コンピュータ・IT

最近はユーザビリティの観点から文字サイズを可変にすることが推奨されています。 しかし、ブラウザによって文字サイズの表示が異なるのでデザインに差異がでます。 このあたりをどうにかクリアできないものか検証しました。 これを逆に利用して、デザイン崩れ... 続きを読む

• www.coolwebwindow.com
• コンピュータ・IT

画像のロールオーバーはJavaScriptやCSSを使えば実現できますが、そのやり方は色々あると思います。その中で、僕がよく使う方法を3つご紹介します。 1. text-indentでぶっ飛ばす text-indentでリンクテキストをぶっ飛ばし、a:hoverで背景画像をずらすことでロー... 続きを読む

• jyoraku.com
• コンピュータ・IT

2007年にCSSやWeb標準に関するどんなテクニックや議論があったのかを書き出しておくのも一興かなと思いまとめてみると大変なことになってしまいました。筆者より一言CSSな人たちは「懐かしいなー」と振り返ってもらえればいいですし、今年こそCSSやるぞ！と思っ... 続きを読む

• d:id:aratako0
• コンピュータ・IT