https://b.hatena.ne.jp/voidy21/css/ cssに関するvoidy21のはてなブックマーク (61) http://bootflat.github.io/documentation.html voidy21 2017-01-20T04:16:13Z css <blockquote cite="http://bootflat.github.io/documentation.html" title="Documentation - Bootflat"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fbootflat.github.io%2Fdocumentation.html" alt="" /> <a href="http://bootflat.github.io/documentation.html">Documentation - Bootflat</a></cite><p><a href="http://bootflat.github.io/documentation.html"><img src="" alt="Documentation - Bootflat" title="Documentation - Bootflat" class="entry-image" /></a></p><p>Bootflat offers over a dozen reusable components, which can be combined with each other.</p><p><a href="https://b.hatena.ne.jp/entry/bootflat.github.io/documentation.html"><img src="https://b.hatena.ne.jp/entry/image/http://bootflat.github.io/documentation.html" alt="はてなブックマーク - Documentation - Bootflat" title="はてなブックマーク - Documentation - Bootflat" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/bootflat.github.io/documentation.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 45 https://www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310 voidy21 2013-08-18T07:53:20Z css <blockquote cite="https://www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310" title="ちゃんとCSSを書くために - CSS/Sass設計の話"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fa-good-css-and-sass-architecture%2F23386310" alt="" /> <a href="https://www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310">ちゃんとCSSを書くために - CSS/Sass設計の話</a></cite><p><a href="https://www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5997b3500980be9a1079d0ba11b3fffe3371ed55/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fagoodcssandsassarchitecture-130624020651-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds" alt="ちゃんとCSSを書くために - CSS/Sass設計の話" title="ちゃんとCSSを書くために - CSS/Sass設計の話" class="entry-image" /></a></p><p>TalkNote Vol.8 発表スライド 2013/06/30 追記: 本スライドで紹介しているSMACSS日本語訳（電子書籍）が発売されたので、興味のある方はご覧ください。 SMACSS https://smacss.com/</p><p><a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310"><img src="https://b.hatena.ne.jp/entry/image/https://www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310" alt="はてなブックマーク - ちゃんとCSSを書くために - CSS/Sass設計の話" title="はてなブックマーク - ちゃんとCSSを書くために - CSS/Sass設計の話" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/a-good-css-and-sass-architecture/23386310"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 469 https://www.oddbird.net/susy/ voidy21 2013-06-18T01:16:15Z css <blockquote cite="https://www.oddbird.net/susy/" title="Susy: Responsive grids for Compass"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.oddbird.net%2Fsusy%2F" alt="" /> <a href="https://www.oddbird.net/susy/">Susy: Responsive grids for Compass</a></cite><p><a href="https://www.oddbird.net/susy/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c0056d5bfef3bcc97bf2c4ea34f2d009e7b304a7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.oddbird.net%2Fassets%2Fimages%2Fblog%2Foddsite-960w.jpeg" alt="Susy: Responsive grids for Compass" title="Susy: Responsive grids for Compass" class="entry-image" /></a></p><p>Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for det...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.oddbird.net/susy/"><img src="https://b.hatena.ne.jp/entry/image/https://www.oddbird.net/susy/" alt="はてなブックマーク - Susy: Responsive grids for Compass" title="はてなブックマーク - Susy: Responsive grids for Compass" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.oddbird.net/susy/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 107 https://w88govn.com/ voidy21 2013-06-18T01:15:49Z css <blockquote cite="https://w88govn.com/" title="W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fw88govn.com%2F" alt="" /> <a href="https://w88govn.com/">W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026</a></cite><p><a href="https://w88govn.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8c7574fc4845fcfbd9583e01aff69b36ec57c34d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fw88govn.com%2Fwp-content%2Fuploads%2F2025%2F12%2Fimage.jpeg" alt="W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026" title="W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026" class="entry-image" /></a></p><p>🎁 Ưu đãi đặc biệt: Tặng ngay 200K miễn phí để trải nghiệm cá cược cho đăng ký mới trong tháng này. Vui lòng điền đúng số điện thoại khi đăng ký để được hỗ trợ nhận thưởng nhanh chóng. ⚠️ Cảnh báo: Hiện nay có nhiều trang web giả mạo nhà cái W88. Để đảm bảo an toàn, người chơi nên truy cập đúng li...</p><p><a href="https://b.hatena.ne.jp/entry/s/w88govn.com/"><img src="https://b.hatena.ne.jp/entry/image/https://w88govn.com/" alt="はてなブックマーク - W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026" title="はてなブックマーク - W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/w88govn.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 306 https://hail2u.net/documents/learn-you-a-flexbox-for-great-good voidy21 2012-02-18T06:51:58Z css <blockquote cite="https://hail2u.net/documents/learn-you-a-flexbox-for-great-good" title="Flexbox、おもしろいですよ？"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhail2u.net%2Fdocuments%2Flearn-you-a-flexbox-for-great-good" alt="" /> <a href="https://hail2u.net/documents/learn-you-a-flexbox-for-great-good">Flexbox、おもしろいですよ？</a></cite><p><a href="https://hail2u.net/documents/learn-you-a-flexbox-for-great-good"><img src="" alt="Flexbox、おもしろいですよ？" title="Flexbox、おもしろいですよ？" class="entry-image" /></a></p><p>Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？　多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたこと...</p><p><a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/learn-you-a-flexbox-for-great-good"><img src="https://b.hatena.ne.jp/entry/image/https://hail2u.net/documents/learn-you-a-flexbox-for-great-good" alt="はてなブックマーク - Flexbox、おもしろいですよ？" title="はてなブックマーク - Flexbox、おもしろいですよ？" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/learn-you-a-flexbox-for-great-good"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 67 http://subtech.g.hatena.ne.jp/h2u/20110507/1304773624 voidy21 2011-05-07T15:26:18Z css <blockquote cite="http://subtech.g.hatena.ne.jp/h2u/20110507/1304773624" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fsubtech.g.hatena.ne.jp%2Fh2u%2F20110507%2F1304773624" alt="" /> <a href="http://subtech.g.hatena.ne.jp/h2u/20110507/1304773624">はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知</a></cite><p><a href="http://subtech.g.hatena.ne.jp/h2u/20110507/1304773624"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6e60b1efb974203c94d41c7729a087dc4741802f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F26006613547248301%2F26006613547294880%2F1709195433" alt="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" class="entry-image" /></a></p><p>はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認くださ...</p><p><a href="https://b.hatena.ne.jp/entry/subtech.g.hatena.ne.jp/h2u/20110507/1304773624"><img src="https://b.hatena.ne.jp/entry/image/http://subtech.g.hatena.ne.jp/h2u/20110507/1304773624" alt="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/subtech.g.hatena.ne.jp/h2u/20110507/1304773624"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://ndruger.hatenadiary.org/entry/20110428/1304021590 voidy21 2011-05-02T04:28:56Z html css <blockquote cite="https://ndruger.hatenadiary.org/entry/20110428/1304021590" title="javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fndruger.hatenadiary.org%2Fentry%2F20110428%2F1304021590" alt="" /> <a href="https://ndruger.hatenadiary.org/entry/20110428/1304021590">javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？</a></cite><p><a href="https://ndruger.hatenadiary.org/entry/20110428/1304021590"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/114dfd01c65af8bbbea26bb844e18d03a07287df/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127099221667%2F17680117127099223077%2F1556689236" alt="javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？" title="javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？" class="entry-image" /></a></p><p>CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chr...</p><p><a href="https://b.hatena.ne.jp/entry/s/ndruger.hatenadiary.org/entry/20110428/1304021590"><img src="https://b.hatena.ne.jp/entry/image/https://ndruger.hatenadiary.org/entry/20110428/1304021590" alt="はてなブックマーク - javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？" title="はてなブックマーク - javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ndruger.hatenadiary.org/entry/20110428/1304021590"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 86 https://github.com/hokaccha/vim-css3-syntax voidy21 2011-04-24T02:57:15Z vim css <blockquote cite="https://github.com/hokaccha/vim-css3-syntax" title="GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fhokaccha%2Fvim-css3-syntax" alt="" /> <a href="https://github.com/hokaccha/vim-css3-syntax">GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`.</a></cite><p><a href="https://github.com/hokaccha/vim-css3-syntax"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c735117af5ef519ef0a0121fa00236ea69a027e9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F8201133eb486bfc545f70174152777d533be121a04d4e1d926006e78e3f39e17%2Fhokaccha%2Fvim-css3-syntax" alt="GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`." title="GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`." class="entry-image" /></a></p><p>You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/hokaccha/vim-css3-syntax"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/hokaccha/vim-css3-syntax" alt="はてなブックマーク - GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`." title="はてなブックマーク - GitHub - hokaccha/vim-css3-syntax: Add CSS3 syntax support to vim&#39;s built-in `syntax/css.vim`." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/hokaccha/vim-css3-syntax"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 3 http://jsdo.it/sonji07/zdTL voidy21 2011-03-08T14:01:23Z css <blockquote cite="http://jsdo.it/sonji07/zdTL" title="CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fjsdo.it%2Fsonji07%2FzdTL" alt="" /> <a href="http://jsdo.it/sonji07/zdTL">CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS</a></cite><p><a href="http://jsdo.it/sonji07/zdTL"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b5aa6e17984b15666ab0dc6afa890b83e0bf658a/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2Fz%2Fd%2FT%2FzdTL.jpg%3Ft%3D1299401475" alt="CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS" title="CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS" class="entry-image" /></a></p><p>CSSアニメーションの練習に作ってみた chromeのみ動作確認 /*参考*/ 笑い男 SVG : http://d.hatena.ne.jp/fls/20061023/p1 /*修正*/ before,after要素を導入 &lt;div id=&quot;Laughing_man&quot;&gt; &lt;div class=&quot;out-frame&quot;&gt; &lt;div class=&quot;in-frame&quot;&gt; &lt;div class=&quot;hat&quot;&gt; &lt;div class=&quot;eye eye-left&quot;&gt;&lt;/div&gt; &lt;div class=&quot;eye eye-right&quot;&gt;&lt;...</p><p><a href="https://b.hatena.ne.jp/entry/jsdo.it/sonji07/zdTL"><img src="https://b.hatena.ne.jp/entry/image/http://jsdo.it/sonji07/zdTL" alt="はてなブックマーク - CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS" title="はてなブックマーク - CSS3で笑い男 - jsdo.it - Share JavaScript, HTML5 and CSS" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/jsdo.it/sonji07/zdTL"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 54 https://y-kawaz.hatenadiary.org/entry/20110225/1298572030 voidy21 2011-02-25T10:21:11Z css <blockquote cite="https://y-kawaz.hatenadiary.org/entry/20110225/1298572030" title="まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fy-kawaz.hatenadiary.org%2Fentry%2F20110225%2F1298572030" alt="" /> <a href="https://y-kawaz.hatenadiary.org/entry/20110225/1298572030">まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記</a></cite><p><a href="https://y-kawaz.hatenadiary.org/entry/20110225/1298572030"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8b8e4d0622a2f19e3f0188e3f03c2d1b26f103ec/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127123971149%2F17680117127123975549%2F1557330662" alt="まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記" title="まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記" class="entry-image" /></a></p><p>主に海外の解析部隊の人達によって、まどか☆マギカの作中で使われてるルーン文字*1が解析されつつある解析完了したみたいです。 ご丁寧にもTrueTypeフォントがダウンロード出来るようになってたので、早速はてダで使ってみます。 まずMadokaRunes.ttfだけど、件のサイトへの直リンクは出来なさそうなので一旦別の場所に...</p><p><a href="https://b.hatena.ne.jp/entry/s/y-kawaz.hatenadiary.org/entry/20110225/1298572030"><img src="https://b.hatena.ne.jp/entry/image/https://y-kawaz.hatenadiary.org/entry/20110225/1298572030" alt="はてなブックマーク - まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記" title="はてなブックマーク - まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/y-kawaz.hatenadiary.org/entry/20110225/1298572030"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 79 https://developer.mozilla.org/samples/cssref/transitions/sample3/ voidy21 2010-10-02T13:32:15Z css <blockquote cite="https://developer.mozilla.org/samples/cssref/transitions/sample3/" title="CSS Transitions sampler"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fsamples%2Fcssref%2Ftransitions%2Fsample3%2F" alt="" /> <a href="https://developer.mozilla.org/samples/cssref/transitions/sample3/">CSS Transitions sampler</a></cite><p><a href="https://developer.mozilla.org/samples/cssref/transitions/sample3/"><img src="" alt="CSS Transitions sampler" title="CSS Transitions sampler" class="entry-image" /></a></p><p>Hover over the items below to see various animation effects. Long, gradual transition... Very fast transition... Long transition with a 2-second delay... Using ease-out timing... Using linear timing... Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</p><p><a href="https://b.hatena.ne.jp/entry/s/developer.mozilla.org/samples/cssref/transitions/sample3/"><img src="https://b.hatena.ne.jp/entry/image/https://developer.mozilla.org/samples/cssref/transitions/sample3/" alt="はてなブックマーク - CSS Transitions sampler" title="はてなブックマーク - CSS Transitions sampler" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/developer.mozilla.org/samples/cssref/transitions/sample3/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/ voidy21 2010-07-17T09:57:11Z css <blockquote cite="https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/" title="53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.smashingmagazine.com%2F2007%2F01%2F53-css-techniques-you-couldnt-live-without%2F" alt="" /> <a href="https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/">53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine</a></cite><p><a href="https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b9bebd5f639bd26ee326a42236b2fb3c5c99d59b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Farchive.smashing.media%2Fassets%2F344dbf88-fdf9-42bb-adb4-46f01eedd629%2Fe58c3388-15ae-423c-b65b-deecac750f66%2F02-css-style-guide-500.jpg" alt="53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine" title="53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine" class="entry-image" /></a></p><p>CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/"><img src="https://b.hatena.ne.jp/entry/image/https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/" alt="はてなブックマーク - 53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine" title="はてなブックマーク - 53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 726 https://cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow voidy21 2010-07-10T01:40:31Z css <blockquote cite="https://cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow" title="css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcherenkov.hatenadiary.org%2Fentry%2F20100709%2Fmonalisa_shadow" alt="" /> <a href="https://cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow">css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき</a></cite><p><a href="https://cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/17e3cdef269d09db61d1ffb9579874bce03ed07f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F54ca3b0e4e6ed6131f7549a32a932fd8a062e6c7%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FC%252FCherenkov%252F20100710%252F20100710023116.jpg" alt="css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき" title="css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき" class="entry-image" /></a></p><p>はいー、できましたー。text-shadowを1ピクセルごと配置してモナリザを表現しています。 これまでいくつか「cssだけで◯◯」を見てきましたがあんなのはハッタリです。タグ使いまくりで全然cssだけじゃありません。この手法を使えばテキストとcssがあれば再現できます！ ジェネレータも作ったので、よかったら遊んでみてく...</p><p><a href="https://b.hatena.ne.jp/entry/s/cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow"><img src="https://b.hatena.ne.jp/entry/image/https://cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow" alt="はてなブックマーク - css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき" title="はてなブックマーク - css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/cherenkov.hatenadiary.org/entry/20100709/monalisa_shadow"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 65 https://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html voidy21 2010-07-02T11:48:49Z css <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html" title="[CSS]画像に美しい角丸とボックスシャドウを適用する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss3-rounded-image-with-jquery.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html">[CSS]画像に美しい角丸とボックスシャドウを適用する方法</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html"><img src="" alt="[CSS]画像に美しい角丸とボックスシャドウを適用する方法" title="[CSS]画像に美しい角丸とボックスシャドウを適用する方法" class="entry-image" /></a></p><p>img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボック...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html" alt="はてなブックマーク - [CSS]画像に美しい角丸とボックスシャドウを適用する方法" title="はてなブックマーク - [CSS]画像に美しい角丸とボックスシャドウを適用する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 348 http://desperadoes.biz/style/dan/ voidy21 2010-07-01T22:39:55Z css <blockquote cite="http://desperadoes.biz/style/dan/" title="スタイルシートによる崩れない　2カラム　3カラム・レイアウト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fdesperadoes.biz%2Fstyle%2Fdan%2F" alt="" /> <a href="http://desperadoes.biz/style/dan/">スタイルシートによる崩れない　2カラム　3カラム・レイアウト</a></cite><p><a href="http://desperadoes.biz/style/dan/"><img src="" alt="スタイルシートによる崩れない　2カラム　3カラム・レイアウト" title="スタイルシートによる崩れない　2カラム　3カラム・レイアウト" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/desperadoes.biz/style/dan/"><img src="https://b.hatena.ne.jp/entry/image/http://desperadoes.biz/style/dan/" alt="はてなブックマーク - スタイルシートによる崩れない　2カラム　3カラム・レイアウト" title="はてなブックマーク - スタイルシートによる崩れない　2カラム　3カラム・レイアウト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/desperadoes.biz/style/dan/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1321 https://colo-ri.jp/develop/2008/03/css.html voidy21 2010-07-01T22:39:14Z css <blockquote cite="https://colo-ri.jp/develop/2008/03/css.html" title="CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcolo-ri.jp%2Fdevelop%2F2008%2F03%2Fcss.html" alt="" /> <a href="https://colo-ri.jp/develop/2008/03/css.html">CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori</a></cite><p><a href="https://colo-ri.jp/develop/2008/03/css.html"><img src="" alt="CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori" title="CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori" class="entry-image" /></a></p><p>CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。 ブラウザによって異なる、フォントサイズの境界 例えば「font-size:70%」というふうに指定して、Inte...</p><p><a href="https://b.hatena.ne.jp/entry/s/colo-ri.jp/develop/2008/03/css.html"><img src="https://b.hatena.ne.jp/entry/image/https://colo-ri.jp/develop/2008/03/css.html" alt="はてなブックマーク - CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori" title="はてなブックマーク - CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/colo-ri.jp/develop/2008/03/css.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 341 https://kachibito.net/web-design/pure-css3-icons.html voidy21 2010-07-01T04:01:40Z css ネタ <blockquote cite="https://kachibito.net/web-design/pure-css3-icons.html" title="画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2Fpure-css3-icons.html" alt="" /> <a href="https://kachibito.net/web-design/pure-css3-icons.html">画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/pure-css3-icons.html"><img src="" alt="画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net" title="画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net" class="entry-image" /></a></p><p>この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっとしたネタ。ドラえもんやら Operaアイコンやらをcssオンリー で作られて、益々css3の可能性 が楽しみですが、今度はFlickrや Facebook、TwitterやRSSの アイコン10種をcssのみで...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/pure-css3-icons.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/pure-css3-icons.html" alt="はてなブックマーク - 画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net" title="はてなブックマーク - 画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/pure-css3-icons.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 17 https://thrakt.hatenadiary.org/entry/20100528/1275043137 voidy21 2010-05-28T11:18:47Z iPhone css <blockquote cite="https://thrakt.hatenadiary.org/entry/20100528/1275043137" title="iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fthrakt.hatenadiary.org%2Fentry%2F20100528%2F1275043137" alt="" /> <a href="https://thrakt.hatenadiary.org/entry/20100528/1275043137">iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？</a></cite><p><a href="https://thrakt.hatenadiary.org/entry/20100528/1275043137"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9523cbbdaca89b401beafd75f5349d0638e16ab0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127119846314%2F17680117127119848626%2F1557214852" alt="iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？" title="iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？" class="entry-image" /></a></p><p>LivedoorReaderPinChecker http://ldrpin.appspot.com/ すっかり遅くなりましたが、LivedoorReaderPinCheckerの開発話の続きです。 LivedoorPinCheckerの開発話 - そうだ？Blogを書こう？ 開発でも一番時間をかけた、UI関係の話を書いていきたいと思います。 ドッグフーディング まず最初に、UI関係で一番強く感じるのは...</p><p><a href="https://b.hatena.ne.jp/entry/s/thrakt.hatenadiary.org/entry/20100528/1275043137"><img src="https://b.hatena.ne.jp/entry/image/https://thrakt.hatenadiary.org/entry/20100528/1275043137" alt="はてなブックマーク - iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？" title="はてなブックマーク - iPhone向けのWebサービスを開発する時に気をつけた事 - そうだ？Blogを書こう？" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/thrakt.hatenadiary.org/entry/20100528/1275043137"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 http://webtech-walker.com/archive/2010/05/18162034.html voidy21 2010-05-19T03:54:10Z css <blockquote cite="http://webtech-walker.com/archive/2010/05/18162034.html" title="CSSセレクタの高速化の話し - Webtech Walker"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwebtech-walker.com%2Farchive%2F2010%2F05%2F18162034.html" alt="" /> <a href="http://webtech-walker.com/archive/2010/05/18162034.html">CSSセレクタの高速化の話し - Webtech Walker</a></cite><p><a href="http://webtech-walker.com/archive/2010/05/18162034.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/857c132ba8dd0ec98858fba07e66e5637449f95e/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fwebtech-walker.com%2Fimg%2Fcommon%2Ficon.png" alt="CSSセレクタの高速化の話し - Webtech Walker" title="CSSセレクタの高速化の話し - Webtech Walker" class="entry-image" /></a></p><p>続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実...</p><p><a href="https://b.hatena.ne.jp/entry/webtech-walker.com/archive/2010/05/18162034.html"><img src="https://b.hatena.ne.jp/entry/image/http://webtech-walker.com/archive/2010/05/18162034.html" alt="はてなブックマーク - CSSセレクタの高速化の話し - Webtech Walker" title="はてなブックマーク - CSSセレクタの高速化の話し - Webtech Walker" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/webtech-walker.com/archive/2010/05/18162034.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 906 https://os0x.hatenablog.com/entry/20100518/1274204934 voidy21 2010-05-19T03:50:13Z css <blockquote cite="https://os0x.hatenablog.com/entry/20100518/1274204934" title="CSSセレクタの高速化の話を検証 - os0x.blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fos0x.hatenablog.com%2Fentry%2F20100518%2F1274204934" alt="" /> <a href="https://os0x.hatenablog.com/entry/20100518/1274204934">CSSセレクタの高速化の話を検証 - os0x.blog</a></cite><p><a href="https://os0x.hatenablog.com/entry/20100518/1274204934"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/09de31d5df4e6cc6c9776a985bf836a7726d5c00/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729893101%2F12704591929890711358%2F1365590825" alt="CSSセレクタの高速化の話を検証 - os0x.blog" title="CSSセレクタの高速化の話を検証 - os0x.blog" class="entry-image" /></a></p><p>CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとある通り、FirefoxなどのUIレベル...</p><p><a href="https://b.hatena.ne.jp/entry/s/os0x.hatenablog.com/entry/20100518/1274204934"><img src="https://b.hatena.ne.jp/entry/image/https://os0x.hatenablog.com/entry/20100518/1274204934" alt="はてなブックマーク - CSSセレクタの高速化の話を検証 - os0x.blog" title="はてなブックマーク - CSSセレクタの高速化の話を検証 - os0x.blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/os0x.hatenablog.com/entry/20100518/1274204934"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 188