https://b.hatena.ne.jp/roar-king/css/ cssに関するroar-kingのはてなブックマーク (11) https://coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html roar-king 2013-05-17T05:00:28Z css *web制作 スクロール 331 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html" title="[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Ffixed-image-background-techniques.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html">[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html"><img src="" alt="[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス" title="[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス" class="entry-image" /></a></p><p>去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html" alt="はてなブックマーク - [CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス" title="はてなブックマーク - [CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/fixed-image-background-techniques.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://weboook.blog22.fc2.com/blog-entry-311.html roar-king 2012-11-28T07:19:53Z css ボタン 854 <blockquote cite="http://weboook.blog22.fc2.com/blog-entry-311.html" title="CSS3の勉強になるかも！？画像を使わないボタンの作成手順"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fweboook.blog22.fc2.com%2Fblog-entry-311.html" alt="" /> <a href="http://weboook.blog22.fc2.com/blog-entry-311.html">CSS3の勉強になるかも！？画像を使わないボタンの作成手順</a></cite><p><a href="http://weboook.blog22.fc2.com/blog-entry-311.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="CSS3の勉強になるかも！？画像を使わないボタンの作成手順" title="CSS3の勉強になるかも！？画像を使わないボタンの作成手順" class="entry-image" /></a></p><p>CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだ...</p><p><a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-311.html"><img src="https://b.hatena.ne.jp/entry/image/http://weboook.blog22.fc2.com/blog-entry-311.html" alt="はてなブックマーク - CSS3の勉強になるかも！？画像を使わないボタンの作成手順" title="はてなブックマーク - CSS3の勉強になるかも！？画像を使わないボタンの作成手順" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/weboook.blog22.fc2.com/blog-entry-311.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://matome.naver.jp/odai/2132750704946539001 roar-king 2012-01-29T12:39:36Z css 1521 <blockquote cite="https://matome.naver.jp/odai/2132750704946539001" title="サービス終了のお知らせ - NAVER まとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmatome.naver.jp%2Fodai%2F2132750704946539001" alt="" /> <a href="https://matome.naver.jp/odai/2132750704946539001">サービス終了のお知らせ - NAVER まとめ</a></cite><p><a href="https://matome.naver.jp/odai/2132750704946539001"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/09e7b89066904052031c5fdc3a2c17b2aa5082d4/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Frr.img.naver.jp%2Fmig%3Fsrc%3Dhttp%253A%252F%252Fimgcc.naver.jp%252Fkaze%252Fmission%252FUSER%252F20120126%252F14%252F141674%252F14%252F240x194x01049459a0b28d5064c02972.jpg%26twidth%3D1200%26theight%3D1200%26qlt%3D80%26res_format%3Djpg%26op%3Dr" alt="サービス終了のお知らせ - NAVER まとめ" title="サービス終了のお知らせ - NAVER まとめ" class="entry-image" /></a></p><p>サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。</p><p><a href="https://b.hatena.ne.jp/entry/s/matome.naver.jp/odai/2132750704946539001"><img src="https://b.hatena.ne.jp/entry/image/https://matome.naver.jp/odai/2132750704946539001" alt="はてなブックマーク - サービス終了のお知らせ - NAVER まとめ" title="はてなブックマーク - サービス終了のお知らせ - NAVER まとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/matome.naver.jp/odai/2132750704946539001"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.ideaxidea.com/archives/2011/06/css_lint.html roar-king 2011-06-19T13:05:19Z css 642 <blockquote cite="https://www.ideaxidea.com/archives/2011/06/css_lint.html" title="IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.ideaxidea.com%2Farchives%2F2011%2F06%2Fcss_lint.html" alt="" /> <a href="https://www.ideaxidea.com/archives/2011/06/css_lint.html">IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ</a></cite><p><a href="https://www.ideaxidea.com/archives/2011/06/css_lint.html"><img src="" alt="IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ" title="IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/www.ideaxidea.com/archives/2011/06/css_lint.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.ideaxidea.com/archives/2011/06/css_lint.html" alt="はてなブックマーク - IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ" title="はてなブックマーク - IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.ideaxidea.com/archives/2011/06/css_lint.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://weboook.blog22.fc2.com/blog-entry-268.html roar-king 2011-06-19T13:04:49Z css 2817 <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> https://sassience.com/ roar-king 2011-05-29T13:14:13Z css 1201 <blockquote cite="https://sassience.com/" title="SASSIENCE ～ 世界が嫉妬するCSSへ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsassience.com%2F" alt="" /> <a href="https://sassience.com/">SASSIENCE ～ 世界が嫉妬するCSSへ</a></cite><p><a href="https://sassience.com/"><img src="" alt="SASSIENCE ～ 世界が嫉妬するCSSへ" title="SASSIENCE ～ 世界が嫉妬するCSSへ" class="entry-image" /></a></p><p>SASSIENCE ～ 世界が嫉妬するCSSへ</p><p><a href="https://b.hatena.ne.jp/entry/s/sassience.com/"><img src="https://b.hatena.ne.jp/entry/image/https://sassience.com/" alt="はてなブックマーク - SASSIENCE ～ 世界が嫉妬するCSSへ" title="はてなブックマーク - SASSIENCE ～ 世界が嫉妬するCSSへ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/sassience.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://blog.kumacchi.com/2008/03/10/565 roar-king 2011-04-16T16:10:48Z css 1 <blockquote cite="https://blog.kumacchi.com/2008/03/10/565" title="[スタイルシート(CSS)]特定のリンクのみ色を変える方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.kumacchi.com%2F2008%2F03%2F10%2F565" alt="" /> <a href="https://blog.kumacchi.com/2008/03/10/565">[スタイルシート(CSS)]特定のリンクのみ色を変える方法</a></cite><p><a href="https://blog.kumacchi.com/2008/03/10/565"><img src="" alt="[スタイルシート(CSS)]特定のリンクのみ色を変える方法" title="[スタイルシート(CSS)]特定のリンクのみ色を変える方法" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/blog.kumacchi.com/2008/03/10/565"><img src="https://b.hatena.ne.jp/entry/image/https://blog.kumacchi.com/2008/03/10/565" alt="はてなブックマーク - [スタイルシート(CSS)]特定のリンクのみ色を変える方法" title="はてなブックマーク - [スタイルシート(CSS)]特定のリンクのみ色を変える方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.kumacchi.com/2008/03/10/565"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://e0166.blog.fc2.com/blog-entry-862.html roar-king 2011-03-12T04:02:00Z css 1179 <blockquote cite="https://e0166.blog.fc2.com/blog-entry-862.html" title="色々なCSSジェネレータで出来るあれこれまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fe0166.blog.fc2.com%2Fblog-entry-862.html" alt="" /> <a href="https://e0166.blog.fc2.com/blog-entry-862.html">色々なCSSジェネレータで出来るあれこれまとめ</a></cite><p><a href="https://e0166.blog.fc2.com/blog-entry-862.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ef46aee1fece1583d9925daae0d1c1fb15870e5e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog-imgs-31.fc2.com%2Fe%2F0%2F1%2Fe0166%2F201103090024.jpg" alt="色々なCSSジェネレータで出来るあれこれまとめ" title="色々なCSSジェネレータで出来るあれこれまとめ" class="entry-image" /></a></p><p>ウェブ上には様々な便利ツールがあります。以前紹介した『CSS3.0Maker』もそうですが、わずか数秒で希望のCSSが出来上がればそれに越した事はないですよね。 今回はこうしたジェネレータを実際に使用した結果、使いやすくてわかりやすい物をまとめてみました。 便利なCSSジェネレータ１０選 目次 使われているclassやID...</p><p><a href="https://b.hatena.ne.jp/entry/s/e0166.blog.fc2.com/blog-entry-862.html"><img src="https://b.hatena.ne.jp/entry/image/https://e0166.blog.fc2.com/blog-entry-862.html" alt="はてなブックマーク - 色々なCSSジェネレータで出来るあれこれまとめ" title="はてなブックマーク - 色々なCSSジェネレータで出来るあれこれまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/e0166.blog.fc2.com/blog-entry-862.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html roar-king 2010-12-11T04:49:33Z css 256 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html" title="ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Ffreebies-ui-elements-used-html5-and-css3.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html">ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html"><img src="" alt="ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs" title="ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs" class="entry-image" /></a></p><p>HTML5/CSS3で作成した、ちょっと使ってみたくなるようなUIエレメントがダウンロードできるサイトを紹介します。 Boxtuffs [ad#ad-2] 掲載されている数はまだ少ないですが、どれもユニークなもので、いつかサイトで使ってみたくなるようなものばかりです。 下記に、現在掲載されているデモを全部、紹介します。 各デモの...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html" alt="はてなブックマーク - ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs" title="はてなブックマーク - ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/freebies-ui-elements-used-html5-and-css3.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://mynotes.jp/lecture/css21/ roar-king 2007-04-03T14:32:30Z css 403 <blockquote cite="http://mynotes.jp/lecture/css21/" title="CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmynotes.jp%2Flecture%2Fcss21%2F" alt="" /> <a href="http://mynotes.jp/lecture/css21/">CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座</a></cite><p><a href="http://mynotes.jp/lecture/css21/"><img src="" alt="CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座" title="CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/mynotes.jp/lecture/css21/"><img src="https://b.hatena.ne.jp/entry/image/http://mynotes.jp/lecture/css21/" alt="はてなブックマーク - CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座" title="はてなブックマーク - CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/mynotes.jp/lecture/css21/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://css-happylife.com/archives/2007/0131_0015.php roar-king 2007-01-31T03:52:09Z css 673 <blockquote cite="https://css-happylife.com/archives/2007/0131_0015.php" title="パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcss-happylife.com%2Farchives%2F2007%2F0131_0015.php" alt="" /> <a href="https://css-happylife.com/archives/2007/0131_0015.php">パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife</a></cite><p><a href="https://css-happylife.com/archives/2007/0131_0015.php"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9f4351072aec94966bb45d5ccde06394ddaee786/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fcss-happylife.com%2Fimg%2Fshare%2Ficon_apple_touch.png" alt="パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife" title="パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife" class="entry-image" /></a></p><p>普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為...</p><p><a href="https://b.hatena.ne.jp/entry/s/css-happylife.com/archives/2007/0131_0015.php"><img src="https://b.hatena.ne.jp/entry/image/https://css-happylife.com/archives/2007/0131_0015.php" alt="はてなブックマーク - パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife" title="はてなブックマーク - パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/css-happylife.com/archives/2007/0131_0015.php"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>