https://b.hatena.ne.jp/System/css/ cssに関するSystemのはてなブックマーク (59) https://gihyo.jp/book/2024/978-4-297-14546-0 System 2024-10-22T01:15:37Z css DOM ブラウザ html javascript HTTP 366 <blockquote cite="https://gihyo.jp/book/2024/978-4-297-14546-0" title="［作って学ぶ］ブラウザのしくみ | 技術評論社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fbook%2F2024%2F978-4-297-14546-0" alt="" /> <a href="https://gihyo.jp/book/2024/978-4-297-14546-0">［作って学ぶ］ブラウザのしくみ | 技術評論社</a></cite><p><a href="https://gihyo.jp/book/2024/978-4-297-14546-0"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4a57a86ddc0916b46aab13379fdd8aabf33195d0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2Fogp%2F2024%2F9784297145460.jpg" alt="［作って学ぶ］ブラウザのしくみ | 技術評論社" title="［作って学ぶ］ブラウザのしくみ | 技術評論社" class="entry-image" /></a></p><p>概要 Webブラウザは、開発者にとってもユーザーにとっても、もはや日常の一部となっているほど身近なソフトウエアですが、近年のブラウザはあまりにも高機能かつ巨大になってしまったため、その仕組みを詳しく理解することは困難です。そこで、シンプルなブラウザをRustを用いて実装することによって、ブラウザ上でWebサ...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/book/2024/978-4-297-14546-0"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/book/2024/978-4-297-14546-0" alt="はてなブックマーク - ［作って学ぶ］ブラウザのしくみ | 技術評論社" title="はてなブックマーク - ［作って学ぶ］ブラウザのしくみ | 技術評論社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/book/2024/978-4-297-14546-0"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html System 2021-05-05T08:04:48Z テンプレート html html5 css js 解説 840 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html" title="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fhtml-boilerplate-by-mmatuzo.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html">最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8a89b932efa78d11869d748845a189ff799214b7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202102%2F2021042701%402x.png" alt="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" title="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" class="entry-image" /></a></p><p>最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel=&quot;preload&quot;なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごと...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html" alt="はてなブックマーク - 最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" title="はてなブックマーク - 最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://vivliostyle.org/ja/ System 2020-10-15T00:44:19Z css WEB 電子書籍 PDF html 117 <blockquote cite="https://vivliostyle.org/ja/" title="Vivliostyle — 楽しく CSS 組版！"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fvivliostyle.org%2Fja%2F" alt="" /> <a href="https://vivliostyle.org/ja/">Vivliostyle — 楽しく CSS 組版！</a></cite><p><a href="https://vivliostyle.org/ja/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9c88844c74cb6ca676ddf681638d90df827157be/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fvivliostyle.org%2Fassets%2Fdefault-social-image.png" alt="Vivliostyle — 楽しく CSS 組版！" title="Vivliostyle — 楽しく CSS 組版！" class="entry-image" /></a></p><p>CSS Typesetting 最新 Web 標準技術により、電子出版や Web 出版のための 新しい組版システムを作るオープンソース・プロジェクト</p><p><a href="https://b.hatena.ne.jp/entry/s/vivliostyle.org/ja/"><img src="https://b.hatena.ne.jp/entry/image/https://vivliostyle.org/ja/" alt="はてなブックマーク - Vivliostyle — 楽しく CSS 組版！" title="はてなブックマーク - Vivliostyle — 楽しく CSS 組版！" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/vivliostyle.org/ja/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://postd.cc/blazing-fast-html-virtual-dom-in-elm/ System 2014-12-04T03:07:05Z elm DOM javascript CSS 124 <blockquote cite="https://postd.cc/blazing-fast-html-virtual-dom-in-elm/" title="爆速HTML – Elmでの仮想DOM | POSTD"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fpostd.cc%2Fblazing-fast-html-virtual-dom-in-elm%2F" alt="" /> <a href="https://postd.cc/blazing-fast-html-virtual-dom-in-elm/">爆速HTML – Elmでの仮想DOM | POSTD</a></cite><p><a href="https://postd.cc/blazing-fast-html-virtual-dom-in-elm/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5d9b4969b723529aa8a11a978d25ea3ab2fd90e6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fpostd.cc%2Fwp%2Fwp-content%2Fuploads%2F2014%2F08%2FsampleResults.png" alt="爆速HTML – Elmでの仮想DOM | POSTD" title="爆速HTML – Elmでの仮想DOM | POSTD" class="entry-image" /></a></p><p>新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？　Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに...</p><p><a href="https://b.hatena.ne.jp/entry/s/postd.cc/blazing-fast-html-virtual-dom-in-elm/"><img src="https://b.hatena.ne.jp/entry/image/https://postd.cc/blazing-fast-html-virtual-dom-in-elm/" alt="はてなブックマーク - 爆速HTML – Elmでの仮想DOM | POSTD" title="はてなブックマーク - 爆速HTML – Elmでの仮想DOM | POSTD" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/postd.cc/blazing-fast-html-virtual-dom-in-elm/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://elm-lang.org/ System 2014-12-04T03:03:15Z javascript css elm programming haskell functional 230 <blockquote cite="https://elm-lang.org/" title="Elm - delightful language for reliable web applications"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Felm-lang.org%2F" alt="" /> <a href="https://elm-lang.org/">Elm - delightful language for reliable web applications</a></cite><p><a href="https://elm-lang.org/"><img src="" alt="Elm - delightful language for reliable web applications" title="Elm - delightful language for reliable web applications" class="entry-image" /></a></p><p>Elm uses type inference to detect corner cases and give friendly hints. NoRedInk switched to Elm about four years ago, and 300k+ lines later, they still have not had to scramble to fix a confusing runtime exception in production. Learn more. -- TYPE MISMATCH ---------------------------- Main.elm ...</p><p><a href="https://b.hatena.ne.jp/entry/s/elm-lang.org/"><img src="https://b.hatena.ne.jp/entry/image/https://elm-lang.org/" alt="はてなブックマーク - Elm - delightful language for reliable web applications" title="はてなブックマーク - Elm - delightful language for reliable web applications" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/elm-lang.org/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://doloopwhile.hatenablog.com/entry/2014/12/01/200000 System 2014-12-04T02:58:48Z html CSS js コンパイル Haskell 92 <blockquote cite="https://doloopwhile.hatenablog.com/entry/2014/12/01/200000" title="Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdoloopwhile.hatenablog.com%2Fentry%2F2014%2F12%2F01%2F200000" alt="" /> <a href="https://doloopwhile.hatenablog.com/entry/2014/12/01/200000">Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None</a></cite><p><a href="https://doloopwhile.hatenablog.com/entry/2014/12/01/200000"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4419055a23602bce1e2303f87486fd08f0ce9d33/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F7725cf5d84454467ffeca9b38c42385ab25842a8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdoloopwhile%252F20141129%252F20141129182134.png" alt="Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None" title="Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None" class="entry-image" /></a></p><p>これはElm Advent Calendar 2014の1日目です。 Elmはクライアントサイド向けの関数型言語です。一体どんな言語なのでしょうか？ 1. HTML/CSS/JSにコンパイルされる ElmはHTML/CSS/JSにコンパイルして使用します。 この辺はJavaScriptにコンパイルされるAltJSに似ています。 AltJS同様、Elmも特別なランタイムライブラリ...</p><p><a href="https://b.hatena.ne.jp/entry/s/doloopwhile.hatenablog.com/entry/2014/12/01/200000"><img src="https://b.hatena.ne.jp/entry/image/https://doloopwhile.hatenablog.com/entry/2014/12/01/200000" alt="はてなブックマーク - Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None" title="はてなブックマーク - Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】 - None is None is None" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/doloopwhile.hatenablog.com/entry/2014/12/01/200000"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/ System 2014-03-05T14:55:07Z css svg 11 <blockquote cite="https://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/" title="Rethinking Responsive SVG — Smashing Magazine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoding.smashingmagazine.com%2F2014%2F03%2F05%2Frethinking-responsive-svg%2F" alt="" /> <a href="https://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/">Rethinking Responsive SVG — Smashing Magazine</a></cite><p><a href="https://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/722cec09429694779ccc584cba04f9062cc679d6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Farchive.smashing.media%2Fassets%2F344dbf88-fdf9-42bb-adb4-46f01eedd629%2F70500a1e-cda3-403a-b6b3-4ccf24526101%2Frethinking-responsive-svg.png" alt="Rethinking Responsive SVG — Smashing Magazine" title="Rethinking Responsive SVG — Smashing Magazine" class="entry-image" /></a></p><p>Responsive SVG icons can be used in a lot of ways. In this article, Ilya Pukhalski digs deeper into Joe Harrison’s responsive icons technique and explores what can be done with SVGs. If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/"><img src="https://b.hatena.ne.jp/entry/image/https://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/" alt="はてなブックマーク - Rethinking Responsive SVG — Smashing Magazine" title="はてなブックマーク - Rethinking Responsive SVG — Smashing Magazine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html System 2014-03-05T02:11:42Z WEB コンパイル javascript CSS インストール CoffeeScript ツール テスト 577 <blockquote cite="https://atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html" title="ブラックなWeb開発現場の救世主、Gruntのインストールと使い方"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fatmarkit.itmedia.co.jp%2Fait%2Farticles%2F1403%2F04%2Fnews020.html" alt="" /> <a href="https://atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html">ブラックなWeb開発現場の救世主、Gruntのインストールと使い方</a></cite><p><a href="https://atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/49656f824e1aedbcf43175f097424ca0519ea201/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fimage.itmedia.co.jp%2Fimages%2Flogo%2F1200x630_500x500_ait.gif" alt="ブラックなWeb開発現場の救世主、Gruntのインストールと使い方" title="ブラックなWeb開発現場の救世主、Gruntのインストールと使い方" class="entry-image" /></a></p><p>連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともある...</p><p><a href="https://b.hatena.ne.jp/entry/s/atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html"><img src="https://b.hatena.ne.jp/entry/image/https://atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html" alt="はてなブックマーク - ブラックなWeb開発現場の救世主、Gruntのインストールと使い方" title="はてなブックマーク - ブラックなWeb開発現場の救世主、Gruntのインストールと使い方" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/atmarkit.itmedia.co.jp/ait/articles/1403/04/news020.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://codezine.jp/article/detail/7522 System 2013-12-12T06:41:43Z Sass CSS 90 <blockquote cite="https://codezine.jp/article/detail/7522" title="CSS拡張メタ言語「Sass」の概要と導入手順"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcodezine.jp%2Farticle%2Fdetail%2F7522" alt="" /> <a href="https://codezine.jp/article/detail/7522">CSS拡張メタ言語「Sass」の概要と導入手順</a></cite><p><a href="https://codezine.jp/article/detail/7522"><img src="" alt="CSS拡張メタ言語「Sass」の概要と導入手順" title="CSS拡張メタ言語「Sass」の概要と導入手順" class="entry-image" /></a></p><p>CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。</p><p><a href="https://b.hatena.ne.jp/entry/s/codezine.jp/article/detail/7522"><img src="https://b.hatena.ne.jp/entry/image/https://codezine.jp/article/detail/7522" alt="はてなブックマーク - CSS拡張メタ言語「Sass」の概要と導入手順" title="はてなブックマーク - CSS拡張メタ言語「Sass」の概要と導入手順" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/codezine.jp/article/detail/7522"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://getuikit.com/ System 2013-07-30T04:20:08Z github CSS WEB webデザイン js 193 <blockquote cite="https://getuikit.com/" title="UIkit"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgetuikit.com%2F" alt="" /> <a href="https://getuikit.com/">UIkit</a></cite><p><a href="https://getuikit.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0d86b320762a25fafa5ea771d9b6ad5e2f04a22f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgetuikit.com%2Fimages%2Fuikit-meta.png" alt="UIkit" title="UIkit" class="entry-image" /></a></p><p>UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.</p><p><a href="https://b.hatena.ne.jp/entry/s/getuikit.com/"><img src="https://b.hatena.ne.jp/entry/image/https://getuikit.com/" alt="はてなブックマーク - UIkit" title="はてなブックマーク - UIkit" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/getuikit.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://developers.google.com/speed/libraries?hl=ja System 2013-06-17T09:21:18Z jQuery API JavaScript Google CSS Web制作 95 <blockquote cite="https://developers.google.com/speed/libraries?hl=ja" title="Google Libraries API"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdevelopers.google.com%2Fspeed%2Flibraries%3Fhl%3Dja" alt="" /> <a href="https://developers.google.com/speed/libraries?hl=ja">Google Libraries API</a></cite><p><a href="https://developers.google.com/speed/libraries?hl=ja"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9f0bee8f535394e667568d5b57442d301fcac6a6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.gstatic.com%2Fdevrel-devsite%2Fprod%2Fva0c14339cfd6d9ab177114d5825fc3f29dc166d5e178822c1d1efe7d037760a4%2Fdevelopers%2Fimages%2Fopengraph%2Fgoogle-blue.png" alt="Google Libraries API" title="Google Libraries API" class="entry-image" /></a></p><p>Google Hosted Libraries は、最も人気のあるオープンソースの JavaScript ライブラリ向けの、安定した信頼性の高い高速のグローバル コンテンツ配信ネットワークです。 Google は、各ライブラリの取り組みの主要な関係者と直接連携し、リリースされた最新バージョンをそのまま受け入れます。 ライブラリ ホストされてい...</p><p><a href="https://b.hatena.ne.jp/entry/s/developers.google.com/speed/libraries?hl=ja"><img src="https://b.hatena.ne.jp/entry/image/https://developers.google.com/speed/libraries?hl=ja" alt="はてなブックマーク - Google Libraries API" title="はてなブックマーク - Google Libraries API" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/developers.google.com/speed/libraries?hl=ja"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.slideshare.net/slideshow/ss-15915390/15915390 System 2013-01-10T03:01:37Z CSS パフォーマンス webサービス 高速化 561 <blockquote cite="https://www.slideshare.net/slideshow/ss-15915390/15915390" title="設計から実装まで、今すぐ始める高速化"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fss-15915390%2F15915390" alt="" /> <a href="https://www.slideshare.net/slideshow/ss-15915390/15915390">設計から実装まで、今すぐ始める高速化</a></cite><p><a href="https://www.slideshare.net/slideshow/ss-15915390/15915390"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c83a74720ba0a681045002cf413abd824d4ad995/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fcssnite-lp23-komori-130109043631-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds" alt="設計から実装まで、今すぐ始める高速化" title="設計から実装まで、今すぐ始める高速化" class="entry-image" /></a></p><p>悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）</p><p><a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/ss-15915390/15915390"><img src="https://b.hatena.ne.jp/entry/image/https://www.slideshare.net/slideshow/ss-15915390/15915390" alt="はてなブックマーク - 設計から実装まで、今すぐ始める高速化" title="はてなブックマーク - 設計から実装まで、今すぐ始める高速化" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/ss-15915390/15915390"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ginpen.com/2012/12/05/css-box-model/ System 2012-12-06T04:29:37Z CSS 644 <blockquote cite="https://ginpen.com/2012/12/05/css-box-model/" title="width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fginpen.com%2F2012%2F12%2F05%2Fcss-box-model%2F" alt="" /> <a href="https://ginpen.com/2012/12/05/css-box-model/">width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com</a></cite><p><a href="https://ginpen.com/2012/12/05/css-box-model/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3e3b3224eab03de76ac5b0fcafdad65204a38170/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fginpen.com%2Fwp-content%2Fthemes%2Fginpen-theme%2Fimg%2Ficon-512.png" alt="width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com" title="width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com" class="entry-image" /></a></p><p>CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 po...</p><p><a href="https://b.hatena.ne.jp/entry/s/ginpen.com/2012/12/05/css-box-model/"><img src="https://b.hatena.ne.jp/entry/image/https://ginpen.com/2012/12/05/css-box-model/" alt="はてなブックマーク - width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com" title="はてなブックマーク - width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ginpen.com/2012/12/05/css-box-model/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/ System 2012-10-09T01:11:03Z facebook Google 情報 Adobe microsoft Apple html5 css 249 <blockquote cite="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/" title="TechCrunch | Startup and Technology News"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjp.techcrunch.com%2F2012%2F10%2F09%2F20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site%2F" alt="" /> <a href="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/">TechCrunch | Startup and Technology News</a></cite><p><a href="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae4c41fd8bdfb0a40f6e1e45309b727b8d5cee4e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechcrunch.com%2Fwp-content%2Fuploads%2F2018%2F04%2Ftc-logo-2018-square-reverse2x.png" alt="TechCrunch | Startup and Technology News" title="TechCrunch | Startup and Technology News" class="entry-image" /></a></p><p>Limited space! Get on waitlist to be the first to know when tickets go live!</p><p><a href="https://b.hatena.ne.jp/entry/s/jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://b.hatena.ne.jp/entry/image/https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/" alt="はてなブックマーク - TechCrunch | Startup and Technology News" title="はてなブックマーク - TechCrunch | Startup and Technology News" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.koikikukan.com/archives/2012/05/11-012345.php System 2012-09-04T06:23:05Z HTTP js CSS Google 330 <blockquote cite="https://www.koikikukan.com/archives/2012/05/11-012345.php" title="HTMLやCSSでのプロトコル表記（http:、https:）の省略について"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.koikikukan.com%2Farchives%2F2012%2F05%2F11-012345.php" alt="" /> <a href="https://www.koikikukan.com/archives/2012/05/11-012345.php">HTMLやCSSでのプロトコル表記（http:、https:）の省略について</a></cite><p><a href="https://www.koikikukan.com/archives/2012/05/11-012345.php"><img src="" alt="HTMLやCSSでのプロトコル表記（http:、https:）の省略について" title="HTMLやCSSでのプロトコル表記（http:、https:）の省略について" class="entry-image" /></a></p><p>HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプ...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.koikikukan.com/archives/2012/05/11-012345.php"><img src="https://b.hatena.ne.jp/entry/image/https://www.koikikukan.com/archives/2012/05/11-012345.php" alt="はてなブックマーク - HTMLやCSSでのプロトコル表記（http:、https:）の省略について" title="はてなブックマーク - HTMLやCSSでのプロトコル表記（http:、https:）の省略について" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.koikikukan.com/archives/2012/05/11-012345.php"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.chrome-life.com/html5/5447/ System 2012-07-11T04:34:47Z HTML5 エディタ ブラウザ コーディング CSS CSS3 javascript 899 <blockquote cite="http://www.chrome-life.com/html5/5447/" title="chrome-life.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.chrome-life.com%2Fhtml5%2F5447%2F" alt="" /> <a href="http://www.chrome-life.com/html5/5447/">chrome-life.com</a></cite><p><a href="http://www.chrome-life.com/html5/5447/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/609b5a55e975f6514f7d69e6efe7a80dcd5d2d84/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fcontents.liveout.co.jp%2Fchrome-life%2Fwp-content%2Fuploads%2F2012%2F07%2FLiveweave-HTML5-CSS3-JavaScript-playground-for-web-developers-and-designers.jpg" alt="chrome-life.com" title="chrome-life.com" class="entry-image" /></a></p><p>Click here to enter</p><p><a href="https://b.hatena.ne.jp/entry/www.chrome-life.com/html5/5447/"><img src="https://b.hatena.ne.jp/entry/image/http://www.chrome-life.com/html5/5447/" alt="はてなブックマーク - chrome-life.com" title="はてなブックマーク - chrome-life.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.chrome-life.com/html5/5447/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kudakurage.hatenadiary.com/entry/20090629/1246245252 System 2012-06-22T08:50:46Z 画像 CSS リサイズ 74 <blockquote cite="https://kudakurage.hatenadiary.com/entry/20090629/1246245252" title="画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkudakurage.hatenadiary.com%2Fentry%2F20090629%2F1246245252" alt="" /> <a href="https://kudakurage.hatenadiary.com/entry/20090629/1246245252">画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ</a></cite><p><a href="https://kudakurage.hatenadiary.com/entry/20090629/1246245252"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0c09f8739c812a55b6a7c8526f3f5ced81c7c5ae/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704346814673997063%2F6435922169448017976%2F1358965407" alt="画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ" title="画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ" class="entry-image" /></a></p><p>よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。 要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。 こんな感じ &lt;style type=&quot;text/c...</p><p><a href="https://b.hatena.ne.jp/entry/s/kudakurage.hatenadiary.com/entry/20090629/1246245252"><img src="https://b.hatena.ne.jp/entry/image/https://kudakurage.hatenadiary.com/entry/20090629/1246245252" alt="はてなブックマーク - 画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ" title="はてなブックマーク - 画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kudakurage.hatenadiary.com/entry/20090629/1246245252"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://lab.hakim.se/scroll-effects/ System 2012-04-17T02:46:05Z CSS javascript webデザイン CSS3 HTML5 680 <blockquote cite="https://lab.hakim.se/scroll-effects/" title="stroll.js - CSS3 Scroll Effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flab.hakim.se%2Fscroll-effects%2F" alt="" /> <a href="https://lab.hakim.se/scroll-effects/">stroll.js - CSS3 Scroll Effects</a></cite><p><a href="https://lab.hakim.se/scroll-effects/"><img src="" alt="stroll.js - CSS3 Scroll Effects" title="stroll.js - CSS3 Scroll Effects" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/scroll-effects/"><img src="https://b.hatena.ne.jp/entry/image/https://lab.hakim.se/scroll-effects/" alt="はてなブックマーク - stroll.js - CSS3 Scroll Effects" title="はてなブックマーク - stroll.js - CSS3 Scroll Effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/scroll-effects/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kachibito.net/web-design/ingrid.html System 2012-03-28T04:55:39Z フレームワーク css Webデザイン 305 <blockquote cite="https://kachibito.net/web-design/ingrid.html" title="著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2Fingrid.html" alt="" /> <a href="https://kachibito.net/web-design/ingrid.html">著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/ingrid.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ed95967405f96f85354872a7d555e436da2be977/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2012%2F03%2Ftrd.jpg" alt="著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net" title="著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net" class="entry-image" /></a></p><p>この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルで良さそうだったのでメモ。 パブリックドメインのCSSフレームワ ークです。レスポンシブWebデザイン にも対応していますし、グリッドレイ アウトにも利用出来るのでなかなか ...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/ingrid.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/ingrid.html" alt="はてなブックマーク - 著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net" title="はてなブックマーク - 著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/ingrid.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://phpspot.org/blog/archives/2012/03/phpyui_css_comp.html System 2012-03-28T02:07:03Z CSS PHP YUI 25 <blockquote cite="https://phpspot.org/blog/archives/2012/03/phpyui_css_comp.html" title="PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2012%2F03%2Fphpyui_css_comp.html" alt="" /> <a href="https://phpspot.org/blog/archives/2012/03/phpyui_css_comp.html">PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2012/03/phpyui_css_comp.html"><img src="" alt="PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌" title="PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌" class="entry-image" /></a></p><p>PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 2012年03月28日- tubalmartin/YUI-CSS-compressor-PHP-port GitHub PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 YUIというとJavaというイメージがありますが、PHPベースでお手軽に使えるのがこちら。 残念ながらJavaScriptは対応して...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2012/03/phpyui_css_comp.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2012/03/phpyui_css_comp.html" alt="はてなブックマーク - PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌" title="はてなブックマーク - PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2012/03/phpyui_css_comp.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>