CSS3(126)

126follower
Yukimi Sato さんのアバター 11views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3:ローディングアイコンとCSSアニメーションの考え方

See the Pen CSS only indicator by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. こちらのローディングアイコンはCSSのみで表現しています。 明滅が回転してい... 2014年12月22日
goto_jp さんのアバター 2,683views

CSS3:CSSだけでテキストグラデーションを作る

See the Pen CSS Only text gradation by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSのみでテキストグラデーションを行う例です。 CSSの中で要の... 2014年12月18日
goto_jp さんのアバター 203views

CSS3:CSSのみでのアコーディオン表現

See the Pen CSS only accordion by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 実はそんなに難しいことしてません。 <div class="layer... 2014年12月17日
goto_jp さんのアバター 2,562views

CSS3:iOSのSafariのセレクトメニューをCSSで加工する

iOSのSafariでselectタグを使って出すセレクトメニューには、直接CSSが効きません。 なので、根本的に一回セレクトメニュー以外のものに定義してしまいます。 select { -webkit-appearance: b... 2014年10月30日
goto_jp さんのアバター 2,340views

CSS3:CSSだけでチェックマークを作る

サンプルはこちら。 See the Pen HfzuE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. SCSS後半の下記の部分でチェックマークを表現してます。 長方形の擬似要素をつくり... 2014年10月29日
goto_jp さんのアバター 3,308views

CSS3:IE10からテキストフィールドに勝手に入る×ボタンを消す

IE10以降からテキストフィールドに入力すると、クリアするための×ボタンが勝手に入ります。 これはCSSで消すことができます。 input[type=text]::-ms-clear { display: none; } ... 2014年10月23日