タグ

CSSとweb制作に関するyonanonoのブックマーク (4)

  • css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox

    話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 直感でグラデーションやドロップシャドウを作成、リアルタイムでプロパティが変わってくれるのでいい勉強になりそうです。CSS3 Sandboxの4つのジェネレーターをご紹介します。 Linear Gradients グラデーションを作成出来ます。左上でWebkit(SafariやChrome)かFirefoxを選択、その下でプロパティを決めます。実装画面下部に実際のプロパティが表示されるのでどのような数値でどう変化するか、というのが分かると思います。 Text Sha

    css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox
  • CSSビギナーに気をつけてほしい5つのポイント | コリス

    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

  • IE 6とIE 7のためのCSSハック16選(1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer(以下、IE) 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック(IE 6のみに効く、もしくはIE 6のみに効かないハック) IE 6のみに効くハック スタ

  • CSSスプライトとは? | CSS Radar

    CSSスプライトとは? CSSスプライトという言葉を聞いたことがあるだろうか? ナビゲーションなどで画像を利用した際にマウスオーバーで画像を切り替えるという効果を加えるのによく利用される手法だ。 その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。 CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、 CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。 なぜCSSスプライト? CSSスプライトはなぜこれまでの手法よりも優れているのだろうか? 大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろ

  • 1