CSS3(132)

132follower
harada さんのアバター 608views

CSSセレクタ:liをカウントしてn個目以降非表示にする

5個目のliまで表示してそれ以降を非表示にしたい場合は以下のように記述します。 CSS li:nth-child(n+6) { display: none; } 参考::nth-childの使い方 ... 2015年6月26日
harada さんのアバター 297views

CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない

以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。 .grayscale { filter: gray; -webkit-filter: grayscale(1... 2015年6月22日
kayama さんのアバター 1,005views

nth-of-typeと子セレクタを組み合わせる(CSS3)

Elements:nth-of-type(n) は要素のn番目に対してCSSを定義できる。例えば以下のように使うと簡単に左右交互にdivを表示させることができる。 div.test{ float:left; } div.test:... 2015年6月1日
harada さんのアバター 7,351views

CSSだけでオープン・クローズできるアコーディオンを表示する

jQueryを利用せずとも、CSSだけでクリックで開け閉めできるアコーディオン表示を実現できるようです。 CSS .listAccordion label { background: #f6f6f6; padding: 6px ... 2015年5月13日
Yukimi Sato さんのアバター 28views

mixinでハック指定もまとめて書く

mixin @mixin border-radius($radius) { ←()の中に変数指定 -webkit-border-radius: $radius; ←同じ変数指定 -moz-border-radius: $ra... 2015年5月7日
Yukimi Sato さんのアバター 24views

SCSSでborder指定を綺麗にまとめる

div{ border:{ top:1px solid #000; left:3px solid #000; right:5px solid #000; bottom:none; } } ... 2015年4月30日
Yukimi Sato さんのアバター 12views

@extendでSCSSの記述をまとめる

li.user と li.room に同じ内容を適用したい時に、通常のcssなら li.user, li.room{ 適用したい内容 } と延々と書かないと行けないですが、@extend を使うと、 li{ &... 2015年4月28日
Yukimi Sato さんのアバター 45views

absoluteを使ってDivを高さ100%にする

HTML <div id="wrapper"> <div id="mainBlock">  高さ100%にしたいDiv </div> </div> CSS #wrapper{ po... 2015年4月27日
Yukimi Sato さんのアバター 27views

Sassで&を使ってCSSの記述をコンパクトにする

input[type="text"]{ border-color: #eee; background: #eee; &:focus{ background: #fff; } } ... 2015年4月24日
harada さんのアバター 195views

CSS3: ページ内リンクの飛び先にスタイルを適用できるE:target 擬似セレクタ

ページ内リンクで、飛んだあとのスタイルを指定することができます。つまりリンクをクリックする前と後で表示を変更できます。 CSS :target { color: red; } HTML <ul> <li>... 2015年4月20日
harada さんのアバター 174views

IE8では利用できない擬似セレクタ

あるdivの中でul要素が1つのみある場合に適用したいスタイルがあり、「:only-of-type」セレクタを使おうと思ったのですがこちらはIE8では利用できないようです……。 ※ :only-of-type についてはこちら「子要素が一... 2015年4月9日
Yukimi Sato さんのアバター 1,273views

Flexboxの使い方カンタンまとめ

Flexboxという夢のようなものが、徐々にモダンブラウザで安定した実装を行えるようになってきたということで、使い方の簡単なまとめをメモ。 参考:これからのCSSレイアウトはFlexboxで決まり! 基本の使い方 <div id... 2015年2月25日
harada さんのアバター 18views

E[foo$="bar"]セレクタで拡張子によってリンク色を変更する

E[foo$="bar"]を利用することでfoo属性の文末の値がbarで終わる場合に適用されるスタイルを指定できます。 CSS a { color:#000; } a[href$=".jpg"] { color:#f00; } ... 2015年2月20日
harada さんのアバター 422views

子要素が一つのみの場合に適用される「:only-child」と「:only-of-type」セレクタの違い

使ったことのないCSS3セレクタについて調べてみるシリーズです。 「:only-child」セレクタと「:only-of-type」セレクタはどちらも子要素が一つのみの場合に適用される指定なのですが、 他の子要素も含めるか含めないかで、使... 2015年2月19日
harada さんのアバター 19views

「::first-line」セレクタを利用して1行目のテキストを強調する

「::first-line」セレクタを利用することで、1行目のテキストを強調できます。 CSS p { font-size:13px; } p::first-line { font-size:22px; } ... 2015年2月12日
harada さんのアバター 572views

背景を透過させるのに便利なrgba記述とIE8以下での対応方法

rgba記述で背景を透過させると、文字は透過されないので便利です。 ですが、IE8以下では表示されないので別途記述が必要です。 rgbaで黒背景を40%透過で表示する場合 background: rgba(0,0,0,0.4); I... 2015年2月9日
harada さんのアバター 209views

「:not()」セレクタを利用して◯◯以外の要素へCSSを適用する

CSS3で追加された「:not()」セレクタを利用することで、CSSで条件指定を行うことが可能です。 「:not(?)」セレクタは?以外の内容に対してCSSを適用することができます。 ex. セレクトボックス以外のセレクトに高さを指定する... 2015年2月5日
goto_jp さんのアバター 1,152views

CSS3:背景色アニメーション

See the Pen GgmbBv by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSのみでbodyタグの背景色をアニメーションでじんわり変化させています。 サンプルはSassで書... 2015年1月22日
goto_jp さんのアバター 119views

CSS3:n番目の要素を指定するセレクタ

p:nth-of-type(2) { color: #f00; } 「:nth-of-type()」を利用します。 上記の指定に対して下記HTMLのような状態になります。 <p>対象外</p> <p... 2015年1月14日
harada さんのアバター 2,135views

CSS3の「appearance」でselect要素のアイコンを消す

下記のように記述することでセレクトボックスで表示される三角アイコンが消えます。 Firefoxのみ上三行では消せないため下二行を追加します。 select { -webkit-appearance: none; -moz-ap... 2015年1月6日