タグ

cssに関するceremonyのブックマーク (7)

  • 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をまとめてみた。
  • CSS レイアウト切り替えスイッチ | WWW WATCH

    Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

    CSS レイアウト切り替えスイッチ | WWW WATCH
  • CSSで美しくデザインされたカレンダーのCSSサンプル:phpspot開発日誌

    A CSS styled calendar | Veerle's blog Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar. CSSで美しくデザインされたカレンダーのCSSサンプル。 CSSで次のように美しくスタイルされたCSSサンプルが公開されています。 カレンダーのデザインって微妙に難しいのですが、このデザインはシンプルだけど綺麗にまとまっていて美しいですね。 カレンダー部分のデザインの参考にできそう。 あと、こちらのサイトでは、いろんなサイトのデザイ

  • ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん!(Hatena)

    こんにちはこんにちは!! CSS書いてますか!! ぼくなんか書きすぎて border: 1px solid red; が0.5秒で打ち込めそうな感じなんです>< ところで、CSSいっぱい書いてると、ぱっと見ただけでおよそ何ピクセルか、 わかったりするようになるから人間ってすごいよね! この余白は 6px だな、こっちのblockは 40px くらいかな? とか…! 大きいのは難しいけど! 最近はエラスチックなんとかレイアウト?っていう em で指定しちゃうのが流行だそうだから pxはあまり使わないのかもしれないけどね! ところで、そんなぼくがCSSを書くときに必須なツールがあります! 紹介しちゃいますね! きっと手放せなくなっちゃうよ! ひとつが、カラーピッカーだね! 画面上の好きな色を拾うやつ! これは色々なものが公開されているから省略しますね! ぼくはこれつかってるけど! もうひとつ…

    ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん!(Hatena)
  • 知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE

    技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo!やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意

    知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
  • お手本にしたい Web デザインのギャラリー10選 :: Love & Design ::

    Web デザインに限ったことではありませんが、何かを学ぶときは良いお手を探すことが大切ですね。そのお手を真似ながら、たくさん 練習することが上達するための何よりの方法だと思います。 そんなお手にしたいきれいな Web デザイン(CSS)ばかりを集めたギャラリーを10サイト選んでみました。配色に悩んだり、デザインのアイデアが浮かばない、そんなときもインスピレーションを与えてくれそうです。 01 CSS Mania CSS デザインといえば、まずここ 02 Most Inspired クールな CSS デザインを一括チェックできます。 03 CSS Impress ブログデザインの参考に 04 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards タグで分類されていて目的にあわせて選びやすい 05 CSSclip |

    お手本にしたい Web デザインのギャラリー10選 :: Love & Design ::
  • CSSベースの超クールなナビゲーション集:phpspot開発日誌

    CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine Navigation menus have to be intuitive, precise and easy-to-use. CSSベースの超クールなナビゲーション集。 どんなサイトにでも必ず必要になってくるのがメニューナビゲーションです。 秀逸なデザインのナビゲーションを参考にすることで、よいページデザインが作れそうです。 53種類ほどのクールなナビゲーションが紹介されているので、これは知っておいて損はないでしょう。 他のナビゲーションも見る

  • 1