https://b.hatena.ne.jp/lli/CSS/ CSSに関するlliのはてなブックマーク (26) https://phpspot.org/blog/archives/2013/08/cssemmet_livest.html lli 2013-08-08T22:56:18Z css WebDesign 428 <blockquote cite="https://phpspot.org/blog/archives/2013/08/cssemmet_livest.html" title="これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2013%2F08%2Fcssemmet_livest.html" alt="" /> <a href="https://phpspot.org/blog/archives/2013/08/cssemmet_livest.html">これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2013/08/cssemmet_livest.html"><img src="" alt="これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌" title="これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌" class="entry-image" /></a></p><p>Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできる...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2013/08/cssemmet_livest.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2013/08/cssemmet_livest.html" alt="はてなブックマーク - これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌" title="はてなブックマーク - これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2013/08/cssemmet_livest.html"><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/css3pie-decorations-for-ie.html lli 2010-07-14T16:29:30Z css WebDesign 1354 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html" title="たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss3pie-decorations-for-ie.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html">たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html"><img src="" alt="たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE" title="たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE" class="entry-image" /></a></p><p>IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html" alt="はてなブックマーク - たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE" title="はてなブックマーク - たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://journal.mycom.co.jp/news/2010/07/06/041/index.html lli 2010-07-10T07:23:05Z WebDesign css 129 <blockquote cite="http://journal.mycom.co.jp/news/2010/07/06/041/index.html" title="CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fjournal.mycom.co.jp%2Fnews%2F2010%2F07%2F06%2F041%2Findex.html" alt="" /> <a href="http://journal.mycom.co.jp/news/2010/07/06/041/index.html">CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル</a></cite><p><a href="http://journal.mycom.co.jp/news/2010/07/06/041/index.html"><img src="" alt="CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル" title="CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル" class="entry-image" /></a></p><p>Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive...</p><p><a href="https://b.hatena.ne.jp/entry/journal.mycom.co.jp/news/2010/07/06/041/index.html"><img src="https://b.hatena.ne.jp/entry/image/http://journal.mycom.co.jp/news/2010/07/06/041/index.html" alt="はてなブックマーク - CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル" title="はてなブックマーク - CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/journal.mycom.co.jp/news/2010/07/06/041/index.html"><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/examples-of-css3-by-sixrevisions.html lli 2010-06-09T13:13:34Z css WebDesign 400 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html" title="[CSS]実例から学ぶCSS3の効果的な使い方"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fexamples-of-css3-by-sixrevisions.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html">[CSS]実例から学ぶCSS3の効果的な使い方</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html"><img src="" alt="[CSS]実例から学ぶCSS3の効果的な使い方" title="[CSS]実例から学ぶCSS3の効果的な使い方" class="entry-image" /></a></p><p>CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html" alt="はてなブックマーク - [CSS]実例から学ぶCSS3の効果的な使い方" title="はてなブックマーク - [CSS]実例から学ぶCSS3の効果的な使い方" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/examples-of-css3-by-sixrevisions.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.designwalker.com/2010/06/jquery-forms.html lli 2010-06-09T12:43:10Z WebDesign css javascript tips 1329 <blockquote cite="http://www.designwalker.com/2010/06/jquery-forms.html" title="http://www.designwalker.com/2010/06/jquery-forms.html"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.designwalker.com%2F2010%2F06%2Fjquery-forms.html" alt="" /> <a href="http://www.designwalker.com/2010/06/jquery-forms.html">http://www.designwalker.com/2010/06/jquery-forms.html</a></cite><p><a href="http://www.designwalker.com/2010/06/jquery-forms.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b8e942c445b748214317fa6163839b627b11c429/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.designwalker.com%2Fwp-content%2Fuploads%2F2017%2F12%2F06.png" alt="http://www.designwalker.com/2010/06/jquery-forms.html" title="http://www.designwalker.com/2010/06/jquery-forms.html" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/www.designwalker.com/2010/06/jquery-forms.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.designwalker.com/2010/06/jquery-forms.html" alt="はてなブックマーク - http://www.designwalker.com/2010/06/jquery-forms.html" title="はてなブックマーク - http://www.designwalker.com/2010/06/jquery-forms.html" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.designwalker.com/2010/06/jquery-forms.html"><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-tips-pointer-events-current-navigation.html lli 2010-06-09T12:21:09Z css WebDesign tips 108 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.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%2Fcss-tips-pointer-events-current-navigation.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html">[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html"><img src="" alt="[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス" title="[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス" class="entry-image" /></a></p><p>使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。 HTML ナビゲーションはシンプルなHTMLです。 &lt;textarea name=&quot;code&quot; class=&quot;html&quot; cols=&quot;60&quot; rows=&quot;5&quot;&gt; &lt;nav&gt; &lt;ul&gt; &lt;li class=&quot;home&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;about&quot;&gt;&lt;a href=&quot;#&quot;&gt;...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.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/css-tips-pointer-events-current-navigation.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html lli 2010-06-02T12:53:10Z css javascript WebDesign 295 <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html" title="[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-lightboxme.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html">[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html"><img src="" alt="[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me" title="[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me" class="entry-image" /></a></p><p>IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ド...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html" alt="はてなブックマーク - [JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me" title="はてなブックマーク - [JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-lightboxme.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://webtech-walker.com/archive/2010/05/18162034.html 全然知らなかった。感謝。 lli 2010-05-18T15:38:00Z css WebDesign 906 <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> https://transporter.com.tr/ lli 2010-05-18T08:01:38Z css tips WebDesign 86 <blockquote cite="https://transporter.com.tr/" title="Arctic Core - the open source AUTOSAR embedded platform"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftransporter.com.tr%2F" alt="" /> <a href="https://transporter.com.tr/">Arctic Core - the open source AUTOSAR embedded platform</a></cite><p><a href="https://transporter.com.tr/"><img src="" alt="Arctic Core - the open source AUTOSAR embedded platform" title="Arctic Core - the open source AUTOSAR embedded platform" class="entry-image" /></a></p><p>Simplify your logistics processes and optimize your operations</p><p><a href="https://b.hatena.ne.jp/entry/s/transporter.com.tr/"><img src="https://b.hatena.ne.jp/entry/image/https://transporter.com.tr/" alt="はてなブックマーク - Arctic Core - the open source AUTOSAR embedded platform" title="はてなブックマーク - Arctic Core - the open source AUTOSAR embedded platform" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/transporter.com.tr/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.fonts.com/ lli 2010-05-06T15:41:51Z service WebDesign css 360 <blockquote cite="https://www.fonts.com/" title="ITCFonts.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.fonts.com%2F" alt="" /> <a href="https://www.fonts.com/">ITCFonts.com</a></cite><p><a href="https://www.fonts.com/"><img src="" alt="ITCFonts.com" title="ITCFonts.com" class="entry-image" /></a></p><p>As of March 28, 2024, all fonts previously sold on Fonts.com are now available for purchase at MyFonts.com and through Monotype’s subscription service, Monotype Fonts, where applicable. Your customer history will be preserved on MyFonts or through a subscription on Monotype Fonts*. Whichever rout...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.fonts.com/"><img src="https://b.hatena.ne.jp/entry/image/https://www.fonts.com/" alt="はてなブックマーク - ITCFonts.com" title="はてなブックマーク - ITCFonts.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.fonts.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/javascript/js-ie-css3-2.html lli 2010-04-13T03:28:51Z WebDesign css 396 <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html" title="[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-ie-css3-2.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html">[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html"><img src="" alt="[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3" title="[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3" class="entry-image" /></a></p><p>&lt;textarea name=&quot;code&quot; class=&quot;css&quot; cols=&quot;60&quot; rows=&quot;5&quot;&gt; .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html" alt="はてなブックマーク - [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3" title="はてなブックマーク - [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html"><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-quick-tip-css-hack-target-ie6-ie7-ie8.html lli 2010-03-30T05:16:24Z css WebDesign 643 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html" title="わずか四文字でIE6/7/8を区別するCSSハック | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-quick-tip-css-hack-target-ie6-ie7-ie8.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html">わずか四文字でIE6/7/8を区別するCSSハック | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html"><img src="" alt="わずか四文字でIE6/7/8を区別するCSSハック | コリス" title="わずか四文字でIE6/7/8を区別するCSSハック | コリス" class="entry-image" /></a></p><p>「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 &lt;textarea name=&quot;code&quot; class=&quot;css&quot; cols=&quot;60&quot; rows=&quot;5&quot;&gt; body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } &lt;/textarea&gt;</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html" alt="はてなブックマーク - わずか四文字でIE6/7/8を区別するCSSハック | コリス" title="はてなブックマーク - わずか四文字でIE6/7/8を区別するCSSハック | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html"><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/css3-examples-and-best-practices.html lli 2010-03-05T05:10:10Z css WebDesign 316 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html" title="[CSS]CSS3の効果的な使い方と陥りやすいワナ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss3-examples-and-best-practices.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html">[CSS]CSS3の効果的な使い方と陥りやすいワナ</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html"><img src="" alt="[CSS]CSS3の効果的な使い方と陥りやすいワナ" title="[CSS]CSS3の効果的な使い方と陥りやすいワナ" class="entry-image" /></a></p><p>CSS3で何ができるのかという「CSS3で何ができるの？　という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？　ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html" alt="はてなブックマーク - [CSS]CSS3の効果的な使い方と陥りやすいワナ" title="はてなブックマーク - [CSS]CSS3の効果的な使い方と陥りやすいワナ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-examples-and-best-practices.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kachibito.net/web-design/css-collection.html lli 2010-01-26T04:03:40Z css WebDesign 1269 <blockquote cite="https://kachibito.net/web-design/css-collection.html" title="cssの情報・まとめ - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2Fcss-collection.html" alt="" /> <a href="https://kachibito.net/web-design/css-collection.html">cssの情報・まとめ - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/css-collection.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c6687a6f9d3f527d81477f0f0007f4ac698c6b2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2024%2F07%2Fsiteimg.png" alt="cssの情報・まとめ - かちびと.net" title="cssの情報・まとめ - かちびと.net" class="entry-image" /></a></p><p>この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 ...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/css-collection.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/css-collection.html" alt="はてなブックマーク - cssの情報・まとめ - かちびと.net" title="はてなブックマーク - cssの情報・まとめ - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/css-collection.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://labs.unoh.net/2007/09/css_1.html すんばらすい lli 2010-01-23T07:09:38Z WebDesign css 266 <blockquote cite="http://labs.unoh.net/2007/09/css_1.html" title="GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Flabs.unoh.net%2F2007%2F09%2Fcss_1.html" alt="" /> <a href="http://labs.unoh.net/2007/09/css_1.html">GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ</a></cite><p><a href="http://labs.unoh.net/2007/09/css_1.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7cfc4a6b4c867e1d4ccb37f843cabfe02f533ac5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fplay-lh.googleusercontent.com%2FuaWyNqhFralHmOaSiyP6FeleR4f9iFVmUkfmol6mqyygYT6oCuLpLCRhFx2Hu4j804I" alt="GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ" title="GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ" class="entry-image" /></a></p><p>GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを...</p><p><a href="https://b.hatena.ne.jp/entry/labs.unoh.net/2007/09/css_1.html"><img src="https://b.hatena.ne.jp/entry/image/http://labs.unoh.net/2007/09/css_1.html" alt="はてなブックマーク - GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ" title="はてなブックマーク - GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/labs.unoh.net/2007/09/css_1.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ntaku.hateblo.jp/entry/20090913/1252827348 lli 2009-09-15T05:33:10Z iPhone css WebDesign 108 <blockquote cite="https://ntaku.hateblo.jp/entry/20090913/1252827348" title="iPhoneのSafari対応について - プログラミングノート"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fntaku.hateblo.jp%2Fentry%2F20090913%2F1252827348" alt="" /> <a href="https://ntaku.hateblo.jp/entry/20090913/1252827348">iPhoneのSafari対応について - プログラミングノート</a></cite><p><a href="https://ntaku.hateblo.jp/entry/20090913/1252827348"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4a753743f1943660553f3d17e664c95c31a59118/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704346814673867439%2F8454420450078749157%2F1420170918" alt="iPhoneのSafari対応について - プログラミングノート" title="iPhoneのSafari対応について - プログラミングノート" class="entry-image" /></a></p><p>Safari対応サイトを作った際にあまり調べていなかったので、ちょっと調べてみました。OS 3.0から使える機能も増えていて、簡単なアプリならネイティブアプリ作らなくても実現できますね。選択肢が増えるのは良いことです。 ブラウザの仕様 Web標準技術が使えるので、PCサイト開発の延長で作れる。 ブラウザ互換などは気...</p><p><a href="https://b.hatena.ne.jp/entry/s/ntaku.hateblo.jp/entry/20090913/1252827348"><img src="https://b.hatena.ne.jp/entry/image/https://ntaku.hateblo.jp/entry/20090913/1252827348" alt="はてなブックマーク - iPhoneのSafari対応について - プログラミングノート" title="はてなブックマーク - iPhoneのSafari対応について - プログラミングノート" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ntaku.hateblo.jp/entry/20090913/1252827348"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://phpspot.org/blog/archives/2009/08/jquery_22.html lli 2009-08-30T08:01:55Z css design WebDesign 209 <blockquote cite="https://phpspot.org/blog/archives/2009/08/jquery_22.html" title="jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2009%2F08%2Fjquery_22.html" alt="" /> <a href="https://phpspot.org/blog/archives/2009/08/jquery_22.html">jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2009/08/jquery_22.html"><img src="" alt="jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌" title="jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌" class="entry-image" /></a></p><p>jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off ...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2009/08/jquery_22.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2009/08/jquery_22.html" alt="はてなブックマーク - jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌" title="はてなブックマーク - jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2009/08/jquery_22.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://3ping.org/2009/08/01/1259 わかりやすい。 lli 2009-08-02T01:19:35Z css WebDesign 965 <blockquote cite="http://3ping.org/2009/08/01/1259" title="CSSの実装状況で変わるボックスのデザイン方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2F3ping.org%2F2009%2F08%2F01%2F1259" alt="" /> <a href="http://3ping.org/2009/08/01/1259">CSSの実装状況で変わるボックスのデザイン方法</a></cite><p><a href="http://3ping.org/2009/08/01/1259"><img src="" alt="CSSの実装状況で変わるボックスのデザイン方法" title="CSSの実装状況で変わるボックスのデザイン方法" class="entry-image" /></a></p><p>Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですか...</p><p><a href="https://b.hatena.ne.jp/entry/3ping.org/2009/08/01/1259"><img src="https://b.hatena.ne.jp/entry/image/http://3ping.org/2009/08/01/1259" alt="はてなブックマーク - CSSの実装状況で変わるボックスのデザイン方法" title="はてなブックマーク - CSSの実装状況で変わるボックスのデザイン方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/3ping.org/2009/08/01/1259"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://uupaa.hatenadiary.org/entry/20090624/1245808087 lli 2009-06-25T04:39:35Z WebDesign css design javascript 378 <blockquote cite="https://uupaa.hatenadiary.org/entry/20090624/1245808087" title="古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fuupaa.hatenadiary.org%2Fentry%2F20090624%2F1245808087" alt="" /> <a href="https://uupaa.hatenadiary.org/entry/20090624/1245808087">古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log</a></cite><p><a href="https://uupaa.hatenadiary.org/entry/20090624/1245808087"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3935718e2aeb26265f5ebbc85bb7edcdce99fcdf/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127139005654%2F17680117127139031525%2F1558098941" alt="古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log" title="古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log" class="entry-image" /></a></p><p>uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで...</p><p><a href="https://b.hatena.ne.jp/entry/s/uupaa.hatenadiary.org/entry/20090624/1245808087"><img src="https://b.hatena.ne.jp/entry/image/https://uupaa.hatenadiary.org/entry/20090624/1245808087" alt="はてなブックマーク - 古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log" title="はてなブックマーク - 古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/uupaa.hatenadiary.org/entry/20090624/1245808087"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://bashalog.c-brains.jp/09/06/18-223233.php lli 2009-06-19T05:41:26Z css WebDesign 1400 <blockquote cite="https://bashalog.c-brains.jp/09/06/18-223233.php" title="【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fbashalog.c-brains.jp%2F09%2F06%2F18-223233.php" alt="" /> <a href="https://bashalog.c-brains.jp/09/06/18-223233.php">【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。</a></cite><p><a href="https://bashalog.c-brains.jp/09/06/18-223233.php"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5daa55489c1ad26a219643d0705eb421667c6fc1/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png" alt="【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。" title="【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。" class="entry-image" /></a></p><p>ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかり...</p><p><a href="https://b.hatena.ne.jp/entry/s/bashalog.c-brains.jp/09/06/18-223233.php"><img src="https://b.hatena.ne.jp/entry/image/https://bashalog.c-brains.jp/09/06/18-223233.php" alt="はてなブックマーク - 【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。" title="はてなブックマーク - 【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/bashalog.c-brains.jp/09/06/18-223233.php"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>