[B! CSS][CSS3] unijamのブックマーク

スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ属性セレクタ構造疑似クラスターゲット疑似クラス UI要素状態疑似クラス否定擬似クラス属性セレクタ属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。【例】リンクの属性がhttpを含む（外部リンク）場

unijam 2014/03/20

リンク

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

unijam 2013/12/12

リンク

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。色によっては、蛍光ペンや絵筆みたいにもできますね。デモページ ※リンク切れ実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。スラッシュで区切ることにより、水平

unijam 2013/04/19

リンク

リストの最初と最後だけ違うスタイルを適用したいときのCSS

これの応用編。例えば、こんな風に、リストの１つ１つの項目が枠線で囲まれてる場合にどうするか？しかも、境界線部分が点線、それ以外は実線になっているなら。 <ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul> HTMLは↑こんな感じ。リストの最初と最後にクラスを指定する。「:first-child疑似クラス」と「:last-child疑似クラス」を使う。「:last-child疑似クラス」の代わりに「expression」を使う。jQueryを使う。ULに枠を付ける。思いついたのはこの5つの方法。 HTMLのタグを修正できる場合リストの最初と最後にクラスを指定すればいい。 <ul> <li class="first">メニュー１</li> <li>メニュー２</li> <

unijam 2013/03/04

リンク

:last-child疑似クラス (E:last-child)｜セレクタ｜CSS HappyLife ZERO

CSS3で定義された:last-child疑似クラスは、ある要素内で最後に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最後のli要素に適用されるといった具合です。ちなみに、CSS3で定義された疑似クラスの、:nth-last-child(1)と同じ扱いになります。この疑似クラスは後から数えるだけで、:first-child疑似クラスと同じです。同じですが、定義されたのがCSS3のため、IE8までは対応していません。サンプル付きの説明に関しては、最初を最後に脳内変換して「:first-child疑似クラス」を参照してください。対応ブラウザ関連性が深いページセレクタのグループ化【CSSの基本】優先順位・個別性・!important宣言【CSSの基本】リンク擬似クラス（E:link, E:visited）【セレクタ】ダイナミック擬似クラス（E:acti

unijam 2013/03/01

リンク

なぜリセットではなく Normalize.css を使うのか | Yomotsu net

まずは、歴史をみてみよう。初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで

unijam 2013/02/26

リンク

CSSだけで幅を超えた文字列を...で省略する - Qiita

ある幅に合わせて文字列を省略したいときがありますが、レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }