CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。 コードごとに対応ブラウザも表示されるので、かなり便利です。
.drop-shadow.top { box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.right { box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .drop-shadow.bottom { box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); } .drop-shadow.left { box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4); }
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く