https://b.hatena.ne.jp/moerrari/CSS/ CSSに関するmoerrariのはてなブックマーク (23) https://lab.syncer.jp/Web/CSS/Snippet/11/ 2017年では簡単になった？pre要素にwhite-space: pre-wrap; を指定。FirefoxやSafariのリーダービュー(リーダー表示)でも有効なのかは未確認。 moerrari 2018-03-13T03:09:28Z css <blockquote cite="https://lab.syncer.jp/Web/CSS/Snippet/11/" title="pre要素で折り返し改行させる方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flab.syncer.jp%2FWeb%2FCSS%2FSnippet%2F11%2F" alt="" /> <a href="https://lab.syncer.jp/Web/CSS/Snippet/11/">pre要素で折り返し改行させる方法</a></cite><p><a href="https://lab.syncer.jp/Web/CSS/Snippet/11/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7dad7e0d89dbd64eb5426fbf5a9ad07db34d55e3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Flab.syncer.jp%2FWeb%2FCSS%2FSnippet%2Fopengraph.png" alt="pre要素で折り返し改行させる方法" title="pre要素で折り返し改行させる方法" class="entry-image" /></a></p><p>2017/06/22 pre要素は通常だと右端で改行されません。改行させるようにするには、white-spaceプロパティにpre-wrapを指定します。 サンプルコードpre要素はデフォルトでwhite-space: preのスタイルが付きます。これは、端での折り返しに対応していません。pre-wrapに変更してあげましょう。 pre { white-space: pre-wrap...</p><p><a href="https://b.hatena.ne.jp/entry/s/lab.syncer.jp/Web/CSS/Snippet/11/"><img src="https://b.hatena.ne.jp/entry/image/https://lab.syncer.jp/Web/CSS/Snippet/11/" alt="はてなブックマーク - pre要素で折り返し改行させる方法" title="はてなブックマーク - pre要素で折り返し改行させる方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/lab.syncer.jp/Web/CSS/Snippet/11/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://sho.tdiary.net/20050922.html moerrari 2017-09-10T13:55:25Z css <blockquote cite="https://sho.tdiary.net/20050922.html" title="CSSで「折り返す」pre"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsho.tdiary.net%2F20050922.html" alt="" /> <a href="https://sho.tdiary.net/20050922.html">CSSで「折り返す」pre</a></cite><p><a href="https://sho.tdiary.net/20050922.html"><img src="" alt="CSSで「折り返す」pre" title="CSSで「折り返す」pre" class="entry-image" /></a></p><p>■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが...</p><p><a href="https://b.hatena.ne.jp/entry/s/sho.tdiary.net/20050922.html"><img src="https://b.hatena.ne.jp/entry/image/https://sho.tdiary.net/20050922.html" alt="はてなブックマーク - CSSで「折り返す」pre" title="はてなブックマーク - CSSで「折り返す」pre" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/sho.tdiary.net/20050922.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 123 https://postd.cc/how-well-do-you-know-display/ moerrari 2016-09-01T13:55:26Z css <blockquote cite="https://postd.cc/how-well-do-you-know-display/" title="あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fpostd.cc%2Fhow-well-do-you-know-display%2F" alt="" /> <a href="https://postd.cc/how-well-do-you-know-display/">あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD</a></cite><p><a href="https://postd.cc/how-well-do-you-know-display/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bbb286687ce3286cb9cda45bf6ca6ce60702784b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fpostd.cc%2Fwp%2Fwp-content%2Fuploads%2F2016%2F08%2Fflex-diagram-500x207.png" alt="あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD" title="あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD" class="entry-image" /></a></p><p>CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるで...</p><p><a href="https://b.hatena.ne.jp/entry/s/postd.cc/how-well-do-you-know-display/"><img src="https://b.hatena.ne.jp/entry/image/https://postd.cc/how-well-do-you-know-display/" alt="はてなブックマーク - あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD" title="はてなブックマーク - あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/postd.cc/how-well-do-you-know-display/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 578 https://www.koikikukan.com/archives/2013/05/29-005555.php 疑似クラスを設定する方法 moerrari 2015-06-21T02:43:32Z javascript css <blockquote cite="https://www.koikikukan.com/archives/2013/05/29-005555.php" title="JavaScriptでCSSの擬似クラスを設定する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.koikikukan.com%2Farchives%2F2013%2F05%2F29-005555.php" alt="" /> <a href="https://www.koikikukan.com/archives/2013/05/29-005555.php">JavaScriptでCSSの擬似クラスを設定する方法</a></cite><p><a href="https://www.koikikukan.com/archives/2013/05/29-005555.php"><img src="" alt="JavaScriptでCSSの擬似クラスを設定する方法" title="JavaScriptでCSSの擬似クラスを設定する方法" class="entry-image" /></a></p><p>JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。 １．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 &lt;a href=&quot;http://.../&quot;&gt;foo&lt;/a&gt; &lt;script&gt; var foo = document.getElementsByTag...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.koikikukan.com/archives/2013/05/29-005555.php"><img src="https://b.hatena.ne.jp/entry/image/https://www.koikikukan.com/archives/2013/05/29-005555.php" alt="はてなブックマーク - JavaScriptでCSSの擬似クラスを設定する方法" title="はてなブックマーク - JavaScriptでCSSの擬似クラスを設定する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.koikikukan.com/archives/2013/05/29-005555.php"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 18 https://language-and-engineering.hatenablog.jp/entry/20110216/p1 moerrari 2015-01-12T02:26:10Z css ノウハウ <blockquote cite="https://language-and-engineering.hatenablog.jp/entry/20110216/p1" title="なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flanguage-and-engineering.hatenablog.jp%2Fentry%2F20110216%2Fp1" alt="" /> <a href="https://language-and-engineering.hatenablog.jp/entry/20110216/p1">なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して</a></cite><p><a href="https://language-and-engineering.hatenablog.jp/entry/20110216/p1"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fc5c62edb1c41a1426e7fce3e0b0aac663f4f7b3/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fws-fe.amazon-adsystem.com%2Fwidgets%2Fq%3F_encoding%3DUTF8%26ASIN%3D4844336355%26Format%3D_SL250_%26ID%3DAsinImage%26MarketPlace%3DJP%26ServiceVersion%3D20070822%26WS%3D1%26tag%3Dfugayahogeo-22" alt="なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して" title="なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して" class="entry-image" /></a></p><p>CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができる...</p><p><a href="https://b.hatena.ne.jp/entry/s/language-and-engineering.hatenablog.jp/entry/20110216/p1"><img src="https://b.hatena.ne.jp/entry/image/https://language-and-engineering.hatenablog.jp/entry/20110216/p1" alt="はてなブックマーク - なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して" title="はてなブックマーク - なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/language-and-engineering.hatenablog.jp/entry/20110216/p1"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 264 http://xn--eck9awc8j.biz/css-image-center/ 画像を中央寄せにしたいがならない…というときの詳細な解説と対応方法。 moerrari 2014-12-26T06:19:24Z css ノウハウ <blockquote cite="http://xn--eck9awc8j.biz/css-image-center/" title="図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fxn--eck9awc8j.biz%2Fcss-image-center%2F" alt="" /> <a href="http://xn--eck9awc8j.biz/css-image-center/">図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書</a></cite><p><a href="http://xn--eck9awc8j.biz/css-image-center/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/de58bbc5b1af4e82317c5d301bb7e31bfe5e24bf/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fxn--eck9awc8j.biz%2Fwp-content%2Fuploads%2F2014%2F03%2F72ea58f3ccebb1dee0ebbe46790c9817.png" alt="図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書" title="図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書" class="entry-image" /></a></p><p>CSSで画像を中央寄せする際に必要な概念 急がば回れ ブロック要素とインライン要素 画像を中央寄せにするCSS text-alignプロパティ marginプロパティ displayプロパティ 画像が中央寄せにならない！？ 使用テンプレートによる影響を解除する CSSの特異性を意識する 最終手段！ まとめ ご紹介した順番で試してみる CSSで...</p><p><a href="https://b.hatena.ne.jp/entry/xn--eck9awc8j.biz/css-image-center/"><img src="https://b.hatena.ne.jp/entry/image/http://xn--eck9awc8j.biz/css-image-center/" alt="はてなブックマーク - 図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書" title="はてなブックマーク - 図解で分かりやすい！CSSで画像を中央寄せする方法 | デザイン五輪書" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/xn--eck9awc8j.biz/css-image-center/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 9 https://www.htmq.com/tech/style/clip/ clipプロパティの使用にはpositionプロパティでabsoluteかfixedを指定する必要がある。 moerrari 2014-12-26T04:55:13Z css <blockquote cite="https://www.htmq.com/tech/style/clip/" title="★スタイルシートリファレンス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.htmq.com%2Ftech%2Fstyle%2Fclip%2F" alt="" /> <a href="https://www.htmq.com/tech/style/clip/">★スタイルシートリファレンス</a></cite><p><a href="https://www.htmq.com/tech/style/clip/"><img src="" alt="★スタイルシートリファレンス" title="★スタイルシートリファレンス" class="entry-image" /></a></p><p>山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイム...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.htmq.com/tech/style/clip/"><img src="https://b.hatena.ne.jp/entry/image/https://www.htmq.com/tech/style/clip/" alt="はてなブックマーク - ★スタイルシートリファレンス" title="はてなブックマーク - ★スタイルシートリファレンス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.htmq.com/tech/style/clip/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 19 http://oshiete.goo.ne.jp/qa/1944867.html floatで並べた要素を下揃えにしたい場合について。position: absoluteを使うしかない？ moerrari 2014-12-25T12:19:55Z css <blockquote cite="http://oshiete.goo.ne.jp/qa/1944867.html" title="gooサービス終了のお知らせ | dメニュー"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Foshiete.goo.ne.jp%2Fqa%2F1944867.html" alt="" /> <a href="http://oshiete.goo.ne.jp/qa/1944867.html">gooサービス終了のお知らせ | dメニュー</a></cite><p><a href="http://oshiete.goo.ne.jp/qa/1944867.html"><img src="" alt="gooサービス終了のお知らせ | dメニュー" title="gooサービス終了のお知らせ | dメニュー" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/oshiete.goo.ne.jp/qa/1944867.html"><img src="https://b.hatena.ne.jp/entry/image/http://oshiete.goo.ne.jp/qa/1944867.html" alt="はてなブックマーク - gooサービス終了のお知らせ | dメニュー" title="はてなブックマーク - gooサービス終了のお知らせ | dメニュー" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/oshiete.goo.ne.jp/qa/1944867.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 http://weboook.blog22.fc2.com/blog-entry-268.html 社内研修「JavaScript基礎」の資料を公開します！ - mixi Engineers' Blog - http://alpha.mixi.co.jp/entry/2013/11844/ より moerrari 2014-11-18T20:48:04Z css チュートリアル <blockquote cite="http://weboook.blog22.fc2.com/blog-entry-268.html" title="CSSセレクタ20個のおさらい"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fweboook.blog22.fc2.com%2Fblog-entry-268.html" alt="" /> <a href="http://weboook.blog22.fc2.com/blog-entry-268.html">CSSセレクタ20個のおさらい</a></cite><p><a href="http://weboook.blog22.fc2.com/blog-entry-268.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb9ffc84cd9df070c143ff779d66c8cad639737c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png" alt="CSSセレクタ20個のおさらい" title="CSSセレクタ20個のおさらい" class="entry-image" /></a></p><p>CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい...</p><p><a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-268.html"><img src="https://b.hatena.ne.jp/entry/image/http://weboook.blog22.fc2.com/blog-entry-268.html" alt="はてなブックマーク - CSSセレクタ20個のおさらい" title="はてなブックマーク - CSSセレクタ20個のおさらい" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-268.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2818 https://robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/ cssで画像に影を付ける方法。 moerrari 2014-10-25T16:05:51Z css <blockquote cite="https://robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/" title="Youtubeの動画を背景に"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Frobots.net%2Fsoftware-and-applications%2Fbrowsers-and-extensions%2Fhow-to-enable-html5-in-chrome%2F" alt="" /> <a href="https://robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/">Youtubeの動画を背景に</a></cite><p><a href="https://robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/916351ed7514fd99ef186809463b6a88ff977e4d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Frobots.net%2Fwp-content%2Fuploads%2F2024%2F02%2Fhow-to-enable-html5-in-chrome-1707000155.jpg" alt="Youtubeの動画を背景に" title="Youtubeの動画を背景に" class="entry-image" /></a></p><p>Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 ...</p><p><a href="https://b.hatena.ne.jp/entry/s/robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/"><img src="https://b.hatena.ne.jp/entry/image/https://robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/" alt="はてなブックマーク - Youtubeの動画を背景に" title="はてなブックマーク - Youtubeの動画を背景に" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/robots.net/software-and-applications/browsers-and-extensions/how-to-enable-html5-in-chrome/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 6168 http://www.w-frontier.com/stylesheet/pseudo_inlineframe.html moerrari 2014-10-25T15:43:42Z css iphone <blockquote cite="http://www.w-frontier.com/stylesheet/pseudo_inlineframe.html" title="iframe要素を使わずに擬似的なインラインフレームのを作成する"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.w-frontier.com%2Fstylesheet%2Fpseudo_inlineframe.html" alt="" /> <a href="http://www.w-frontier.com/stylesheet/pseudo_inlineframe.html">iframe要素を使わずに擬似的なインラインフレームのを作成する</a></cite><p><a href="http://www.w-frontier.com/stylesheet/pseudo_inlineframe.html"><img src="" alt="iframe要素を使わずに擬似的なインラインフレームのを作成する" title="iframe要素を使わずに擬似的なインラインフレームのを作成する" class="entry-image" /></a></p><p>HTMLの中に別のHTMLを組み込む方法としてインラインフレームという方法があります。 インラインフレームは便利ですが、動作が重かったり、対応していないブラウザがあったり、 XHTML規格では定義されていない場合があったりする不安定な要素です。 これをスタイルシートで擬似的なインラインフレームを作成する事でどん...</p><p><a href="https://b.hatena.ne.jp/entry/www.w-frontier.com/stylesheet/pseudo_inlineframe.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.w-frontier.com/stylesheet/pseudo_inlineframe.html" alt="はてなブックマーク - iframe要素を使わずに擬似的なインラインフレームのを作成する" title="はてなブックマーク - iframe要素を使わずに擬似的なインラインフレームのを作成する" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.w-frontier.com/stylesheet/pseudo_inlineframe.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 53 https://www.nxworld.net/css-only-button-design-and-hover-effects.html いろいろなボタン。CSSでここまでできる。 moerrari 2014-09-10T20:07:03Z css web制作 <blockquote cite="https://www.nxworld.net/css-only-button-design-and-hover-effects.html" title="CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.nxworld.net%2Fcss-only-button-design-and-hover-effects.html" alt="" /> <a href="https://www.nxworld.net/css-only-button-design-and-hover-effects.html">CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld</a></cite><p><a href="https://www.nxworld.net/css-only-button-design-and-hover-effects.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fe0da73334252fe8f974c2169cb85459446c41aa/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fcss-only-button-design-and-hover-effects.png" alt="CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld" title="CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld" class="entry-image" /></a></p><p>実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけ...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/css-only-button-design-and-hover-effects.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.nxworld.net/css-only-button-design-and-hover-effects.html" alt="はてなブックマーク - CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld" title="はてなブックマーク - CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.nxworld.net/css-only-button-design-and-hover-effects.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1240 http://tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4 ウィンドウサイズに合わせてpreの長い行を折り返すようにしたい場合 moerrari 2012-03-24T06:02:43Z css <blockquote cite="http://tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4" title="CSS/preで改行してほしい - TOBY SOFT wiki"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Ftobysoft.net%2Fwiki%2Findex.php%3FCSS%252Fpre%25A4%25C7%25B2%25FE%25B9%25D4%25A4%25B7%25A4%25C6%25A4%25DB%25A4%25B7%25A4%25A4" alt="" /> <a href="http://tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4">CSS/preで改行してほしい - TOBY SOFT wiki</a></cite><p><a href="http://tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4"><img src="" alt="CSS/preで改行してほしい - TOBY SOFT wiki" title="CSS/preで改行してほしい - TOBY SOFT wiki" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4"><img src="https://b.hatena.ne.jp/entry/image/http://tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4" alt="はてなブックマーク - CSS/preで改行してほしい - TOBY SOFT wiki" title="はてなブックマーク - CSS/preで改行してほしい - TOBY SOFT wiki" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/tobysoft.net/wiki/index.php?CSS%2Fpre%A4%C7%B2%FE%B9%D4%A4%B7%A4%C6%A4%DB%A4%B7%A4%A4"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://www.htmq.com/jp-jp/ 1500オーバーブクマ。スタイルシートでのフォント指定表記を調べていて発見。初回ブクマ後1年後に再発見。 moerrari 2012-02-11T20:04:26Z web制作 html リファレンス CSS <blockquote cite="https://www.htmq.com/jp-jp/" title="HTMLクイックリファレンス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.htmq.com%2Fjp-jp%2F" alt="" /> <a href="https://www.htmq.com/jp-jp/">HTMLクイックリファレンス</a></cite><p><a href="https://www.htmq.com/jp-jp/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2af6023f30991ef4cb51ee74e60acbb1de7ef29e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.htmq.com%2Fwp-content%2Fuploads%2F2025%2F04%2Fhtmq-onlinecasino-osusume5.jpg" alt="HTMLクイックリファレンス" title="HTMLクイックリファレンス" class="entry-image" /></a></p><p>{&quot;is_any_tile&quot;:false,&quot;sources&quot;:[{&quot;source&quot;:&quot;bmc_bonus_type&quot;,&quot;table_games&quot;:false,&quot;bonus_types&quot;:false,&quot;game_providers&quot;:false,&quot;slots&quot;:false,&quot;live_games&quot;:false,&quot;is_live_dealer&quot;:false,&quot;payment_methods&quot;:false,&quot;sport_types&quot;:false,&quot;live_streaming&quot;:false,&quot;cash_out&quot;:false}]} ウェルカムボーナス {&quot;is_any_tile...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.htmq.com/jp-jp/"><img src="https://b.hatena.ne.jp/entry/image/https://www.htmq.com/jp-jp/" alt="はてなブックマーク - HTMLクイックリファレンス" title="はてなブックマーク - HTMLクイックリファレンス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.htmq.com/jp-jp/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2502 http://www.tohoho-web.com/css/basic.htm moerrari 2011-06-18T11:01:21Z css チュートリアル <blockquote cite="http://www.tohoho-web.com/css/basic.htm" title="CSSリファレンス(CSS入門) - とほほのWWW入門"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.tohoho-web.com%2Fcss%2Fbasic.htm" alt="" /> <a href="http://www.tohoho-web.com/css/basic.htm">CSSリファレンス(CSS入門) - とほほのWWW入門</a></cite><p><a href="http://www.tohoho-web.com/css/basic.htm"><img src="" alt="CSSリファレンス(CSS入門) - とほほのWWW入門" title="CSSリファレンス(CSS入門) - とほほのWWW入門" class="entry-image" /></a></p><p>目次 CSSとは？ CSSの例 CSSの指定方法 style属性で指定する方法 &lt;style&gt;～&lt;/style&gt;で指定する方法 &lt;link&gt;を用いた外部CSSファイルで指定する方法 @importを用いた外部CSSファイルで指定する方法 タグと要素とセレクタ 継承 セレクタ CSSネスティング コメント 優先度の順位(詳細度) 長さの単位 CSSのメリット 見栄えを...</p><p><a href="https://b.hatena.ne.jp/entry/www.tohoho-web.com/css/basic.htm"><img src="https://b.hatena.ne.jp/entry/image/http://www.tohoho-web.com/css/basic.htm" alt="はてなブックマーク - CSSリファレンス(CSS入門) - とほほのWWW入門" title="はてなブックマーク - CSSリファレンス(CSS入門) - とほほのWWW入門" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.tohoho-web.com/css/basic.htm"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 159 http://weboook.blog22.fc2.com/blog-entry-260.html moerrari 2011-05-13T03:37:10Z css <blockquote cite="http://weboook.blog22.fc2.com/blog-entry-260.html" title="CSSの知識をもっと深める30+2の小技テクニック集｜Webpark"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fweboook.blog22.fc2.com%2Fblog-entry-260.html" alt="" /> <a href="http://weboook.blog22.fc2.com/blog-entry-260.html">CSSの知識をもっと深める30+2の小技テクニック集｜Webpark</a></cite><p><a href="http://weboook.blog22.fc2.com/blog-entry-260.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb9ffc84cd9df070c143ff779d66c8cad639737c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png" alt="CSSの知識をもっと深める30+2の小技テクニック集｜Webpark" title="CSSの知識をもっと深める30+2の小技テクニック集｜Webpark" class="entry-image" /></a></p><p>基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。</p><p><a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-260.html"><img src="https://b.hatena.ne.jp/entry/image/http://weboook.blog22.fc2.com/blog-entry-260.html" alt="はてなブックマーク - CSSの知識をもっと深める30+2の小技テクニック集｜Webpark" title="はてなブックマーク - CSSの知識をもっと深める30+2の小技テクニック集｜Webpark" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-260.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2264 http://www.kanzaki.com/docs/html/htminfo17.html 上位ディレクトリにはHTMLの基本についても。ブコメを見ると学ぶのに良いページらしい。 moerrari 2011-05-05T14:32:21Z css チュートリアル <blockquote cite="http://www.kanzaki.com/docs/html/htminfo17.html" title="セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.kanzaki.com%2Fdocs%2Fhtml%2Fhtminfo17.html" alt="" /> <a href="http://www.kanzaki.com/docs/html/htminfo17.html">セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明</a></cite><p><a href="http://www.kanzaki.com/docs/html/htminfo17.html"><img src="" alt="セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明" title="セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明" class="entry-image" /></a></p><p>HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。 スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは...</p><p><a href="https://b.hatena.ne.jp/entry/www.kanzaki.com/docs/html/htminfo17.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.kanzaki.com/docs/html/htminfo17.html" alt="はてなブックマーク - セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明" title="はてなブックマーク - セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.kanzaki.com/docs/html/htminfo17.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 265 https://techblog.yahoo.co.jp/tips/zencoding3/ moerrari 2011-04-03T02:51:38Z html CSS web制作 <blockquote cite="https://techblog.yahoo.co.jp/tips/zencoding3/" title="HTML+CSSコーディングが10倍速くなるZen Coding"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechblog.yahoo.co.jp%2Ftips%2Fzencoding3%2F" alt="" /> <a href="https://techblog.yahoo.co.jp/tips/zencoding3/">HTML+CSSコーディングが10倍速くなるZen Coding</a></cite><p><a href="https://techblog.yahoo.co.jp/tips/zencoding3/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0e39f050ceadbbd99866374a9b678e08ef430795/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs.yimg.jp%2Fimages%2Ftecblog%2F2010Q3%2Fogp_20200515T134141.png" alt="HTML+CSSコーディングが10倍速くなるZen Coding" title="HTML+CSSコーディングが10倍速くなるZen Coding" class="entry-image" /></a></p><p>ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 初めに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 今までZen Codingの基本（マークアップ効率化 - zen-...</p><p><a href="https://b.hatena.ne.jp/entry/s/techblog.yahoo.co.jp/tips/zencoding3/"><img src="https://b.hatena.ne.jp/entry/image/https://techblog.yahoo.co.jp/tips/zencoding3/" alt="はてなブックマーク - HTML+CSSコーディングが10倍速くなるZen Coding" title="はてなブックマーク - HTML+CSSコーディングが10倍速くなるZen Coding" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/techblog.yahoo.co.jp/tips/zencoding3/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 77 https://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html moerrari 2010-04-02T13:46:42Z css web制作 ノウハウ <blockquote cite="https://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html" title="無駄なdiv要素やclassだらけのマークアップから卒業する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fdiv-itis-and-class-itis-with-the-960-grid-system.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html">無駄なdiv要素やclassだらけのマークアップから卒業する方法</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html"><img src="" alt="無駄なdiv要素やclassだらけのマークアップから卒業する方法" title="無駄なdiv要素やclassだらけのマークアップから卒業する方法" class="entry-image" /></a></p><p>グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html" alt="はてなブックマーク - 無駄なdiv要素やclassだらけのマークアップから卒業する方法" title="はてなブックマーク - 無駄なdiv要素やclassだらけのマークアップから卒業する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 923 http://home.kaze-pro.com/css.htm サイトの素材には女の子チックな素材屋のものを使用 moerrari 2009-02-08T18:03:44Z web制作 css チュートリアル <blockquote cite="http://home.kaze-pro.com/css.htm" title="正在跳转，请稍等..."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fhome.kaze-pro.com%2Fcss.htm" alt="" /> <a href="http://home.kaze-pro.com/css.htm">正在跳转，请稍等...</a></cite><p><a href="http://home.kaze-pro.com/css.htm"><img src="" alt="正在跳转，请稍等..." title="正在跳转，请稍等..." class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/home.kaze-pro.com/css.htm"><img src="https://b.hatena.ne.jp/entry/image/http://home.kaze-pro.com/css.htm" alt="はてなブックマーク - 正在跳转，请稍等..." title="はてなブックマーク - 正在跳转，请稍等..." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/home.kaze-pro.com/css.htm"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2