CSSに関するeggxileのブックマーク (4)

  • WindowsでもMac OS XでもつかえるCSSの無料のオーサリングツール -Simple CSS

    スタイルシートを簡単に作成できる、Windows, Mac OS Xに対応した無料のオーサリングツールを紹介します。 Simple CSS — A Free CSS Authoring Tool [ad#ad-2] Simple CSSの対応OS Simple CSSはWin版とMac OS X版があります。 Windows 98/NT/2000/Me/XP/Vista/7 Mac OS X Universal (Intel/PPC) >Simple CSSのダウンロード 下記ページで、Windows版・Mac版がダウンロードできます。 Simple CSSのダウンロードページ [ad#ad-2] Simple CSSの画面 起動した際の画面は、下記のようになります。

  • [CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

    階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

    eggxile
    eggxile 2010/11/04
  • Firebugの使い方 | THE HAM MEDIA

    Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

    Firebugの使い方 | THE HAM MEDIA
  • CSS Sprites: What They Are, Why They're Cool, And How To Use Them | CSS-Tricks

    That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si

    CSS Sprites: What They Are, Why They're Cool, And How To Use Them | CSS-Tricks
    eggxile
    eggxile 2010/11/01
  • 1