https://b.hatena.ne.jp/tekapo/CSS/ CSSに関するtekapoのはてなブックマーク (46) https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/ tekapo 2020-01-05T14:28:52Z CSS <blockquote cite="https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/" title="Getting started with PostCSS - LogRocket Blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.logrocket.com%2Fgetting-started-with-postcss-in-2019-484262a4d725%2F" alt="" /> <a href="https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/">Getting started with PostCSS - LogRocket Blog</a></cite><p><a href="https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/920977a6f5a2d91be7da29ad5ef3fc7ac0ca198d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fstorage.googleapis.com%2Fblog-images-backup%2F1%2AjZHK_7MHJA7-2FqQeSnzIQ.jpeg" alt="Getting started with PostCSS - LogRocket Blog" title="Getting started with PostCSS - LogRocket Blog" class="entry-image" /></a></p><p>LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. If you’ve ever wanted to try out new, experimental, or nonstandard CSS properties in your code, then you know browser vendors require you to add prefixes to make them work until they are ful...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/"><img src="https://b.hatena.ne.jp/entry/image/https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/" alt="はてなブックマーク - Getting started with PostCSS - LogRocket Blog" title="はてなブックマーク - Getting started with PostCSS - LogRocket Blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://visualregressiontesting.com/ tekapo 2019-11-18T05:08:04Z regression css testing Test test <blockquote cite="https://visualregressiontesting.com/" title="Visual Regression Testing"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fvisualregressiontesting.com%2F" alt="" /> <a href="https://visualregressiontesting.com/">Visual Regression Testing</a></cite><p><a href="https://visualregressiontesting.com/"><img src="" alt="Visual Regression Testing" title="Visual Regression Testing" class="entry-image" /></a></p><p>We are enthusiasts of Visual Regression Testing with a commitment to spread our knowledge about the same. Our devotion to this field has led us to devise learning materials and resources that are designed to fit seamlessly into your busy schedule.</p><p><a href="https://b.hatena.ne.jp/entry/s/visualregressiontesting.com/"><img src="https://b.hatena.ne.jp/entry/image/https://visualregressiontesting.com/" alt="はてなブックマーク - Visual Regression Testing" title="はてなブックマーク - Visual Regression Testing" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/visualregressiontesting.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/ tekapo 2019-10-11T00:35:46Z firefox css tools <blockquote cite="https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/" title="A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.smashingmagazine.com%2F2019%2F10%2Fguide-new-experimental-css-devtools-firefox%2F" alt="" /> <a href="https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/">A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine</a></cite><p><a href="https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/606447fee87c3f2665ff023e07bd428c06b7ee87/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Farchive.smashing.media%2Fassets%2F344dbf88-fdf9-42bb-adb4-46f01eedd629%2F08344d1d-3013-4a44-8567-37afcd12f50f%2Fguide-new-experimental-css-devtools-firefox.png" alt="A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine" title="A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine" class="entry-image" /></a></p><p>The web has seen an incredible evolution in the last decade: new HTML/CSS features, browser improvements, and design techniques. Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article,...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/"><img src="https://b.hatena.ne.jp/entry/image/https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/" alt="はてなブックマーク - A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine" title="はてなブックマーク - A Guide To New And Experimental CSS DevTools In Firefox — Smashing Magazine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 7 https://github.com/AllThingsSmitty/css-protips tekapo 2015-12-17T00:27:22Z CSS <blockquote cite="https://github.com/AllThingsSmitty/css-protips" title="GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2FAllThingsSmitty%2Fcss-protips" alt="" /> <a href="https://github.com/AllThingsSmitty/css-protips">GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾</a></cite><p><a href="https://github.com/AllThingsSmitty/css-protips"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ab1b15f6e6df304f210be9c77f8f472903c3407d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F3f2b6bf4c42658bfec9b10605324e5e7ae2b6a5da837919d1d330c3ec1c2a245%2FAllThingsSmitty%2Fcss-protips" alt="GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾" title="GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾" 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/AllThingsSmitty/css-protips"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/AllThingsSmitty/css-protips" alt="はてなブックマーク - GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾" title="はてなブックマーク - GitHub - AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/AllThingsSmitty/css-protips"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 41 http://ianlunn.github.io/Hover/ tekapo 2015-01-12T02:50:30Z CSS CSS3 Webデザイン <blockquote cite="http://ianlunn.github.io/Hover/" title="Hover.css - A collection of CSS3 powered hover effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fianlunn.github.io%2FHover%2F" alt="" /> <a href="http://ianlunn.github.io/Hover/">Hover.css - A collection of CSS3 powered hover effects</a></cite><p><a href="http://ianlunn.github.io/Hover/"><img src="" alt="Hover.css - A collection of CSS3 powered hover effects" title="Hover.css - A collection of CSS3 powered hover effects" class="entry-image" /></a></p><p>2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Bac...</p><p><a href="https://b.hatena.ne.jp/entry/ianlunn.github.io/Hover/"><img src="https://b.hatena.ne.jp/entry/image/http://ianlunn.github.io/Hover/" alt="はてなブックマーク - Hover.css - A collection of CSS3 powered hover effects" title="はてなブックマーク - Hover.css - A collection of CSS3 powered hover effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/ianlunn.github.io/Hover/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 309 https://github.com/IanLunn/Hover tekapo 2015-01-12T02:49:37Z CSS <blockquote cite="https://github.com/IanLunn/Hover" title="GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2FIanLunn%2FHover" alt="" /> <a href="https://github.com/IanLunn/Hover">GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.</a></cite><p><a href="https://github.com/IanLunn/Hover"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b125bb849abe8c66dbb00094e8e0831ef247b4af/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2Fe143344f4857d210a83885b4afd33f0e966bb77e0889d6d1163c977470c77fd6%2FIanLunn%2FHover" alt="GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS." title="GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS." 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/IanLunn/Hover"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/IanLunn/Hover" alt="はてなブックマーク - GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS." title="はてなブックマーク - GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/IanLunn/Hover"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://github.com/mui/material-ui tekapo 2014-11-18T01:02:34Z CSS フレームワーク MaterialDesign <blockquote cite="https://github.com/mui/material-ui" title="GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fmui%2Fmaterial-ui" alt="" /> <a href="https://github.com/mui/material-ui">GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever.</a></cite><p><a href="https://github.com/mui/material-ui"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/073ab0f48f4790995597ae5ea7ff2eb333b0b810/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Frepository-images.githubusercontent.com%2F23083156%2Fb55af535-7ebd-488d-a63a-cc902e0619d3" alt="GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever." title="GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever." 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/mui/material-ui"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/mui/material-ui" alt="はてなブックマーク - GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever." title="はてなブックマーク - GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google&#39;s Material Design. Free forever." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/mui/material-ui"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 34 http://toybox-design.net/?p=640 tekapo 2014-09-09T08:23:59Z CSS StyleDocco <blockquote cite="http://toybox-design.net/?p=640" title="http://toybox-design.net/?p=640"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Ftoybox-design.net%2F%3Fp%3D640" alt="" /> <a href="http://toybox-design.net/?p=640">http://toybox-design.net/?p=640</a></cite><p><a href="http://toybox-design.net/?p=640"><img src="" alt="http://toybox-design.net/?p=640" title="http://toybox-design.net/?p=640" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/toybox-design.net/?p=640"><img src="https://b.hatena.ne.jp/entry/image/http://toybox-design.net/?p=640" alt="はてなブックマーク - http://toybox-design.net/?p=640" title="はてなブックマーク - http://toybox-design.net/?p=640" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/toybox-design.net/?p=640"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 40 https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/ tekapo 2014-07-30T07:07:29Z CSS styleguide WordPress <blockquote cite="https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/" title="CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdeveloper.wordpress.org%2Fcoding-standards%2Fwordpress-coding-standards%2Fcss%2F" alt="" /> <a href="https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/">CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org</a></cite><p><a href="https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/75731e66e53c950a2efc3437681e4831cd3a2c03/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fdeveloper.wordpress.org%2Fwp-content%2Fthemes%2Fwporg-developer-2023%2Fimages%2Fopengraph-image.png" alt="CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org" title="CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org" class="entry-image" /></a></p><p>Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins. Files within a project should appear as though created b...</p><p><a href="https://b.hatena.ne.jp/entry/s/developer.wordpress.org/coding-standards/wordpress-coding-standards/css/"><img src="https://b.hatena.ne.jp/entry/image/https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/" alt="はてなブックマーク - CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org" title="はてなブックマーク - CSS Coding Standards – Coding Standards Handbook | Developer.WordPress.org" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/developer.wordpress.org/coding-standards/wordpress-coding-standards/css/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 12 https://zuvuyalink.net/nrjlog/archives/1277 tekapo 2014-02-03T02:59:58Z CSS html javascript <blockquote cite="https://zuvuyalink.net/nrjlog/archives/1277" title="「Frontrend in Fukuoka」に参加してきました。 |"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzuvuyalink.net%2Fnrjlog%2Farchives%2F1277" alt="" /> <a href="https://zuvuyalink.net/nrjlog/archives/1277">「Frontrend in Fukuoka」に参加してきました。 |</a></cite><p><a href="https://zuvuyalink.net/nrjlog/archives/1277"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/027de9a064313db381ff60cafb8f586841d74ae8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fzuvuyapress.blob.core.windows.net%2Fzuvuyalink%2F2014%2F02%2Ffrontend201401_main.jpg" alt="「Frontrend in Fukuoka」に参加してきました。 |" title="「Frontrend in Fukuoka」に参加してきました。 |" class="entry-image" /></a></p><p>1月25日（土）に福岡県Ruby・コンテンツ産業振興センターでWebコミュニティ「Fukuoka Frontrend Frogs」を中心とする実行委員の協力の下で行われた「Frontrend in Fukuoka」に参加してきました！ ▼「Frontrend in Fukuoka」のイベントページはこちら http://frontendfrogs.org/frontrend/ 有料イベントであったにも関わ...</p><p><a href="https://b.hatena.ne.jp/entry/s/zuvuyalink.net/nrjlog/archives/1277"><img src="https://b.hatena.ne.jp/entry/image/https://zuvuyalink.net/nrjlog/archives/1277" alt="はてなブックマーク - 「Frontrend in Fukuoka」に参加してきました。 |" title="はてなブックマーク - 「Frontrend in Fukuoka」に参加してきました。 |" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zuvuyalink.net/nrjlog/archives/1277"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://hail2u.net/documents/css-postprocessor-era tekapo 2013-12-04T09:56:24Z CSS sass Grunt <blockquote cite="https://hail2u.net/documents/css-postprocessor-era" title="CSSポストプロセッサー時代の到来"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhail2u.net%2Fdocuments%2Fcss-postprocessor-era" alt="" /> <a href="https://hail2u.net/documents/css-postprocessor-era">CSSポストプロセッサー時代の到来</a></cite><p><a href="https://hail2u.net/documents/css-postprocessor-era"><img src="" alt="CSSポストプロセッサー時代の到来" title="CSSポストプロセッサー時代の到来" class="entry-image" /></a></p><p>SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って...</p><p><a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/css-postprocessor-era"><img src="https://b.hatena.ne.jp/entry/image/https://hail2u.net/documents/css-postprocessor-era" alt="はてなブックマーク - CSSポストプロセッサー時代の到来" title="はてなブックマーク - CSSポストプロセッサー時代の到来" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/css-postprocessor-era"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 291 https://blog.ruedap.com/2013/10/29/block-element-modifier tekapo 2013-10-30T02:55:01Z CSS 命名規則 <blockquote cite="https://blog.ruedap.com/2013/10/29/block-element-modifier" title="BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.ruedap.com%2F2013%2F10%2F29%2Fblock-element-modifier" alt="" /> <a href="https://blog.ruedap.com/2013/10/29/block-element-modifier">BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号</a></cite><p><a href="https://blog.ruedap.com/2013/10/29/block-element-modifier"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f8739a445259a1ac9bdfd2310d91c079b4345a6c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog.ruedap.com%2Fimages%2Fogp.png" alt="BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号" title="BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号" class="entry-image" /></a></p><p>BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.ruedap.com/2013/10/29/block-element-modifier"><img src="https://b.hatena.ne.jp/entry/image/https://blog.ruedap.com/2013/10/29/block-element-modifier" alt="はてなブックマーク - BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号" title="はてなブックマーク - BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.ruedap.com/2013/10/29/block-element-modifier"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 535 https://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/ tekapo 2013-10-21T17:09:40Z CSS web <blockquote cite="https://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/" title="Challenging CSS Best Practices — Smashing Magazine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoding.smashingmagazine.com%2F2013%2F10%2F21%2Fchallenging-css-best-practices-atomic-approach%2F" alt="" /> <a href="https://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/">Challenging CSS Best Practices — Smashing Magazine</a></cite><p><a href="https://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/"><img src="" alt="Challenging CSS Best Practices — Smashing Magazine" title="Challenging CSS Best Practices — Smashing Magazine" class="entry-image" /></a></p><p>When it comes to CSS, Thierry Koblentz is convinced that the only way to improve how to author style sheets is by moving away from the sacred principle of “separation of concerns”. CSS authors thrive on styling documents entirely through style sheets, an approach that has been sanctified by the C...</p><p><a href="https://b.hatena.ne.jp/entry/s/coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/"><img src="https://b.hatena.ne.jp/entry/image/https://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/" alt="はてなブックマーク - Challenging CSS Best Practices — Smashing Magazine" title="はてなブックマーク - Challenging CSS Best Practices — Smashing Magazine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 3 https://notnil-creative.com/blog/archives/1785 tekapo 2013-08-17T20:24:12Z フレームワーク CSS foundation <blockquote cite="https://notnil-creative.com/blog/archives/1785" title="Zurb Foundation 4 チートシート"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnotnil-creative.com%2Fblog%2Farchives%2F1785" alt="" /> <a href="https://notnil-creative.com/blog/archives/1785">Zurb Foundation 4 チートシート</a></cite><p><a href="https://notnil-creative.com/blog/archives/1785"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6648e46944b4bda71d9f0f38527ac1ea1c233d50/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fnotnil-creative.com%2Fapplication%2Ffiles%2F2314%2F4907%2F3602%2Fwpupload_2013_05_foundation4.jpg" alt="Zurb Foundation 4 チートシート" title="Zurb Foundation 4 チートシート" class="entry-image" /></a></p><p>CSSフレームワークとして、個人的にTwitter Bootstrapより断然注目しているZurb製のFoundation 4のまとめです。Bootstrapはウェブアプリ、ウェブサービス向けという感じがしますが、Foundationはウェブサイトに適していると思います。 今回はとりあえず使いはじめるためのガイドとして作成したもので、全ての機能を網羅...</p><p><a href="https://b.hatena.ne.jp/entry/s/notnil-creative.com/blog/archives/1785"><img src="https://b.hatena.ne.jp/entry/image/https://notnil-creative.com/blog/archives/1785" alt="はてなブックマーク - Zurb Foundation 4 チートシート" title="はてなブックマーク - Zurb Foundation 4 チートシート" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/notnil-creative.com/blog/archives/1785"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 47 https://kachibito.net/snippets/horizontal-subnav tekapo 2013-07-01T07:46:23Z CSS jQuery <blockquote cite="https://kachibito.net/snippets/horizontal-subnav" title="横長に降りるドロップダウンメニュー - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fsnippets%2Fhorizontal-subnav" alt="" /> <a href="https://kachibito.net/snippets/horizontal-subnav">横長に降りるドロップダウンメニュー - かちびと.net</a></cite><p><a href="https://kachibito.net/snippets/horizontal-subnav"><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="横長に降りるドロップダウンメニュー - かちびと.net" title="横長に降りるドロップダウンメニュー - かちびと.net" class="entry-image" /></a></p><p>Result jQuery $(document).ready(function() { //ホバーイベント $(&quot;ul#topnav li&quot;).hover(function() { //背景カラーを与える $(this).css({ &#39;background&#39;: &#39;#eee&#39; }); //li要素からspan要素を探して表示する $(this).find(&quot;span&quot;).show(); }, function() { //マウスが外れたら非表示に戻す $(this).css({ &#39;background...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/snippets/horizontal-subnav"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/snippets/horizontal-subnav" alt="はてなブックマーク - 横長に降りるドロップダウンメニュー - かちびと.net" title="はてなブックマーク - 横長に降りるドロップダウンメニュー - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/snippets/horizontal-subnav"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 6 http://www.css-lecture.com/log/css/052.html tekapo 2013-06-27T09:06:59Z CSS tips <blockquote cite="http://www.css-lecture.com/log/css/052.html" title="検索フォームをCSSでデザインするサンプル集 | CSS Lecture"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.css-lecture.com%2Flog%2Fcss%2F052.html" alt="" /> <a href="http://www.css-lecture.com/log/css/052.html">検索フォームをCSSでデザインするサンプル集 | CSS Lecture</a></cite><p><a href="http://www.css-lecture.com/log/css/052.html"><img src="" alt="検索フォームをCSSでデザインするサンプル集 | CSS Lecture" title="検索フォームをCSSでデザインするサンプル集 | CSS Lecture" class="entry-image" /></a></p><p>BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS BOS138 adalah bandar permainan digital yang menjadi destinasi Utama meraih maxwin dengan mudah di seluruh asia tenggara. Dapatkan bocoran spin barbar agar ikut kecipratan hoki dari para big bos!</p><p><a href="https://b.hatena.ne.jp/entry/www.css-lecture.com/log/css/052.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.css-lecture.com/log/css/052.html" alt="はてなブックマーク - 検索フォームをCSSでデザインするサンプル集 | CSS Lecture" title="はてなブックマーク - 検索フォームをCSSでデザインするサンプル集 | CSS Lecture" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.css-lecture.com/log/css/052.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 225 http://grad2.ecoloniq.jp/ tekapo 2013-05-17T04:52:33Z CSS generator グラデーション <blockquote cite="http://grad2.ecoloniq.jp/" title="CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fgrad2.ecoloniq.jp%2F" alt="" /> <a href="http://grad2.ecoloniq.jp/">CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor</a></cite><p><a href="http://grad2.ecoloniq.jp/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/00250da2bca91805e4c6722fd829a088e3e03b8d/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fgrad2.ecoloniq.jp%2Fimg%2Flogo.png" alt="CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor" title="CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor" class="entry-image" /></a></p><p>This domain may be for sale!</p><p><a href="https://b.hatena.ne.jp/entry/grad2.ecoloniq.jp/"><img src="https://b.hatena.ne.jp/entry/image/http://grad2.ecoloniq.jp/" alt="はてなブックマーク - CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor" title="はてなブックマーク - CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/grad2.ecoloniq.jp/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 201 http://bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/ tekapo 2013-05-03T11:52:14Z wordpress CSS <blockquote cite="http://bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/" title="WordPress：　投稿画像を長方形にフィットさせる処理"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fbren.jp%2F2013%2F05%2F03%2Fwordpress%25EF%25BC%259A%25E6%258A%2595%25E7%25A8%25BF%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E9%2595%25B7%25E6%2596%25B9%25E5%25BD%25A2%25E3%2581%25AB%25E3%2583%2595%25E3%2582%25A3%25E3%2583%2583%25E3%2583%2588%25E3%2581%2595%25E3%2581%259B%25E3%2582%258B%25E5%2587%25A6%25E7%2590%2586%2F" alt="" /> <a href="http://bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/">WordPress：　投稿画像を長方形にフィットさせる処理</a></cite><p><a href="http://bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/"><img src="" alt="WordPress：　投稿画像を長方形にフィットさせる処理" title="WordPress：　投稿画像を長方形にフィットさせる処理" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/"><img src="https://b.hatena.ne.jp/entry/image/http://bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/" alt="はてなブックマーク - WordPress：　投稿画像を長方形にフィットさせる処理" title="はてなブックマーク - WordPress：　投稿画像を長方形にフィットさせる処理" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/bren.jp/2013/05/03/wordpress%EF%BC%9A%E6%8A%95%E7%A8%BF%E7%94%BB%E5%83%8F%E3%82%92%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AB%E3%83%95%E3%82%A3%E3%83%83%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B%E5%87%A6%E7%90%86/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 http://idered.pl/editr/ tekapo 2013-04-30T01:26:09Z html javascript CSS Editor <blockquote cite="http://idered.pl/editr/" title="Aftermarket.pl :: domena idered.pl"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fidered.pl%2Feditr%2F" alt="" /> <a href="http://idered.pl/editr/">Aftermarket.pl :: domena idered.pl</a></cite><p><a href="http://idered.pl/editr/"><img src="" alt="Aftermarket.pl :: domena idered.pl" title="Aftermarket.pl :: domena idered.pl" class="entry-image" /></a></p><p>Domena idered.pl została zarejestrowana w serwisie Aftermarket.pl. Zainteresowany tą domeną? Jeśli chcesz skontaktować się z abonentem domeny idered.pl, naciśnij poniższy przycisk aby wysłać wiadomość: Kontakt z abonentem domeny » Czym jest Aftermarket.pl? To: Domeny internetowe: Aftermarket.pl t...</p><p><a href="https://b.hatena.ne.jp/entry/idered.pl/editr/"><img src="https://b.hatena.ne.jp/entry/image/http://idered.pl/editr/" alt="はてなブックマーク - Aftermarket.pl :: domena idered.pl" title="はてなブックマーク - Aftermarket.pl :: domena idered.pl" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/idered.pl/editr/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 55 http://forge.thethemefoundry.com/ tekapo 2013-03-02T12:16:54Z sass development theme coffeescript generator forge gem wordpress framework css <blockquote cite="http://forge.thethemefoundry.com/" title="Forge: Build WordPress themes with Sass"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fforge.thethemefoundry.com%2F" alt="" /> <a href="http://forge.thethemefoundry.com/">Forge: Build WordPress themes with Sass</a></cite><p><a href="http://forge.thethemefoundry.com/"><img src="" alt="Forge: Build WordPress themes with Sass" title="Forge: Build WordPress themes with Sass" class="entry-image" /></a></p><p>What is Forge? Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript. How does it work? Forge creates a neatly organized source folder with clean and simple scaffolding (base templat...</p><p><a href="https://b.hatena.ne.jp/entry/forge.thethemefoundry.com/"><img src="https://b.hatena.ne.jp/entry/image/http://forge.thethemefoundry.com/" alt="はてなブックマーク - Forge: Build WordPress themes with Sass" title="はてなブックマーク - Forge: Build WordPress themes with Sass" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/forge.thethemefoundry.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5