CSS3(128)

128follower
goto_jp さんのアバター 2,471views

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

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

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

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

CSS3:文字や画像を選択できなくする

ブラウザ上の文字をドラッグしたり、ブラウザ上をWクリックすると選択状態になりますが、「user-select」プロパティを使うことでその選択をできなくします。 -webkit-user-select: none; -moz-user-se... 2014年10月17日
harada さんのアバター 526views

CSSだけでたすき掛けの新着マークを表示する

表示サンプルはこちら サンプルCSS .btnBox a { background:#EEE; position: relative; display: inline-block; height: 120... 2014年10月16日
goto_jp さんのアバター 1,576views

CSS3:サイズ不明でもどのような要素でも縦中央配置する

.class { position: relative; top: 50%;   -webkit-transform: translateY(-50%);   -ms-transform: translateY(-50%);   t... 2014年9月18日
goto_jp さんのアバター 2,030views

CSS3:簡単に段組を作れる「columns」プロパティ

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ さしすせそさしすせそさ... 2014年9月16日
goto_jp さんのアバター 1,758views

リスト(<li>)のマーカーにWebフォントを使う

画像を使わずリストマーカーを変更するサンプルです。 See the Pen list marker FontAwesome by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML &... 2014年9月8日
Yukimi Sato さんのアバター 129views

-webkit-text-size-adjustにnone指定はしてはいけない理由

スマートフォンで横向きにした時に文字が大きくなるのを防止するで使用する-webkit-text-size-adjustですが、none指定をしてはいけない理由があります。 参考:-webkit-text-size-adjust: none... 2014年9月1日
Yukimi Sato さんのアバター 270views

スマートフォンで横向きにした時に文字が大きくなるのを防止する

body{ -webkit-text-size-adjust:100%; } ... 2014年9月1日
Yukimi Sato さんのアバター 367views

IEでHTML5やCSS3を有効にできるレンダリングモード

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> IE=Edge:最新のモードを利用する chrome=1:「Chrome Frame for I... 2014年8月27日
Yukimi Sato さんのアバター 292views

placeholderの文字色を変更する

//Chrome input::-webkit-input-placeholder{ color: red; } //FireFox input:-moz-placeholder{ color: red; } //IE input:-m... 2014年8月6日
goto_jp さんのアバター 225views

CSS3:自サイトURL以外へのリンクにスタイルを適用する記法

a:not([href^="http://www.example.com"]) { //スタイル } 「:not」の非該当セレクタに属性セレクタの合わせ技です。 「:not」は条件に該当しない場合にスタイルを適用するセレクタで... 2014年8月4日
goto_jp さんのアバター 172views

CSS3:ある一定パターンのクラス名に一律してスタイル定義する

例えば「icon-gear」「icon-tool」など、一定パターンの名前を持つクラスに対して一律して同一スタイルを定義する方法です。 [class^='icon-'] { //スタイル } 属性セレクタを使い、「^=」で前方... 2014年8月1日
Yukimi Sato さんのアバター 250views

borderを重ねてアクティブ状態を示す

#header{ padding: 0; border-bottom: 1px solid #e2e2e2; //この線の上にアクティブ状態のborderを重ねます z-index: 1; } #header ul{ padding: 0... 2014年8月1日
goto_jp さんのアバター 325views

CSS3:特定の画像に対してスタイルを適用する

img[src$="test.png"] { //スタイル } 属性セレクタの記述方法ですが、クラス名に限らずあらゆる属性値を参照できます。 srcを「$=」で後方一致させることで特定の画像に対してスタイルを適用させるテクニッ... 2014年7月28日
goto_jp さんのアバター 626views

CSSアニメーションの超基礎

CSSアニメーションの特殊例は避けて超基本的な内容を記してみます。 サンプルはこちら。 See the Pen njaCe by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リンクのho... 2014年7月10日
goto_jp さんのアバター 721views

CSS3:iframeとtransformでスマホ実機風プレビュー

サンプルはこちら。 See the Pen kHIpz by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. transformはなんでも変形させられるので、iframeもこのように表示させる... 2014年7月10日
goto_jp さんのアバター 585views

CSS3:CSSだけでツールチップ

サンプルはこちら。 See the Pen CSS only Tooltip by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リンクにマウスオンでツールチップが出ます。 CSS(Sas... 2014年7月9日
Yukimi Sato さんのアバター 2,391views

CSS3のみでplaceholderをフォーカスした時に空にする

input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } input:... 2014年6月27日
goto_jp さんのアバター 1,283views

CSS3:アイコンに回転アニメーション

サンプルはこちら。 See the Pen rncjE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. オンマウスでアイコンがアニメーションします。 CSS(Sass) a { ... 2014年6月24日