https://b.hatena.ne.jp/CLSmooth/CSS/ CSSに関するCLSmoothのはてなブックマーク (81) https://qiita.com/arowM/items/e1af320e2755461649a0 CLSmooth 2020-07-06T19:07:36Z css 技術 開発 ブラウザ <blockquote cite="https://qiita.com/arowM/items/e1af320e2755461649a0" title="現代開発者のためのCSS基礎技術 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FarowM%2Fitems%2Fe1af320e2755461649a0" alt="" /> <a href="https://qiita.com/arowM/items/e1af320e2755461649a0">現代開発者のためのCSS基礎技術 - Qiita</a></cite><p><a href="https://qiita.com/arowM/items/e1af320e2755461649a0"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/da6700b9f2ab558977d33132641470fe1e86470b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUU3JThGJUJFJUU0JUJCJUEzJUU5JTk2JThCJUU3JTk5JUJBJUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFQ1NTJUU1JTlGJUJBJUU3JUE0JThFJUU2JThBJTgwJUU4JUExJTkzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mODI0MDUzYzhjNDZiOTZkOThlNjIxODU0NTBjODk1ZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXJvd00mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTJiNmQzMmQ0MjNhNGJiMTQyNDRiNjFmMTgxMGZkZjFi%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7439bc386ba7a5a5fd0864a7f394365c" alt="現代開発者のためのCSS基礎技術 - Qiita" title="現代開発者のためのCSS基礎技術 - Qiita" class="entry-image" /></a></p><p>ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうま...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/arowM/items/e1af320e2755461649a0"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/arowM/items/e1af320e2755461649a0" alt="はてなブックマーク - 現代開発者のためのCSS基礎技術 - Qiita" title="はてなブックマーク - 現代開発者のためのCSS基礎技術 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/arowM/items/e1af320e2755461649a0"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 687 https://coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html CLSmooth 2020-07-06T18:09:50Z Chrome developer tool css ツール デザイン <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html" title="Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-overview-new-chrome-feature.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html">Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/875540ad58a14eb40ab4bc606d9672014ea75284/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020070410.png" alt="Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる" title="Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる" class="entry-image" /></a></p><p>Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html" alt="はてなブックマーク - Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる" title="はてなブックマーク - Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-overview-new-chrome-feature.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 498 https://chienomi.org/articles/technology/201910-web-font-settings.html CLSmooth 2020-01-30T16:47:37Z css フォント システム あとで読む <blockquote cite="https://chienomi.org/articles/technology/201910-web-font-settings.html" title="やめよう、CSSのシステムデフォルトフォント指定 - Chienomi"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fchienomi.org%2Farticles%2Ftechnology%2F201910-web-font-settings.html" alt="" /> <a href="https://chienomi.org/articles/technology/201910-web-font-settings.html">やめよう、CSSのシステムデフォルトフォント指定 - Chienomi</a></cite><p><a href="https://chienomi.org/articles/technology/201910-web-font-settings.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9e872ed8f7fa7d593844ecd1a48c74d23aaaac88/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fchienomi.org%2Fimg%2Fsite%2Fogp.png" alt="やめよう、CSSのシステムデフォルトフォント指定 - Chienomi" title="やめよう、CSSのシステムデフォルトフォント指定 - Chienomi" class="entry-image" /></a></p><p>序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかり...</p><p><a href="https://b.hatena.ne.jp/entry/s/chienomi.org/articles/technology/201910-web-font-settings.html"><img src="https://b.hatena.ne.jp/entry/image/https://chienomi.org/articles/technology/201910-web-font-settings.html" alt="はてなブックマーク - やめよう、CSSのシステムデフォルトフォント指定 - Chienomi" title="はてなブックマーク - やめよう、CSSのシステムデフォルトフォント指定 - Chienomi" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/chienomi.org/articles/technology/201910-web-font-settings.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 87 https://photoshopvip.net/109315 CLSmooth 2018-06-08T05:17:14Z css ライブラリ ツール <blockquote cite="https://photoshopvip.net/109315" title="超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphotoshopvip.net%2F109315" alt="" /> <a href="https://photoshopvip.net/109315">超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP</a></cite><p><a href="https://photoshopvip.net/109315"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e465a1dd74ef39795fc583edceefa69b8d5f7d58/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2018%2F06%2F50css-library-2018.jpg" alt="超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP" title="超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP" class="entry-image" /></a></p><p>ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用...</p><p><a href="https://b.hatena.ne.jp/entry/s/photoshopvip.net/109315"><img src="https://b.hatena.ne.jp/entry/image/https://photoshopvip.net/109315" alt="はてなブックマーク - 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP" title="はてなブックマーク - 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 | PhotoshopVIP" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/photoshopvip.net/109315"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 406 https://get.foundation/ CLSmooth 2017-09-15T12:25:04Z フレームワーク CSS <blockquote cite="https://get.foundation/" title="Foundation for Sites | The most advanced responsive front-end frameworks in the world."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fget.foundation%2F" alt="" /> <a href="https://get.foundation/">Foundation for Sites | The most advanced responsive front-end frameworks in the world.</a></cite><p><a href="https://get.foundation/"><img src="" alt="Foundation for Sites | The most advanced responsive front-end frameworks in the world." title="Foundation for Sites | The most advanced responsive front-end frameworks in the world." class="entry-image" /></a></p><p>Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, ...</p><p><a href="https://b.hatena.ne.jp/entry/s/get.foundation/"><img src="https://b.hatena.ne.jp/entry/image/https://get.foundation/" alt="はてなブックマーク - Foundation for Sites | The most advanced responsive front-end frameworks in the world." title="はてなブックマーク - Foundation for Sites | The most advanced responsive front-end frameworks in the world." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/get.foundation/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 537 http://fit-jp.com/cssheading20/ CLSmooth 2017-07-11T15:22:32Z CSS デザイン 見出し あとで読む <blockquote cite="http://fit-jp.com/cssheading20/" title="シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Ffit-jp.com%2Fcssheading20%2F" alt="" /> <a href="http://fit-jp.com/cssheading20/">シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選</a></cite><p><a href="http://fit-jp.com/cssheading20/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cda77856caaae94b90312bd958c3f1bfd4b4a339/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ffit-jp.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fcssheading.jpg" alt="シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選" title="シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選" class="entry-image" /></a></p><p>コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザイン...</p><p><a href="https://b.hatena.ne.jp/entry/fit-jp.com/cssheading20/"><img src="https://b.hatena.ne.jp/entry/image/http://fit-jp.com/cssheading20/" alt="はてなブックマーク - シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選" title="はてなブックマーク - シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/fit-jp.com/cssheading20/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 622 https://coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html CLSmooth 2017-06-27T05:55:49Z あとで読む CSS Chrome デバッグ 開発 <blockquote cite="https://coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html" title="知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbrowser%2Fchrome%2Fmastering-chrome-developer-tools.html" alt="" /> <a href="https://coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html">知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ</a></cite><p><a href="https://coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/77c93a1b973e169a94a36c07ea92139f3eaed296/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017062401.png" alt="知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ" title="知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ" class="entry-image" /></a></p><p>Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html" alt="はてなブックマーク - 知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ" title="はてなブックマーク - 知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/browser/chrome/mastering-chrome-developer-tools.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 708 https://webcode.tools/ CLSmooth 2017-05-31T09:43:55Z あとで読む html5 javascript CSS HTML webサービス <blockquote cite="https://webcode.tools/" title="The Ultimate Website Code Generator"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebcode.tools%2F" alt="" /> <a href="https://webcode.tools/">The Ultimate Website Code Generator</a></cite><p><a href="https://webcode.tools/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9272709fb7120dd574caa49499d2adb7ed2026db/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwebcode.tools%2Fimg%2Fog-share.jpg" alt="The Ultimate Website Code Generator" title="The Ultimate Website Code Generator" class="entry-image" /></a></p><p>Generate highly customizable CSS properties. Preview the results before copying them to your website.</p><p><a href="https://b.hatena.ne.jp/entry/s/webcode.tools/"><img src="https://b.hatena.ne.jp/entry/image/https://webcode.tools/" alt="はてなブックマーク - The Ultimate Website Code Generator" title="はてなブックマーク - The Ultimate Website Code Generator" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/webcode.tools/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 124 https://otiai10.hatenablog.com/entry/2017/05/30/161951 CLSmooth 2017-05-31T03:32:12Z CSS フレームワーク あとで読む <blockquote cite="https://otiai10.hatenablog.com/entry/2017/05/30/161951" title="CSS書きたくなさすぎ問題2017 - DRYな備忘録"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fotiai10.hatenablog.com%2Fentry%2F2017%2F05%2F30%2F161951" alt="" /> <a href="https://otiai10.hatenablog.com/entry/2017/05/30/161951">CSS書きたくなさすぎ問題2017 - DRYな備忘録</a></cite><p><a href="https://otiai10.hatenablog.com/entry/2017/05/30/161951"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/043d33bb0bdd9f6b18051266f7d312d25522160a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fa0eb1dc73739a59c7720fba3814f74055a28e0c0%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fo%252Fotiai10%252F20170530%252F20170530145913.png" alt="CSS書きたくなさすぎ問題2017 - DRYな備忘録" title="CSS書きたくなさすぎ問題2017 - DRYな備忘録" class="entry-image" /></a></p><p>css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - ...</p><p><a href="https://b.hatena.ne.jp/entry/s/otiai10.hatenablog.com/entry/2017/05/30/161951"><img src="https://b.hatena.ne.jp/entry/image/https://otiai10.hatenablog.com/entry/2017/05/30/161951" alt="はてなブックマーク - CSS書きたくなさすぎ問題2017 - DRYな備忘録" title="はてなブックマーク - CSS書きたくなさすぎ問題2017 - DRYな備忘録" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/otiai10.hatenablog.com/entry/2017/05/30/161951"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 806 https://saruwakakun.com/html-css/reference/css-sample CLSmooth 2017-05-22T03:40:46Z あとで読む CSS デザイン プログラミング <blockquote cite="https://saruwakakun.com/html-css/reference/css-sample" title="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsaruwakakun.com%2Fhtml-css%2Freference%2Fcss-sample" alt="" /> <a href="https://saruwakakun.com/html-css/reference/css-sample">コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）</a></cite><p><a href="https://saruwakakun.com/html-css/reference/css-sample"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/614583b9cabb03b14c6b559846163e763334018c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F05%2Fdadadada-01.png" alt="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" title="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" class="entry-image" /></a></p><p>サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLとCSSのコピペだけで使えるものです（いわゆる「スニペット」というものですね）。 サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に...</p><p><a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/css-sample"><img src="https://b.hatena.ne.jp/entry/image/https://saruwakakun.com/html-css/reference/css-sample" alt="はてなブックマーク - コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" title="はてなブックマーク - コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/css-sample"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 147 https://yuheiy.hatenablog.com/entry/2017/05/08/221206 CLSmooth 2017-05-12T08:01:58Z あとで読む Webデザイン javascript css <blockquote cite="https://yuheiy.hatenablog.com/entry/2017/05/08/221206" title="縦書きでレスポンシブなブログを作った - yuhei blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fyuheiy.hatenablog.com%2Fentry%2F2017%2F05%2F08%2F221206" alt="" /> <a href="https://yuheiy.hatenablog.com/entry/2017/05/08/221206">縦書きでレスポンシブなブログを作った - yuhei blog</a></cite><p><a href="https://yuheiy.hatenablog.com/entry/2017/05/08/221206"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cb82430264a971a2c2f708364dde1cf6cb195e73/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6653458415123252735%2F10328749687244221255%2F1495031433" alt="縦書きでレスポンシブなブログを作った - yuhei blog" title="縦書きでレスポンシブなブログを作った - yuhei blog" class="entry-image" /></a></p><p>趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦...</p><p><a href="https://b.hatena.ne.jp/entry/s/yuheiy.hatenablog.com/entry/2017/05/08/221206"><img src="https://b.hatena.ne.jp/entry/image/https://yuheiy.hatenablog.com/entry/2017/05/08/221206" alt="はてなブックマーク - 縦書きでレスポンシブなブログを作った - yuhei blog" title="はてなブックマーク - 縦書きでレスポンシブなブログを作った - yuhei blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/yuheiy.hatenablog.com/entry/2017/05/08/221206"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 118 http://ichimaruni-design.com/2015/01/viewport/ CLSmooth 2017-05-09T11:40:03Z webデザイン viewport CSS HTML レスポンシブ <blockquote cite="http://ichimaruni-design.com/2015/01/viewport/" title="เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fichimaruni-design.com%2F2015%2F01%2Fviewport%2F" alt="" /> <a href="http://ichimaruni-design.com/2015/01/viewport/">เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย</a></cite><p><a href="http://ichimaruni-design.com/2015/01/viewport/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a44f1c9575673a115a34eea76c82dca58c775c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fichimaruni-design.com%2Fwp-content%2Fuploads%2F2015%2F01%2Fmain.png" alt="เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย" title="เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย" class="entry-image" /></a></p><p>เว็บสล็อตโรม่า joker123 เป็นทางเลือกที่น่าเชื่อถือสำหรับผู้เล่นที่ต้องการความมั่นใจในการเดิมพันออนไลน์ ด้วยระบบความปลอดภัยระดับสูงและการตรวจสอบอย่างเข้มงวด คุณสามารถวางใจได้ว่าทุกการเล่นของคุณจะเป็นไปอย่างยุติธรรมและโปร่งใส เว็บไซต์นี้ได้รับการรับรองจากหน่วยงานที่เกี่ยวข้อง ทำให้คุณหมดกังวลเรื่องการโกงได้อย่างสิ้นเชิง เว็บสล็อตโรม่า joker123 สล็อตโรม่า นอกจากนี้ ทีม...</p><p><a href="https://b.hatena.ne.jp/entry/ichimaruni-design.com/2015/01/viewport/"><img src="https://b.hatena.ne.jp/entry/image/http://ichimaruni-design.com/2015/01/viewport/" alt="はてなブックマーク - เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย" title="はてなブックマーク - เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/ichimaruni-design.com/2015/01/viewport/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 66 https://web.dev/articles/responsive-web-design-basics?hl=ja CLSmooth 2017-05-03T13:47:45Z CSS viewport <blockquote cite="https://web.dev/articles/responsive-web-design-basics?hl=ja" title="レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fweb.dev%2Farticles%2Fresponsive-web-design-basics%3Fhl%3Dja" alt="" /> <a href="https://web.dev/articles/responsive-web-design-basics?hl=ja">レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev</a></cite><p><a href="https://web.dev/articles/responsive-web-design-basics?hl=ja"><img src="" alt="レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev" title="レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev" class="entry-image" /></a></p><p>インターネットを利用する携帯電話ユーザーの増加に伴い、さまざまな画面サイズに対応したコンテンツ レイアウトの重要性が高まっています。レスポンシブ ウェブ デザインは、もともと Ethan Marcotte が A List Apart で定義したもので、サイトのレイアウトをユーザーが使用しているデバイスに合わせて変更することで、...</p><p><a href="https://b.hatena.ne.jp/entry/s/web.dev/articles/responsive-web-design-basics?hl=ja"><img src="https://b.hatena.ne.jp/entry/image/https://web.dev/articles/responsive-web-design-basics?hl=ja" alt="はてなブックマーク - レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev" title="はてなブックマーク - レスポンシブ ウェブ デザインの基本  |  Articles  |  web.dev" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/web.dev/articles/responsive-web-design-basics?hl=ja"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 83 https://www.webprofessional.jp/responsive-css-patterns-without-media-queries/ CLSmooth 2017-03-28T15:59:12Z CSS テクニック レスポンシブ あとで読む <blockquote cite="https://www.webprofessional.jp/responsive-css-patterns-without-media-queries/" title="ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.webprofessional.jp%2Fresponsive-css-patterns-without-media-queries%2F" alt="" /> <a href="https://www.webprofessional.jp/responsive-css-patterns-without-media-queries/">ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト</a></cite><p><a href="https://www.webprofessional.jp/responsive-css-patterns-without-media-queries/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7a0b16e4b54564d532157bb6d145232b0eb36de4/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.webprofessional.jp%2Fwp-content%2Fuploads%2Fsites%2F2%2F2017%2F03%2F28130041%2F170328css-trick.jpg" alt="ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト" title="ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト" class="entry-image" /></a></p><p>WebPro KUSANAGI Security Editionが進化！ 新機能「SafeUpgrade」でダウンタイムゼロのnginxアップデートを実現 KUSANAGI Security Editionが新機能「KUSANAGI SafeUpgrade」を導入し、nginxのメジャーバージョンアップを無停⽌で実施可能にする。 0 0 WebPro 高速CMS基盤「KUSANAGI Security Edition」がMicrosoft Azu...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.webprofessional.jp/responsive-css-patterns-without-media-queries/"><img src="https://b.hatena.ne.jp/entry/image/https://www.webprofessional.jp/responsive-css-patterns-without-media-queries/" alt="はてなブックマーク - ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト" title="はてなブックマーク - ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.webprofessional.jp/responsive-css-patterns-without-media-queries/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 85 https://ics.media/entry/15130 CLSmooth 2017-03-13T14:58:31Z CSS CSS3 アニメーション あとで読む アイコン <blockquote cite="https://ics.media/entry/15130" title="CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F15130" alt="" /> <a href="https://ics.media/entry/15130">CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/15130"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4e8c34fca2ee16072b8af6941e860bccbf153143/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F15130%2Fimages%2Feyecatch.png" alt="CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA" title="CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA" class="entry-image" /></a></p><p>マイクロインタラクションは、ボタンのクリックやフォーム入力時のアテンションなど、ユーザーの行動によって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでウェブサイトやサービスの利用を手助けします。 たとえば、Xの「いいね」ボタンや、...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/15130"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/15130" alt="はてなブックマーク - CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA" title="はてなブックマーク - CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/15130"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 157 https://saruwakakun.com/html-css/reference/h-design CLSmooth 2017-03-08T05:30:23Z CSS まとめ あとで読む 見出し <blockquote cite="https://saruwakakun.com/html-css/reference/h-design" title="CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsaruwakakun.com%2Fhtml-css%2Freference%2Fh-design" alt="" /> <a href="https://saruwakakun.com/html-css/reference/h-design">CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選</a></cite><p><a href="https://saruwakakun.com/html-css/reference/h-design"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b6440577358a6f0a6a44de6309eaf7c81cac40df/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F03%2F00b91be2d05d9327463703fa9366b060.png" alt="CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選" title="CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選" class="entry-image" /></a></p><p>今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。</p><p><a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/h-design"><img src="https://b.hatena.ne.jp/entry/image/https://saruwakakun.com/html-css/reference/h-design" alt="はてなブックマーク - CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選" title="はてなブックマーク - CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/h-design"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1560 https://qiita.com/ryo_dg/items/f6f50365f663afca9f9d CLSmooth 2017-01-28T06:53:47Z あとで読む html gulp CSS <blockquote cite="https://qiita.com/ryo_dg/items/f6f50365f663afca9f9d" title="個人的フロントエンド開発環境2017 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fryo_dg%2Fitems%2Ff6f50365f663afca9f9d" alt="" /> <a href="https://qiita.com/ryo_dg/items/f6f50365f663afca9f9d">個人的フロントエンド開発環境2017 - Qiita</a></cite><p><a href="https://qiita.com/ryo_dg/items/f6f50365f663afca9f9d"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9e033b1d88e555a70f8eb1725c2ed898ad169ec0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTE5MzglMkZwcm9maWxlLWltYWdlcyUyRjE3MTEzNDI2MTA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjdmNjk1MDg5ZTk3ZDczMTIxYmM3NjQyZWYzNDQ1YTg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D3f3d7c01ced0db11b02176cd7cf0f492%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU1JTgwJThCJUU0JUJBJUJBJUU3JTlBJTg0JUUzJTgzJTk1JUUzJTgzJUFEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgzJTg5JUU5JTk2JThCJUU3JTk5JUJBJUU3JTkyJUIwJUU1JUEyJTgzMjAxNyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQ2MGZiMjMxOWE0M2M0NGI3NzU1Nzc0ZDY3YTQ1MzQx%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByeW9fZGcmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yMGQ0ZTRjMmY5ODY3YWExMjI1MmU0OTRhZGY4MDllOA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dbaaf370e1782d7f3d146adda7d0b19c7" alt="個人的フロントエンド開発環境2017 - Qiita" title="個人的フロントエンド開発環境2017 - Qiita" class="entry-image" /></a></p><p>2017年版、オレオレフロントエンド開発環境です。 前提条件 ここでいうフロントエンド開発とは、ペライチ、もしくは数ページから数十ページのWebサイトのこと サーバサイドとやりとりなどはあまりなく、ランディングページやキャンペーンサイト、コーポレートサイトをよく実装する 構成 まず、ざっくりと構成です。 HTML...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/ryo_dg/items/f6f50365f663afca9f9d"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/ryo_dg/items/f6f50365f663afca9f9d" alt="はてなブックマーク - 個人的フロントエンド開発環境2017 - Qiita" title="はてなブックマーク - 個人的フロントエンド開発環境2017 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/ryo_dg/items/f6f50365f663afca9f9d"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 67 https://qiita.com/ithat_me/items/28ad2862cf542b066ac4 CLSmooth 2016-12-31T18:39:05Z CSS テクニック あとで読む <blockquote cite="https://qiita.com/ithat_me/items/28ad2862cf542b066ac4" title="大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fithat_me%2Fitems%2F28ad2862cf542b066ac4" alt="" /> <a href="https://qiita.com/ithat_me/items/28ad2862cf542b066ac4">大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita</a></cite><p><a href="https://qiita.com/ithat_me/items/28ad2862cf542b066ac4"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e5b9d3c8412f64c216db923a578faed7b24ef19a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTUxMjIwJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTEzMzkxMjIzP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz04ZWM3NTY5OWQwMmFkYzViZTBjOTlhYTBmZmVjYjY5YQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df51a3c46595e731b9919b409b86c23c4%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU1JUE0JUE3JUU1JUFEJUE2JUUzJTgzJThFJUUzJTgzJUJDJUUzJTgzJTg4JUVGJUJDJTg4JUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgyJUJBJUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTk1JUVGJUJDJTg5JUUzJTgyJTkyJUUzJTgzJUEyJUUzJTgzJTgxJUUzJTgzJUJDJUUzJTgzJTk1JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJTlGJUU2JTg5JThCJUU2JTlCJUI4JUUzJTgxJThEJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgzJThFJUUzJTgzJUJDJUUzJTgzJTg4JUU5JUEyJUE4V2ViJUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg4JUUzJTgyJTkyJUU1JTg4JUI2JUU0JUJEJTlDJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFCJUU0JUJEJUJGJUU3JTk0JUE4JUUzJTgxJTk3JUUzJTgxJTlGQyVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWY4OWI4NmNmZTQxMWFkNzM0MDQ4MTY5Nzg3YzkzOTNk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0YWthbW9zbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTMyYzMzOGY4MDM4ZTdiMTA2MTE4OWZhM2E3YThmODIx%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D773a14f1094ddd214778c829a2572a24" alt="大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita" title="大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita" class="entry-image" /></a></p><p>まとめノート風Webサイトを作ろうとしたきっかけ 本当はWeb制作本を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログでフラットデザインが使われていますね。Qiitaもその１つだと思います。フラ...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/ithat_me/items/28ad2862cf542b066ac4"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/ithat_me/items/28ad2862cf542b066ac4" alt="はてなブックマーク - 大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita" title="はてなブックマーク - 大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/ithat_me/items/28ad2862cf542b066ac4"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 104 https://popinsight.jp/blog/?p=49116 CLSmooth 2016-08-18T06:35:44Z あとで読む CSS webデザイン <blockquote cite="https://popinsight.jp/blog/?p=49116" title="マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fpopinsight.jp%2Fblog%2F%3Fp%3D49116" alt="" /> <a href="https://popinsight.jp/blog/?p=49116">マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト</a></cite><p><a href="https://popinsight.jp/blog/?p=49116"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/41a159a63eab50ae0c64e42378143b09525dcb12/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fpopinsight.jp%2Fwp-content%2Fuploads%2F2021%2F03%2Fpopinsight-og-image.png" alt="マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト" title="マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト" class="entry-image" /></a></p><p>マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるよう...</p><p><a href="https://b.hatena.ne.jp/entry/s/popinsight.jp/blog/?p=49116"><img src="https://b.hatena.ne.jp/entry/image/https://popinsight.jp/blog/?p=49116" alt="はてなブックマーク - マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト" title="はてなブックマーク - マテリアルデザインのサイトを簡単に作るためのフレームワーク８選 - ポップインサイト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/popinsight.jp/blog/?p=49116"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 157 https://qiita.com/hc0208/items/1d3b505ca3626d0f4c68 CLSmooth 2016-05-02T15:54:57Z web webデザイン あとで読む デザイン CSS html <blockquote cite="https://qiita.com/hc0208/items/1d3b505ca3626d0f4c68" title="非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fhc0208%2Fitems%2F1d3b505ca3626d0f4c68" alt="" /> <a href="https://qiita.com/hc0208/items/1d3b505ca3626d0f4c68">非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita</a></cite><p><a href="https://qiita.com/hc0208/items/1d3b505ca3626d0f4c68"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9f1ce144380920ba52417faae0618086e9573aaf/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGOTQ1MDglMkZwcm9maWxlLWltYWdlcyUyRjE1NzAzMzgyNjI_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTYxODRiZjQ1MzE3MWMxMzY5OTdiZDFkMDNkZjM2YzEx%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da4a69d874b70279ce0d6866a06de24dc%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JUU5JTlEJTlFJUUzJTgzJTg3JUUzJTgyJUI2JUUzJTgyJUE0JUUzJTgzJThBJUUzJTgzJUJDJUUzJTgxJThDV2ViJUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg4JUUzJTgyJTkyJUUzJTgxJThBJUUzJTgxJTk3JUUzJTgyJTgzJUUzJTgyJThDJUUzJTgxJUFCJUU0JUJEJTlDJUUzJTgyJThCJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFCJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgxJTkzJUUzJTgxJUE4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YTBjNTJkMDg4ODQwMTMwOGNlMjYyOTVlNjUzNjVlM2M%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBoYzAyMDgmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0xNzljZWM0Njc3MzBhZjE3ZDEwMDkwMWY5ZmIwZmRmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D576aa97f85756b533a554db131233773" alt="非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita" title="非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita" class="entry-image" /></a></p><p>はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきな...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/hc0208/items/1d3b505ca3626d0f4c68"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/hc0208/items/1d3b505ca3626d0f4c68" alt="はてなブックマーク - 非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita" title="はてなブックマーク - 非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/hc0208/items/1d3b505ca3626d0f4c68"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 325