https://b.hatena.ne.jp/helldeath/css/ cssに関するhelldeathのはてなブックマーク (45) https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html いいなと思った。IE11では正常動作しない。が、皆さんはもうIE11は切り捨てておるんじゃろう…？ helldeath 2019-11-11T02:00:37Z css 仕事 430 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html" title="HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-library-izmir-hover-effects.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html">HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2dd3a3c54f97ae3b3cc76fff64c2251ad39210e3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201904%2F2019111003.gif" alt="HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir" title="HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir" class="entry-image" /></a></p><p>シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html" alt="はてなブックマーク - HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir" title="はてなブックマーク - HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-library-izmir-hover-effects.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://web-design.hatenadiary.jp/entry/20150715/p1 スクロールしても固定表示されるモーダルウインドウ。 helldeath 2016-06-13T05:07:43Z css HTML5 仕事 1 <blockquote cite="http://web-design.hatenadiary.jp/entry/20150715/p1" title="HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fweb-design.hatenadiary.jp%2Fentry%2F20150715%2Fp1" alt="" /> <a href="http://web-design.hatenadiary.jp/entry/20150715/p1">HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス</a></cite><p><a href="http://web-design.hatenadiary.jp/entry/20150715/p1"><img src="" alt="HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス" title="HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/web-design.hatenadiary.jp/entry/20150715/p1"><img src="https://b.hatena.ne.jp/entry/image/http://web-design.hatenadiary.jp/entry/20150715/p1" alt="はてなブックマーク - HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス" title="はてなブックマーク - HTML&amp;CSSでつくるモーダルウィンドウ - Webデザインの勉強 風姿花伝 | 02月25日開講クラス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/web-design.hatenadiary.jp/entry/20150715/p1"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://blog1.mammb.com/entry/20111031/1320068451 なるほど、StickyFooterというのはこういうことか。 helldeath 2016-05-10T06:47:54Z css 仕事 13 <blockquote cite="https://blog1.mammb.com/entry/20111031/1320068451" title="フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog1.mammb.com%2Fentry%2F20111031%2F1320068451" alt="" /> <a href="https://blog1.mammb.com/entry/20111031/1320068451">フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum</a></cite><p><a href="https://blog1.mammb.com/entry/20111031/1320068451"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b322e66d29a52ab65a252d0dff0a2af157d5cc9e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1b74eb009ab822318887ec2e02197f29215057c9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FN%252FNaotsugu%252F20111029%252F20111029015450.png" alt="フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum" title="フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum" class="entry-image" /></a></p><p>フッターを CSS で画面下部に固定したいのはよくあるケースなようで、『CSSStickyFooter』 とか、『A CSS sticky footer』とかが有名どころでしょうか。 CSSStickyFooter は昔は Clearfix Hack を使っていたようですが、今やシンプルなCSSでフッターの固定化を実現しています。 ここではとってもシンプルな『A CSS stick...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog1.mammb.com/entry/20111031/1320068451"><img src="https://b.hatena.ne.jp/entry/image/https://blog1.mammb.com/entry/20111031/1320068451" alt="はてなブックマーク - フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum" title="はてなブックマーク - フッターを画面下部に固定する CSS sticky footer の Step By Step - A Memorandum" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog1.mammb.com/entry/20111031/1320068451"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.99lime.com/elements/ 仕事で使うかもしれない helldeath 2015-03-06T06:43:29Z HTML5 css フレームワーク 便利 仕事 134 <blockquote cite="http://www.99lime.com/elements/" title="http://www.99lime.com/elements/"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.99lime.com%2Felements%2F" alt="" /> <a href="http://www.99lime.com/elements/">http://www.99lime.com/elements/</a></cite><p><a href="http://www.99lime.com/elements/"><img src="" alt="http://www.99lime.com/elements/" title="http://www.99lime.com/elements/" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/www.99lime.com/elements/"><img src="https://b.hatena.ne.jp/entry/image/http://www.99lime.com/elements/" alt="はてなブックマーク - http://www.99lime.com/elements/" title="はてなブックマーク - http://www.99lime.com/elements/" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.99lime.com/elements/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/ これは便利。IE9以上なら使えるし簡単 helldeath 2014-06-11T05:06:57Z css ユーザビリティ 便利 4 <blockquote cite="https://9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/" title="CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2F9-bb.com%2Fcss%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25B1%25E3%2583%25BC%25E3%2583%25ABscale%25E3%2582%2592%25E4%25BD%25BF%25E3%2581%2588%25E3%2581%25B0%25E3%2583%259E%25E3%2582%25A6%25E3%2582%25B9%25E3%2582%25AA%25E3%2583%25BC%25E3%2583%2590%25E3%2583%25BC%25E3%2581%25A7%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E6%258B%25A1%2F" alt="" /> <a href="https://9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/">CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB</a></cite><p><a href="https://9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae21d4e8030dee2670eacf70fb74b1621ef2ae91/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2F9-bb.com%2Fwp-content%2Fuploads%2F2014%2F02%2Fe1cca2c0912087376f311d3fafd99c41.png" alt="CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB" title="CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB" class="entry-image" /></a></p><p>CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます CSSのscaleを使ったデモ 画像の上にマウスポインターを乗せると上では拡大、下では縮小します いつもそのま...</p><p><a href="https://b.hatena.ne.jp/entry/s/9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/"><img src="https://b.hatena.ne.jp/entry/image/https://9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/" alt="はてなブックマーク - CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB" title="はてなブックマーク - CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう | 9ineBB" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/9-bb.com/css%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%ABscale%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://morizyun.github.io/blog/twitter-bootstrap-templates/ TwitterBootstrapベースのテンプレート。増えてきたなあ helldeath 2013-06-17T05:51:12Z web design css 参考 655 <blockquote cite="http://morizyun.github.io/blog/twitter-bootstrap-templates/" title="ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmorizyun.github.io%2Fblog%2Ftwitter-bootstrap-templates%2F" alt="" /> <a href="http://morizyun.github.io/blog/twitter-bootstrap-templates/">ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと</a></cite><p><a href="http://morizyun.github.io/blog/twitter-bootstrap-templates/"><img src="" alt="ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと" title="ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと" class="entry-image" /></a></p><p>ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました！ (03/05 追記) FlatUI、Bootstrap Expoを追加し...</p><p><a href="https://b.hatena.ne.jp/entry/morizyun.github.io/blog/twitter-bootstrap-templates/"><img src="https://b.hatena.ne.jp/entry/image/http://morizyun.github.io/blog/twitter-bootstrap-templates/" alt="はてなブックマーク - ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと" title="はてなブックマーク - ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&amp;有料まとめサイト - 酒と泪とRubyとRailsと" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/morizyun.github.io/blog/twitter-bootstrap-templates/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html フリーで使えるwebフォント（和文） helldeath 2013-03-12T05:32:08Z css web design 110 <blockquote cite="http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html" title="sourceforge.jp"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmplus-fonts.sourceforge.jp%2Fmplus-outline-fonts%2Fdesign%2Findex.html" alt="" /> <a href="http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html">sourceforge.jp</a></cite><p><a href="http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html"><img src="" alt="sourceforge.jp" title="sourceforge.jp" class="entry-image" /></a></p><p>We’re getting things ready Loading your experience… This won’t take long.</p><p><a href="https://b.hatena.ne.jp/entry/mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html"><img src="https://b.hatena.ne.jp/entry/image/http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html" alt="はてなブックマーク - sourceforge.jp" title="はてなブックマーク - sourceforge.jp" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://amanaimages.com/font/beginner/index.aspx フリートライアルがあり、実際のサイトに使える可能性 helldeath 2013-03-12T05:19:45Z css web design 2 <blockquote cite="https://amanaimages.com/font/beginner/index.aspx" title="ストックフォト・写真素材・動画素材ならアマナイメージズ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Famanaimages.com%2Ffont%2Fbeginner%2Findex.aspx" alt="" /> <a href="https://amanaimages.com/font/beginner/index.aspx">ストックフォト・写真素材・動画素材ならアマナイメージズ</a></cite><p><a href="https://amanaimages.com/font/beginner/index.aspx"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e47c95d6c91a205ccb54977a35339547256a910a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Famanaimages.com%2Fimg%2Fhome%2Fimg-ogp201404.jpg" alt="ストックフォト・写真素材・動画素材ならアマナイメージズ" title="ストックフォト・写真素材・動画素材ならアマナイメージズ" class="entry-image" /></a></p><p>AND検索 入力したキーワード全てに該当するもののみ表示 半角を空けて検索 例）　男性 スーツ 会議 OR検索 各キーワードそれぞれに該当する もの全て表示 キーワードの間に 「+」（半角プラス）を入れて検索 例）　男性 + スーツ 除外検索 「-」以降のキーワードを除外して 表示 除外したいキーワードの前に 「-」（半角...</p><p><a href="https://b.hatena.ne.jp/entry/s/amanaimages.com/font/beginner/index.aspx"><img src="https://b.hatena.ne.jp/entry/image/https://amanaimages.com/font/beginner/index.aspx" alt="はてなブックマーク - ストックフォト・写真素材・動画素材ならアマナイメージズ" title="はてなブックマーク - ストックフォト・写真素材・動画素材ならアマナイメージズ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/amanaimages.com/font/beginner/index.aspx"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.oswt.co.uk/free_bootstrap_templates/ Bootstrapベースのおしゃれなテンプレート helldeath 2013-03-05T15:24:06Z css web design 37 <blockquote cite="http://www.oswt.co.uk/free_bootstrap_templates/" title="Free Bootstrap Templates - OSWT Free Web Templates"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.oswt.co.uk%2Ffree_bootstrap_templates%2F" alt="" /> <a href="http://www.oswt.co.uk/free_bootstrap_templates/">Free Bootstrap Templates - OSWT Free Web Templates</a></cite><p><a href="http://www.oswt.co.uk/free_bootstrap_templates/"><img src="" alt="Free Bootstrap Templates - OSWT Free Web Templates" title="Free Bootstrap Templates - OSWT Free Web Templates" class="entry-image" /></a></p><p>Free Bootstrap Templates What is a bootstrap template? A Bootstrap Template is a pre-made design built with Bootstrap framework - a web design kit for creating cross-browser, consistent and visually effective designs. The features that will make our Bootstrap themes interesting for you are their ...</p><p><a href="https://b.hatena.ne.jp/entry/www.oswt.co.uk/free_bootstrap_templates/"><img src="https://b.hatena.ne.jp/entry/image/http://www.oswt.co.uk/free_bootstrap_templates/" alt="はてなブックマーク - Free Bootstrap Templates - OSWT Free Web Templates" title="はてなブックマーク - Free Bootstrap Templates - OSWT Free Web Templates" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.oswt.co.uk/free_bootstrap_templates/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.portnine.com/bootstrap-themes Bootstrapベースの管理画面用テンプレート helldeath 2013-03-05T15:13:00Z css web design 75 <blockquote cite="https://www.portnine.com/bootstrap-themes" title="Bootstrap Themes"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.portnine.com%2Fbootstrap-themes" alt="" /> <a href="https://www.portnine.com/bootstrap-themes">Bootstrap Themes</a></cite><p><a href="https://www.portnine.com/bootstrap-themes"><img src="" alt="Bootstrap Themes" title="Bootstrap Themes" class="entry-image" /></a></p><p>Free Bootstrap Themes available for your admin and landing pages. Lots of themes to choose from with premium features.</p><p><a href="https://b.hatena.ne.jp/entry/s/www.portnine.com/bootstrap-themes"><img src="https://b.hatena.ne.jp/entry/image/https://www.portnine.com/bootstrap-themes" alt="はてなブックマーク - Bootstrap Themes" title="はてなブックマーク - Bootstrap Themes" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.portnine.com/bootstrap-themes"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://designmodo.github.io/Flat-UI/ ちょうかわいいカラフル・フラットなBootstrapベースのテンプレート helldeath 2013-03-05T14:59:30Z css デザイン web design 1036 <blockquote cite="http://designmodo.github.io/Flat-UI/" title="Flat UI - Free Bootstrap Framework and Theme"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fdesignmodo.github.io%2FFlat-UI%2F" alt="" /> <a href="http://designmodo.github.io/Flat-UI/">Flat UI - Free Bootstrap Framework and Theme</a></cite><p><a href="http://designmodo.github.io/Flat-UI/"><img src="" alt="Flat UI - Free Bootstrap Framework and Theme" title="Flat UI - Free Bootstrap Framework and Theme" class="entry-image" /></a></p><p>Checkboxes Unchecked Checked Disabled unchecked Disabled checked Radio Buttons Radio is off Radio is on Disabled radio is off Disabled radio is on</p><p><a href="https://b.hatena.ne.jp/entry/designmodo.github.io/Flat-UI/"><img src="https://b.hatena.ne.jp/entry/image/http://designmodo.github.io/Flat-UI/" alt="はてなブックマーク - Flat UI - Free Bootstrap Framework and Theme" title="はてなブックマーク - Flat UI - Free Bootstrap Framework and Theme" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/designmodo.github.io/Flat-UI/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://pikock.github.io/bootstrap-magic/ helldeath 2013-01-19T08:33:07Z css web design あとで読む 47 <blockquote cite="http://pikock.github.io/bootstrap-magic/" title="Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fpikock.github.io%2Fbootstrap-magic%2F" alt="" /> <a href="http://pikock.github.io/bootstrap-magic/">Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes</a></cite><p><a href="http://pikock.github.io/bootstrap-magic/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8666cb5a518a1a7103a5e0ee4dcbd11947414420/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fpikock.github.io%2Fbootstrap-magic%2Fapp%2Fimg%2Fbootstrap-social.jpg" alt="Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes" title="Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes" class="entry-image" /></a></p><p>Bootstrap Magic 4.0 Create your Bootstrap 4.0 themes easily. Live preview, live HTML coding to help you create your Bootstrap 4.0 theme direclty in your browser Create your theme Github project Morbi Phasellus arcu Morbi molestie justo et finibus auctor. Nunc accumsan leo vel metus sollicitudin d...</p><p><a href="https://b.hatena.ne.jp/entry/pikock.github.io/bootstrap-magic/"><img src="https://b.hatena.ne.jp/entry/image/http://pikock.github.io/bootstrap-magic/" alt="はてなブックマーク - Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes" title="はてなブックマーク - Bootstrap Magic 4: Generate your own Bootstrap 4.0 theme in minutes" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/pikock.github.io/bootstrap-magic/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://terkel.jp/archives/2009/12/css-only-speech-bubbles/ 外側が吹き出しのしっぽ、内側が吹き出しのガワを担当する。IE6,IE7でも見れるね（角丸はなくなるけど）。 helldeath 2012-05-09T05:54:52Z css これはすごい web design 477 <blockquote cite="https://terkel.jp/archives/2009/12/css-only-speech-bubbles/" title="CSS のみで吹き出し"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fterkel.jp%2Farchives%2F2009%2F12%2Fcss-only-speech-bubbles%2F" alt="" /> <a href="https://terkel.jp/archives/2009/12/css-only-speech-bubbles/">CSS のみで吹き出し</a></cite><p><a href="https://terkel.jp/archives/2009/12/css-only-speech-bubbles/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8b717decc0f8733b98ae731c76a33fd70855be45/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fterkel.jp%2Fapple-touch-icon.png" alt="CSS のみで吹き出し" title="CSS のみで吹き出し" class="entry-image" /></a></p><p>hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: &lt;div class=&quot;...</p><p><a href="https://b.hatena.ne.jp/entry/s/terkel.jp/archives/2009/12/css-only-speech-bubbles/"><img src="https://b.hatena.ne.jp/entry/image/https://terkel.jp/archives/2009/12/css-only-speech-bubbles/" alt="はてなブックマーク - CSS のみで吹き出し" title="はてなブックマーク - CSS のみで吹き出し" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/terkel.jp/archives/2009/12/css-only-speech-bubbles/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://projects.verou.me/prefixfree/ CSS3用のベンダプリフィクスを必要な物だけ追加してくれる。cssの記述が楽になりそう helldeath 2012-04-27T03:54:17Z css javascript 71 <blockquote cite="https://projects.verou.me/prefixfree/" title="Prefix free: Break free from CSS vendor prefix hell!"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fprojects.verou.me%2Fprefixfree%2F" alt="" /> <a href="https://projects.verou.me/prefixfree/">Prefix free: Break free from CSS vendor prefix hell!</a></cite><p><a href="https://projects.verou.me/prefixfree/"><img src="" alt="Prefix free: Break free from CSS vendor prefix hell!" title="Prefix free: Break free from CSS vendor prefix hell!" class="entry-image" /></a></p><p>-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for c...</p><p><a href="https://b.hatena.ne.jp/entry/s/projects.verou.me/prefixfree/"><img src="https://b.hatena.ne.jp/entry/image/https://projects.verou.me/prefixfree/" alt="はてなブックマーク - Prefix free: Break free from CSS vendor prefix hell!" title="はてなブックマーク - Prefix free: Break free from CSS vendor prefix hell!" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/projects.verou.me/prefixfree/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://bootswatch.com/ TwitterBootstrapを使ったテーマ集。こちらは無料 helldeath 2012-04-19T07:25:21Z HTML5 css web design 951 <blockquote cite="http://bootswatch.com/" title="Bootswatch"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fbootswatch.com%2F" alt="" /> <a href="http://bootswatch.com/">Bootswatch</a></cite><p><a href="http://bootswatch.com/"><img src="" alt="Bootswatch" title="Bootswatch" class="entry-image" /></a></p><p>Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.8 Themes are built for the latest version of ...</p><p><a href="https://b.hatena.ne.jp/entry/bootswatch.com/"><img src="https://b.hatena.ne.jp/entry/image/http://bootswatch.com/" alt="はてなブックマーク - Bootswatch" title="はてなブックマーク - Bootswatch" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/bootswatch.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://wrapbootstrap.com/ TwitterBootstrapを使ったテーマ集。ただし有料のみのよう helldeath 2012-04-19T07:25:10Z HTML5 css web design 424 <blockquote cite="https://wrapbootstrap.com/" title="Bootstrap Templates and More on WrapBootstrap"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwrapbootstrap.com%2F" alt="" /> <a href="https://wrapbootstrap.com/">Bootstrap Templates and More on WrapBootstrap</a></cite><p><a href="https://wrapbootstrap.com/"><img src="" alt="Bootstrap Templates and More on WrapBootstrap" title="Bootstrap Templates and More on WrapBootstrap" class="entry-image" /></a></p><p>Bootstrap templates are website templates built with the popular Bootstrap framework. WrapBootstrap is the marketplace for high-quality website templates compatible with Bootstrap, React, Angular, Vue.js, Laravel, Django, ASP.NET Core, PHP, Python, and more.</p><p><a href="https://b.hatena.ne.jp/entry/s/wrapbootstrap.com/"><img src="https://b.hatena.ne.jp/entry/image/https://wrapbootstrap.com/" alt="はてなブックマーク - Bootstrap Templates and More on WrapBootstrap" title="はてなブックマーク - Bootstrap Templates and More on WrapBootstrap" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/wrapbootstrap.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html -9999pxとかの設定でパフォーマンスが悪くなるとは知らなかった helldeath 2012-04-17T03:08:08Z CSS web design 便利 929 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html" title="[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-hack-new-image-eplacement-by-zeldman.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html">[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html"><img src="" alt="[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック" title="[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック" class="entry-image" /></a></p><p>テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のよ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html" alt="はてなブックマーク - [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック" title="はてなブックマーク - [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html 最後の方のTwitterBootstrapを使ったWordPressテーマがいい、使いたい helldeath 2012-03-07T20:54:34Z css web design 543 <blockquote cite="https://coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html" title="Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Ffreebies%2Fresources-that-complement-twitter-bootstrap-by-webresourcesdepot.html" alt="" /> <a href="https://coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html">Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ</a></cite><p><a href="https://coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html"><img src="" alt="Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ" title="Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ" class="entry-image" /></a></p><p>Twitter Bootstrapをカスタマイズしたり、jQuery UI, jQuery Mobileで使ったり、PhotoshopやFireworkの素材として利用したり、WordPressのテーマなど、もっと活用するためのリソースをWeb Resources Depotから紹介します。 まずは、Twitter Bootstrapから。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html" alt="はてなブックマーク - Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ" title="はてなブックマーク - Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/freebies/resources-that-complement-twitter-bootstrap-by-webresourcesdepot.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://blueimp.github.io/Bootstrap-Image-Gallery/ これはなかなか。TwitterBootstrapを使ったギャラリー。 helldeath 2012-03-06T18:35:14Z javascript css 32 <blockquote cite="http://blueimp.github.io/Bootstrap-Image-Gallery/" title="Gallery redirect"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fblueimp.github.io%2FBootstrap-Image-Gallery%2F" alt="" /> <a href="http://blueimp.github.io/Bootstrap-Image-Gallery/">Gallery redirect</a></cite><p><a href="http://blueimp.github.io/Bootstrap-Image-Gallery/"><img src="" alt="Gallery redirect" title="Gallery redirect" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/blueimp.github.io/Bootstrap-Image-Gallery/"><img src="https://b.hatena.ne.jp/entry/image/http://blueimp.github.io/Bootstrap-Image-Gallery/" alt="はてなブックマーク - Gallery redirect" title="はてなブックマーク - Gallery redirect" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/blueimp.github.io/Bootstrap-Image-Gallery/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://d.hatena.ne.jp/deeeki/20110326/redmine_css_status これを参考にして終了ステータスは「status-5」なのでグレーな配色を追加するとかしてみた helldeath 2012-02-20T01:33:22Z css ツール 開発 プロジェクト管理 8 <blockquote cite="http://d.hatena.ne.jp/deeeki/20110326/redmine_css_status" title="Redmine チケット一覧 ステータスで色分け表示 - 130単位"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fd.hatena.ne.jp%2Fdeeeki%2F20110326%2Fredmine_css_status" alt="" /> <a href="http://d.hatena.ne.jp/deeeki/20110326/redmine_css_status">Redmine チケット一覧 ステータスで色分け表示 - 130単位</a></cite><p><a href="http://d.hatena.ne.jp/deeeki/20110326/redmine_css_status"><img src="" alt="Redmine チケット一覧 ステータスで色分け表示 - 130単位" title="Redmine チケット一覧 ステータスで色分け表示 - 130単位" class="entry-image" /></a></p><p>対応中や対応済のチケットを認識しやすくするため、色分け表示します。対象ステータスNoのclassを指定してスタイルを記述します。 Watersky Redmine Theme 1.1 Google Code Archive - Long-term storage for Google Code Project Hosting. こちらのテーマに合わせて編集したものですが、通常テーマでも使えます。優先度...</p><p><a href="https://b.hatena.ne.jp/entry/d.hatena.ne.jp/deeeki/20110326/redmine_css_status"><img src="https://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/deeeki/20110326/redmine_css_status" alt="はてなブックマーク - Redmine チケット一覧 ステータスで色分け表示 - 130単位" title="はてなブックマーク - Redmine チケット一覧 ステータスで色分け表示 - 130単位" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/d.hatena.ne.jp/deeeki/20110326/redmine_css_status"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>