bitさんのタグ「css」についてのクリップ一覧｜@nifty クリップ http://clip.nifty.com/users/bit bitさんのタグ「css」についてのクリップ一覧 Design and Code Your First Website in Easy to Understand Steps - Nettuts+ http://clip.nifty.com/entry?url=http%3A%2F%2Fnet.tutsplus.com%2Ftutorials%2Fhtml-css-techniques%2Fdesign-and-code-your-first-website-in-easy-to-understand-steps%2F&title=Design%20and%20Code%20Your%20First%20Website%20in%20Easy%20to%20Understand%20Steps%20-%20Nettuts%2B 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/ 1395887 bit 2009-08-04T04:28:13Z code css チュートリアル [使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。 http://clip.nifty.com/entry?url=http%3A%2F%2Fc-brains.jp%2Fblog%2Fwsg%2F08%2F05%2F29-160304.php&title=%5B%E4%BD%BF%E3%81%88%E3%82%8B%20CSS%20%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%5D%20CSS%E3%81%A7%E8%89%B2%E3%80%85%E3%81%AA%E3%82%AB%E3%83%A9%E3%83%A0%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%EF%BC%88%E6%AE%B5%E7%B5%84%EF%BC%89%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%20%7C%20%E3%83%90%E3%82%B7%E3%83%A3%E3%83%AD%E3%82%B0%E3%80%82 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://c-brains.jp/blog/wsg/08/05/29-160304.php 1394304 bit 2009-08-04T02:05:41Z css CSSでさくっと作れるグラフいろいろ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～ http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.ideaxidea.com%2Farchives%2F2009%2F02%2Fcss_graphs.html&title=CSS%E3%81%A7%E3%81%95%E3%81%8F%E3%81%A3%E3%81%A8%E4%BD%9C%E3%82%8C%E3%82%8B%E3%82%B0%E3%83%A9%E3%83%95%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%20-%20IDEA*IDEA%20%EF%BD%9E%20%E7%99%BE%E5%BC%8F%E7%AE%A1%E7%90%86%E4%BA%BA%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%95%E3%83%8F%E3%83%83%E3%82%AF%E3%83%96%E3%83%AD%E3%82%B0%20%EF%BD%9E 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.ideaxidea.com/archives/2009/02/css_graphs.html 688346 bit 2009-02-05T08:27:08Z css グラフ デザイン これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌 http://clip.nifty.com/entry?url=http%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2009%2F01%2Fcsscss20.html&title=%E3%81%93%E3%82%8C%E3%81%95%E3%81%88%E3%82%84%E3%82%8C%E3%81%B0CSS%E3%82%92%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%AA%E3%81%84CSS%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%EF%BC%86%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB20%3Aphpspot%E9%96%8B%E7%99%BA%E6%97%A5%E8%AA%8C 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://phpspot.org/blog/archives/2009/01/csscss20.html 647295 bit 2009-01-05T04:31:48Z css tips あとで読む [CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス http://clip.nifty.com/entry?url=http%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2F1387.html&title=%5BCSS%5D%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AB%E3%80%8Cif%E3%80%8D%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%9D%A1%E4%BB%B6%E5%BC%8F%E3%81%8C%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%20-Conditional-CSS%20%7C%20%E3%82%B3%E3%83%AA%E3%82%B9 Conditional-CSSデモデモ画面にIE, Fx, Op, Safariの各ブラウザでア [...] 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://coliss.com/articles/build-websites/operation/css/1387.html 430142 bit 2008-08-13T02:08:54Z css web デザイン tips if ブラウザ Web2.0 - templatr - Template Generator http://clip.nifty.com/entry?url=http%3A%2F%2Ftemplatr.cc%2F&title=Web2.0%20-%20templatr%20-%20Template%20Generator
save the bookmark...
Home Blog Help Contact 1. Select an Layout Select a Layout. This decides how your page layout is devided 2. Upload the Graphic stuff The Upload is very easy. All uploaded Images will be instantly available in ... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://templatr.cc/ 430817 bit 2008-08-13T01:40:13Z デザイン web ツール tips レイアウト css モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方- http://clip.nifty.com/entry?url=http%3A%2F%2Fdspt.blog59.fc2.com%2Fblog-entry-39.html&title=%E3%83%A2%E3%83%90%E3%82%B2%E3%83%BC%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E6%90%BA%E5%B8%AF%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE12%E3%81%AETips%20%E6%90%BA%E5%B8%AF%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86%EF%BC%81%E3%80%80-%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E8%A9%B3%E3%81%97%E3%81%84%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-
『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』

っていう質問を最近良く受けます。
おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような
位置づけになってきているのでしょうか。

確かに、携帯サイトを作ってきている身としても、
モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。

ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。

ちなみに、左のスクリーンショットは、自分が似せて作った偽モバゲーのサイトの画像。おそらく、本家と変わらないデザインとなっていると思います。

なお、本来なら、HTMLやCSSのコードを公開してしまうほうが理解という意味では、最善だとは思うのですが、それをしてしまう... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://dspt.blog59.fc2.com/blog-entry-39.html 389121 bit 2008-07-17T16:39:47Z ケータイ モバゲー tips css わりとシンプルで使いやすそうなCSSレイアウトのコード12選 | IDEA*IDEA http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.ideaxidea.com%2Farchives%2F2008%2F06%2Fcss12_1.html&title=%E3%82%8F%E3%82%8A%E3%81%A8%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%9D%E3%81%86%E3%81%AACSS%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%8912%E9%81%B8%20%7C%20IDEA*IDEA
↑ こんな感じで12種類用意されています。
こうしたコードは必要最小限のサンプルがあればいいですよね。ここを起点にして個々人でカスタマイズしていくのが吉かと。CSSのバグ回避方法の勉強にもいいですね（CSSのバグというか、ブラウザのバグか）。よろしければどうぞ。
» CSS Layout Cheats | EMBRACE YOUR VICE (TM) | DESIGN FOR LIFE
■ 関連記事

IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | POP*POP
続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.ideaxidea.com/archives/2008/06/css12_1.html 376011 bit 2008-06-27T05:01:08Z css レイアウト デザイン 独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社 http://clip.nifty.com/entry?url=http%3A%2F%2Fgihyo.jp%2Fdesign%2Fserial%2F01%2Fss-design%2F0010&title=%E7%8B%AC%E5%AD%A6%E3%81%A7%E6%A5%B5%E3%82%81%E3%82%8B%20%E2%80%9CWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%9D%E3%81%AE%E6%8A%80%E3%81%A8%E5%BF%83%EF%BC%9A%E7%AC%AC10%E5%9B%9E%E3%80%80CSS%20Sprites%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E9%AB%98%E9%80%9F%E5%8C%96%EF%BD%9Cgihyo.jp%20%E2%80%A6%20%E6%8A%80%E8%A1%93%E8%A9%95%E8%AB%96%E7%A4%BE 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://gihyo.jp/design/serial/01/ss-design/0010 349309 bit 2008-05-27T01:19:43Z デザイン firefox css ツール CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ http://clip.nifty.com/entry?url=http%3A%2F%2Flogic.stepserver.jp%2Fdata%2Farchives%2F157.html&title=CSS%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E6%99%82%E3%81%AE%E3%82%88%E3%81%8F%E3%82%84%E3%82%8B%E5%A4%B1%E6%95%97%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95%EF%BD%9CWEB%E5%88%B6%E4%BD%9C%EF%BC%88html%2Ccss%28%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%29%20%29%EF%BD%9C%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%A1%E3%83%A2 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://logic.stepserver.jp/data/archives/157.html 244481 bit 2008-01-28T17:01:24Z css 困ったとき tips ちょっと便利なCSS Tips いろいろ - DesignWalker http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F01%2Fcss-tips.html&title=%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E4%BE%BF%E5%88%A9%E3%81%AACSS%20Tips%20%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%20-%20DesignWalker
既に、ご存知のものも多いかもしれませんが・・・

1. Image map for detailed information
FlickrみたいなImageMapが作れます。




2. How to Create Flick Animations with CSS
JavaScriptを使わずに、CSSと画像でアニメーションが作れます。




3. FACE: Faruk's Animated CSS Enhancements
JavaScript と CSSを使って、とってもきれいなアニメーションが作れます。




4. CSS Gradient Text Effect
コリスさんの記事でも紹介されていた、テキストにグラデーション効果をつけるスタイルシートです。




5. css: add a loading icon to your larger images
重たい画像を貼り付けるときは、... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.designwalker.com/2008/01/css-tips.html 237172 bit 2008-01-23T09:15:30Z css tips 新春特別企画・2008年を展望する!：2007年の傾向からみる今後のウェブデザインの方向性｜gihyo.jp … 技術評論社 http://clip.nifty.com/entry?url=http%3A%2F%2Fgihyo.jp%2Fdesign%2Ffeature%2F01%2F2008%2F0002&title=%E6%96%B0%E6%98%A5%E7%89%B9%E5%88%A5%E4%BC%81%E7%94%BB%E3%83%BB2008%E5%B9%B4%E3%82%92%E5%B1%95%E6%9C%9B%E3%81%99%E3%82%8B%21%EF%BC%9A2007%E5%B9%B4%E3%81%AE%E5%82%BE%E5%90%91%E3%81%8B%E3%82%89%E3%81%BF%E3%82%8B%E4%BB%8A%E5%BE%8C%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B9%E5%90%91%E6%80%A7%EF%BD%9Cgihyo.jp%20%E2%80%A6%20%E6%8A%80%E8%A1%93%E8%A9%95%E8%AB%96%E7%A4%BE 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://gihyo.jp/design/feature/01/2008/0002 228549 bit 2008-01-09T02:40:51Z css web デザイン ウェブデザイン・ギャラリーサイトまとめ http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F01%2Fwebdesign-gallery.html&title=%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%88%E3%81%BE%E3%81%A8%E3%82%81
そんなきれいなデザインを集めたギャラリー系のサイトが充実してますね。

色使いや、レイアウト、サイトの構成などなど、いろいろと参考になります。

本日は、そんなギャラリー系のサイトをまとめてみました。

1. CSS Beauty




2. Best Web Gallery




3. CSS Mania




4. CSS Remix




5. CSS Heroes




6. unmatched style




7. The FWA: Favourite Website Awards




8. Stylegala




9. Most Inspired




10. CSS Reboot




11. CSS HEAVEN




12. CSS Vault




13. csstux




14. CSSElite




15. CSS Drive




16. Design Shack




17. FAVEUP




18. CSS Bloom




19. Open Source Web Design




20. C... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.designwalker.com/2008/01/webdesign-gallery.html 226317 bit 2008-01-08T08:21:30Z tips デザイン css web CSSのレイアウト作成に役立つ便利なリソースいろいろ - GIGAZINE http://clip.nifty.com/entry?url=http%3A%2F%2Fgigazine.net%2Findex.php%3F%2Fnews%2Fcomments%2F20071218_easily_create_css_layouts%2F&title=CSS%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E4%BD%9C%E6%88%90%E3%81%AB%E5%BD%B9%E7%AB%8B%E3%81%A4%E4%BE%BF%E5%88%A9%E3%81%AA%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%20-%20GIGAZINE 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://gigazine.net/index.php?/news/comments/20071218_easily_create_css_layouts/ 216244 bit 2007-12-21T09:32:43Z css tips デザイン テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 | 100SHIKI.COM http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.100shiki.com%2Farchives%2F2007%2F12%2Fcsscss_text_wrapper.html&title=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E5%9B%9E%E3%82%8A%E3%81%93%E3%81%BF%E5%87%A6%E7%90%86%E3%82%92CSS%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8ECSS%20Text%20Wrapper%E3%80%8F%20%7C%20100SHIKI.COM December 7, 2007 10:29 AM written by webmaster他サイトでも紹介されているが、個人的にぐっと来たのでご紹介。複雑な図形の形にあわせてテキストを回り込ませたい、というときがたまにある。ワードやイラストレーターではそういった処理が可能だが、ウェブでそれを再現しようと思うとちょっと厄介だ。そこで登場したのがCSS Text Wrapperだ。このサイトでは自分で好きな図形を描き、それにあわせてテキストを配置することができる。そのようにして作った「テキストの回りこみ処理」はCSSのコードでダウンロードすることができる。このコードを回り込ませたいテキストの直前に配置するなどすれば自分のサイトで簡単に応用可能だ。ウェブで表現するのが厄介、で思考停止せずに、こうしたジェネレータ... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.100shiki.com/archives/2007/12/csscss_text_wrapper.html 208281 bit 2007-12-19T04:24:56Z css web tips MOONGIFT: » HTMLを解析してCSS生成「html2css」:オープンソースを毎日紹介 http://clip.nifty.com/entry?url=http%3A%2F%2Fwww.moongift.jp%2F2007%2F08%2Fhtml2css%2F&title=MOONGIFT%3A%20%C2%BB%20HTML%E3%82%92%E8%A7%A3%E6%9E%90%E3%81%97%E3%81%A6CSS%E7%94%9F%E6%88%90%E3%80%8Chtml2css%E3%80%8D%3A%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E6%AF%8E%E6%97%A5%E7%B4%B9%E4%BB%8B 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://www.moongift.jp/2007/08/html2css/ 131901 bit 2007-08-26T13:31:22Z css web tips CSSで角丸テクニック２５:phpspot開発日誌 http://clip.nifty.com/entry?url=http%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2007%2F08%2Fcss_37.html&title=CSS%E3%81%A7%E8%A7%92%E4%B8%B8%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%EF%BC%92%EF%BC%95%3Aphpspot%E9%96%8B%E7%99%BA%E6%97%A5%E8%AA%8C 次の記事 »：5000枚以上のパブリックドメインな写真素材集「Free Stock Photos」
CSSで角丸テクニック２５2007年08月02日スポンサード リンク
CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS
Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently.CSSで角丸... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://phpspot.org/blog/archives/2007/08/css_37.html 115228 bit 2007-08-02T08:11:01Z css web [NS] お知らせ:「コナミコマンド」を実装しました http://clip.nifty.com/entry?url=http%3A%2F%2Fn-styles.com%2Fmain%2Farchives%2F2007%2F07%2F26-033445.php&title=%5BNS%5D%20%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%3A%E3%80%8C%E3%82%B3%E3%83%8A%E3%83%9F%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%80%8D%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://n-styles.com/main/archives/2007/07/26-033445.php 111249 bit 2007-07-26T05:04:25Z コナミ ゲーム css 面白い CSSでロールオーバーもどき[to-R] http://clip.nifty.com/entry?url=http%3A%2F%2Fblog.webcreativepark.net%2F2007%2F07%2F18-221039.html&title=CSS%E3%81%A7%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%82%82%E3%81%A9%E3%81%8D%5Bto-R%5D 【PR】HP登録でSEO対策！アクセスアップにコチラ！ powerd by SBM Tool in SEO対策TIPS ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース<a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a>CSSソースa:hover img{opacity:0.8;filter: alpha(opacity=80);}サンプルロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。
IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。簡単なん... 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://blog.webcreativepark.net/2007/07/18-221039.html 108174 bit 2007-07-22T09:32:24Z tips web css デザイン CSS Nite公式ブログ:CSS Niteの音声データをiTunesに登録してpodcastとして購読するには http://clip.nifty.com/entry?url=http%3A%2F%2Fcssnite.jp%2Farchives%2Fpost_247.php&title=CSS%20Nite%E5%85%AC%E5%BC%8F%E3%83%96%E3%83%AD%E3%82%B0%3ACSS%20Nite%E3%81%AE%E9%9F%B3%E5%A3%B0%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92iTunes%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%A6podcast%E3%81%A8%E3%81%97%E3%81%A6%E8%B3%BC%E8%AA%AD%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF 続きを読む続きを読む

クリップへ追加するクリップへ追加する

]]> http://cssnite.jp/archives/post_247.php 107906 bit 2007-07-19T00:51:37Z web css デザイン