タグ

tipsとcssに関するpiranoのブックマーク (3)

  • RedLine Magazine : 気になった初期化CSS

    気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ(*)なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが

  • CSSを短く書く方法いろいろ:phpspot開発日誌

    クールで滑らかに動作するscript.aculo.usベースのアコーディオンUI「Ac... 次の記事 ≫:色に関する便利WEBサービスいろいろ Create smaller CSS files ・PiticStyle CSSを短く書く方法いろいろ 色の指定を短く color: #ffffff; color: #ff88ff; ↓ color:#fff; color:#f8f; paddingやmarginの指定を一括で padding-left:10px; padding-right:20px; padding-top: 0; padding-bottom:30px; ↓ Padding: 0 20px 30px 10px; セレクタの一括指定 h1{ margin:0; padding:0; } h2{ margin:0; padding:0; } h3{ margin:0; padd

  • ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方

    こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l

  • 1