まずは、歴史をみてみよう。 初期 * { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など... 続きを読む

• yomotsu.net
• テクノロジー

しかし、英語の場合は小文字のgやy、j等、このベースラインから下にはみ出すものがあります。通常、文字を打ちこんだ場合このベースラインはデフォルトスタイルシートでvertical-align:baselineに設定されています。つまり何も考えなくても常にテキストの下には... 続きを読む

• webcre8.jp
• テクノロジー

2013-01-18 妻のパン屋のWebサイトを四苦HackしてIE対応した話 Coupe Baguette デザイン はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したI... 続きを読む

• blog.jnito.com
• テクノロジー

こんにちは！こうめ(@Bamboo_C)です。 おまたせしました！以前書いた「 一番強いCSSプロパティ決めようぜ 」という記事の集計結果が出ましたので、早速擬人化したプロパティ達をご覧くださいませ！まずは第五位からです。 設定も考えてみたので合わせてお楽しみ... 続きを読む

• webamb.com
• テクノロジー

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学... 続きを読む

• coliss.com
• テクノロジー

この記事は Mozilla Japan 翻訳部門もしくはその関連グループによりすでに翻訳済みの文書を移行したものです。 移行元の文書。英語版と内容が異なる場合や、MDC の他の記事と整合性のとれていない場合があります。 以下の文書では Mozilla の UI で使用する CSS... 続きを読む

• developer.mozilla.org
• テクノロジー

GitHubのCSSのパフォーマンス改善について、2012年ホノルルで行われた「CSS Dev Conference」のスライドが公開されていたので、紹介します。 続きを読む

• coliss.com
• テクノロジー

続きを読む

• qiita.com

float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り... 続きを読む

• www.koikikukan.com
• テクノロジー

In order to keep from getting too confused, I'm going to start over and present a complete exploration for what's happening with lists in general,and then in IE5/Mac and Netscape 6.1. I think there will be less chance for misunderstanding tha... 続きを読む

• meyerweb.com
• テクノロジー

検索ヘルプ tag:タグ名 タグで絞り込んで検索 user:ユーザーID ユーザーIDで絞り込んで検索 tag:とuser:の併用可能。 tag:およびuser:に設定できる項目は1件のみになります。 続きを読む

• qiita.com
• テクノロジー

CSS地獄の火の中に投げ込むものである。いや、まあそんなネタはどうでも良くて...そのベンダー接頭辞はいつまで書くの？ | Unformed Building書いてあることは至極真っ当なこと。もろ手をあげて賛成である。また、ベンダー拡張プリフィックスはそれそのものがWe... 続きを読む

• d:id:teramako
• テクノロジー

みなさん、2012年のゴールデンウィークは、いかがお過ごしでしょうか！ 中には映画を観に行ったりしている人もいるかと思うのですが、タイタンの逆襲なんかを例にとってみても、最近は「3D/2D 同時公開」の流れがあるみたいですね。 というわけで、このブログも... 続きを読む

• june29.jp
• テクノロジー

A set of list scroll effects applied via CSS.Silly list scroll effects. Tested in WebKit/FF Nightly. In the mood for more CSS? Here you go. 続きを読む

• lab.hakim.se
• テクノロジー

くらげごはん。 - くだくらげの食と料理の記憶をつづる →いままでのごはんを見る 続きを読む

• kurage.hatenablog.com
• テクノロジー

View I was cleaning the keyboard by clicking here. We've also emailed the link to the address you specified, so you won't lose it! 続きを読む

• gumroad.com
• テクノロジー

Statistics Favorites 0 Downloads 0 Comments 0 Embed Views 0 Views on SlideShare 0 Total Views 0 Twitter bootstrap intro — Presentation Transcript 朝から晩までサービス開発してるお前に贈るTwitter Bootstrap 入門 ダエ サン いジ   ニ ア  は お... 続きを読む

• www.slideshare.net
• テクノロジー

CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開 CSSはこれまで変数が使えなかったため、例えばページ内の複数箇所を同じ色で揃えようとしたときには、同じカラーコードをCSSの複数箇所に書き込む必要があり、色に変更があるたび... 続きを読む

• www.publickey1.jp
• テクノロジー

純 CSS3 繪製 K-ON! 秋山澪。 可支援 Firefox、Chrome、Opera、Safari Copyright 2011 © by Rei, My Google+. [注意!!] 因為我無意間發現，有人把這作品拿來當瀏覽器的支援判定，為了避免自己成為第二個哆啦A夢，所以要特別澄清一下。 這作品一開始完成時，小 R... 続きを読む

• rei.idv.tw
• テクノロジー

基礎以上ベスト・プラクティス未満。 CSSハックのことは忘れる CSSハックの多くは便利で強力なものだが、それに頼るのは危険だ。まずは普通にCSSを書くことに注力するべきだろう。その上で条件付きコメントやModernizrを使うかCSSハックをあえて使うか決めると... 続きを読む

• hail2u.github.com
• テクノロジー

vim | 23:18マカーもどきになってから、Vimの起動が突然重くなりました。限界突破したので、調べてみました結論原因は導入したcss.vimcss.vim(http://vim.sourceforge.net/scripts/script.php?script_id=2150) プラグイン別起動時間の調べ方起動時に、オプショ... 続きを読む

• sea-mountain.hatenablo...
• テクノロジー

NEWS（11/05/11　14:30） “Gecko”ベースのHTML5/CSS3対応HTMLエディター「BlueGriffon」v1.0が公開 Mozillaプロジェクトからスピンオフした「Nvu」「KompoZer」などの後継 Tweet Check 「BlueGriffon」v1.0 BlueGriffon.orgは10日、WYSIWYG編集が可能なオープ... 続きを読む

• www.forest.impress.co.jp
• テクノロジー

CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。デモページhttp://ndruger.l... 続きを読む

• d:id:ndruger
• テクノロジー

HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエン... 続きを読む

• el.jibun.atmarkit.co.jp
• テクノロジー

<div class='qb'> <div class="eye"><div class="highlight"></div><div class="kurome"></div></div> <div class="eye"><div class="highlight"></div><div class="kurome"></div></div> <div class="eye"><div class="highlight"></div><div class="kurome"><... 続きを読む

• jsdo.it
• テクノロジー

主に海外の解析部隊の人達によって、まどか☆マギカの作中で使われてるルーン文字が解析されつつあるみたいです。ご丁寧にもTrueTypeフォントがダウンロード出来るようになってたので、早速はてダで使ってみます。 まずMadokaRunes.ttfだけど、件のサイトへの直... 続きを読む

• d:id:y-kawaz
• テクノロジー

Login You can register to create an account and edit the pages of the Wiki. User : Pass : HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. Usage First download HSS and put it in some place wh... 続きを読む

• ncannasse.fr
• テクノロジー

<script type="text/javascript" src="http://jsdo.it/blogparts/5ODm/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kyo_ago/5ODm" title="hover時にもっ... 続きを読む

• jsdo.it
• テクノロジー

<ul class="cute-list"> <li><a href="#"><span class="off">About us</span><span class="on">♥</span></a></li> <li><a href="#"><span class="off">Contact & feed back</span><span class="on">☎</span></a></a></li> <li><a href="#"><span class="off">... 続きを読む

• jsdo.it
• テクノロジー

マウスを動かすと色が変化します。 cssだけでつくってます。 IEでも動く（はず）！ フォトギャラリーとかに使えなくもない。 calmbooks forked:2favorite:6lines:0/27/65license: MIT License modified:2011-02-04 22:46:31 pv : 317 <ul> <li class="a1"></li>... 続きを読む

• jsdo.it
• テクノロジー

CSS3大接近 第1回　text-shadow実践テクニック 2008年12月17日 菊池崇 CSS, text-shadow, Webサイト制作, Webデザイン 1 2 CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。 今回は，CSS3なので... 続きを読む

• gihyo.jp
• テクノロジー

text-shadowを匠に使って、文字に立体感を付けるサンプル。 サンプルはtextareaになっているので 文字入力ができます。 入力中の文字も立体になるのが分かります。 ※Firefox, WebKit系、Operaで見れます。 どこで見つけたか忘れたんですが、面白かったのでコー... 続きを読む

• jsdo.it
• テクノロジー

VimでCSSを書いていると、最近のCSS3プロパティでもやもやした感じになるのはまぁしょうがないかな…と見ないふりをしていた。が、@mediaでブロックを作った時に最初のセレクタのハイライトに失敗するのとかにムキーとなって、もうこれは駄目だと思ったので、既... 続きを読む

• hail2u.net
• テクノロジー

なんとなくブログの見た目を少しいじった(テスト前になると部屋を片付けたくなるアレ)。シングルカラムだと横に間延びするのは前から気になってたので、max-widthを1000pxで設定して、あとフッターをシンプルに。で、はてなスターってデフォルトだとマウスを乗... 続きを読む

• os0x.hatenablog.com
• テクノロジー

= Use Vim as syntax-highlighting filter for AsciiDoc :Date: 2010-11-03T20:12:10+09:00 :Keywords: asciidoc vim http://www.methods.co.nz/asciidoc/[AsciiDoc] documents can be converted into various formats, especially HTML family. And it's possi... 続きを読む

• whileimautomaton.net
• テクノロジー

Revisions a211ef kana Tue Nov 02 20:44:58 -0700 2010 834502 kana Tue Nov 02 20:23:43 -0700 2010 d3dbc3 Tue Nov 02 20:21:51 -0700 2010 Private Gist All pages are served over SSL and all pushing and pulling is done over SSH. No one may fork, cl... 続きを読む

• gist.github.com
• テクノロジー

2010/10/28 gist を blog に embed する時の見た目や色（CSS） を変える blog に gist を貼り付けることが多いです。見た目を変えたいなぁと思っていたのでやってみました。 参考にしたのはこちら。 ダイアリーに貼り付けるgistのコードの見た目をカスタマイズ... 続きを読む

• valvallow.blogspot.com
• テクノロジー

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84... 続きを読む

• gist.github.com
• おもしろ

Lately, I’ve been intermitently working on the gtk-style-context branch, which is meant to supersede GtkStyle and get rid of all its limitations in creating contemporary UIs, to name a few: Cairo as a first class citizen: This means elements... 続きを読む

• blogs.gnome.org
• テクノロジー

close HTTP/1.1 206 Partial Content Content-Length: 613 Content-Range: bytes 0-612/613 Content-Type: text/html; charset=UTF-8 Server: Apache/2.2.3 (Red Hat) X-Backend-Server: pm-dekiwiki03 Date: Sat, 02 Oct 2010 13:29:58 GMT Keep-Alive: timeou... 続きを読む

• developer.mozilla.org
• テクノロジー

To make Ajax calls possible there are two back-end views written. /ajax_json_echo/ for JSON and /ajax_html_echo/ for HTML. They both wait 2 seconds before answering to simulate web latency. HTML one may contain the JavaScript. To use them jus... 続きを読む

• jsfiddle.net
• テクノロジー

続・ハイパフォーマンスWebサイトを呼んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探... 続きを読む

• webtech-walker.com
• テクノロジー

http://twitter.com/tacamy/status/12859745917 ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 word-wrap: break-word; IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。... 続きを読む

• webtech-walker.com
• テクノロジー

『8 Ways to Increase the Readibility and Beautify your HTML Code (HTMLコードを読みやすく美しくする8つの方法) 』 という記事があったので、紹介します。 HTMLとCSS,Javascriptを分離する これのHTMLとCSSの分離は必要不可欠です。HTMLでインラインCSSを使... 続きを読む

• www.authority-site.com
• テクノロジー

はてなダイアリーに検索経由でいくと検索語がハイライトされてるんですけど、たまにハイライトの色と文字色が近すぎてほとんど文字が見えなかったりして結構うざいのでUserStyle書いた。 このくらい探せばありそうな気がしたけどちょっと探したけどなかったから... 続きを読む

• webtech-walker.com
• テクノロジー

という記事がその昔 Ajaxian に挙がっていたので自分のメモとして残っていたモノを、そろそろ時期が来たかと言うことでこちらに再掲。http://ajaxian.com/archives/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant子セレクタ（... 続きを読む

• d:id:oogatta
• テクノロジー

Firefox 3 になってから、画像を CSS などで拡大したとき、バイリニア補間がかかるようになってしまった。補間=きれいというのは成り立たないし、ドット絵を載せてるサイトでは大打撃であるという。が、CSS にはそれに関する規定がないので、まぁ悪くいってもし... 続きを読む

• d:id:DOSEI
• テクノロジー

リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利... 続きを読む

• hail2u.net
• テクノロジー

2008年8月24日 CSS で複数の class を指定する Blog.okuryu : CSS で複数のクラスを指定する方法 によると、 class 属性値をスペースで区切って指定すると複数のクラスの CSS が適用される。 例えば、テーブルの「枠や背景色」を装飾したい場合に、CSS で「枠の... 続きを読む

• jutememo.blogspot.com
• テクノロジー

続きを読む

• antimatter15.com
• テクノロジー