CSSに関するotyame2のブックマーク (92)

  • CSSベースのフォームテンプレート:phpspot開発日誌

    A CSS-based Form Template CSSベースのフォームテンプレート。 フォームをデザインするのって結構面倒だったりしますよね。 フォームのテンプレートがあらかじめ容易されていれば、コピペであっという間にフォームが出来そうです。 しかもCSSベースなのでデザイン変更も容易でHTMLも綺麗ということですごく便利です。 次のような綺麗なフォームのテンプレート。 1枚の中にCSSの定義も全部入っていて便利に使えそうです。 関連エントリ セクシーなCSSホバーボタンを作成するチュートリアル DIVを垂直方向に中央寄せするCSSサンプル CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例 CSSの小技集、20個

  • http://www.checkpad.jp/?mode=pjt&act=detail&id=249123

  • 2xup.org

    レンタルサーバなら「さくらのレンタルサーバ」! 月額換算でわずか131円、缶ジュース1分のお値段で使える格安プランから、ビジネスにも使える多機能&大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。

    2xup.org
  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。
  • pruto.jp - よく使うCSSの話|基本編

    2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。 どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。 はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。 色々あるからまずは基となるところから。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS

  • CSSだけで文字にドロップシャドウをつける方法(あまり良くない方法) | SIMPLE*SIMPLE

    Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ(というか影を先に書くのか)。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips

    CSSだけで文字にドロップシャドウをつける方法(あまり良くない方法) | SIMPLE*SIMPLE
  • CSSベースのクールなフォーム、サンプル集:phpspot開発日誌

    Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフォーム、サンプル集。 デザインにしにくい部分だからこそ、凝っておくと玄人受けはよい筈。色々なデザインがあって感心するばかりです。 Prettier Accessible Forms Badboy Niceforms Functional Pretty Forms Form Layout Templates Fun with forms - customized input elements Scr

  • CSSテンプレート配布サイト色々:phpspot開発日誌

    ページ作成の際に何かと役立つCSSテンプレート集。 便利なので、色々なサイトがテンプレートを配布してくれてます。 色々あるのでまとめてみました。 次は、過去に紹介したサイトのブログでの紹介エントリ CSSレイアウトのサンプル集 フリーのCSSデザインテンプレート集「Free Css Templates」 ValidなCSS/XHTMLテンプレート集 CSS+XHTMLのテンプレート集:css tinderbox そして、今回発見したサイト。 2カラム、3カラムレイアウトのサンプルが公開されてます。RSS配信によって新着テンプレート情報も得られます。 Dynamic Drive CSS Layouts- Tableless, CSS based templates 今後は、こういったサイトを発展させて、オンラインである程度デザインが完了してしまうようなサイトがあったら人気が出そうですね。

  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け

    Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ(Safari、Opera、Firefox) ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ

  • ブログのCSSデザイントップ20 - GIGAZINE

    CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな~と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink

    ブログのCSSデザイントップ20 - GIGAZINE
  • ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE

    WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1:WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2:Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3:Minitabs http://www.aplus.co.yu/adxmenu/exam

    ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE
  • 100%、CSSのみで構成されるメニューの作り方 - GIGAZINE

    JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。

    100%、CSSのみで構成されるメニューの作り方 - GIGAZINE
  • CSSデザイン格付けサイトいろいろ - GIGAZINE

    CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ

    CSSデザイン格付けサイトいろいろ - GIGAZINE
  • CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」

    IE7、Firefox、Netscape、Operaで動作するグラフィカルなイメージ画像を使ったチェックボックスとラジオボタンです。通常のチェックボックスなどではおもしろみがないという場合に使うとかなり大きなインパクトがあります。 コードのダウンロードと実際の動作例は以下から。 Styled Checkboxes and Styled Radio Buttons | formStyle 動作例はこちら 以下も似たようなタイプの例です。 Niceforms コードのダウンロードは以下から。 badboy.media.design :: articles :: Niceforms

    CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
  • A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

    So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are. Great. But now you need a cross-browser way to dynamically switch between the style sheets. Styling your site#secti

    A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets
    otyame2
    otyame2 2006/10/12
    スタイルシートを切り替えるJavascript
  • 角丸ライブラリ - tikeda::Diary:

    最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

    角丸ライブラリ - tikeda::Diary:
  • CSSでクールなタブUIを作成するサンプル:phpspot開発日誌

    OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new

  • CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌

    CSSJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この

  • 【インフォシーク】Infoseek : 楽天が運営するポータルサイト

    日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。