cssとHTMLに関するkachikachi2のブックマーク (3)

  • Material Design

    Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

    Material Design
  • 【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。

    先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。 しかしながら、HTML5ではmarqueeタグは非推奨。 今後は廃止予定のタグということで、別の方法を模索。 jQueryでの実装も考えましたが、CSS3を使ってより簡単にmarqueeを再現できるので、コチラを採用しました。 実際のコードは以下。 .marquee { overflow:-webkit-marquee; white-space:nowrap; } これだけでOK! とりあえず、Android 2.3以降のデフォルトブラウザ・iOS5以降Safariでは問題なく動作します。 他の端末や対応していないブラウザでの挙動が怪しいのが難点です。 細部までこだわるなら、動き方、動く範囲、動くスピード、繰り返す回数など、それぞれ任意に指定できます。 -webkit-

    【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。
  • CSSで画面全体に対して天地中央に配置するテクニック(2) | 先端研究ブレイドLAB

    CSSで天地センターに配置するテクニック第2回目です。今回は定番テクニックの問題点を解決する方法をご紹介します。 produced by Blades co.,ltd. 前回のエントリーで、CSSで画面全体に対して天地中央に配置するテクニック(1)として定番のテクニックをご紹介しました。今回は前回の手法の問題点を解決する別のテクニックをご紹介したいと思います。 定番テクニックの問題点のおさらい 定番のテクニックである「絶対配置+ネガティブマージン」にはコンテンツ表示上の大きな問題があります。それは、ブラウザの表示スペース(つまりbodyの大きさ)がコンテンツ表示領域(divなど)よりも狭い場合、コンテンツの全体が表示されないと いうことです。 これをわかりやすく説明するために、ブラウザで表示した例を見てみましょう。ソースは前回のエントリーでサンプルとして挙げたものを少し改変します。 HTM

  • 1