CSS3(131)

131follower
goto_jp さんのアバター 2,875views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リスト(<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 さんのアバター 370views

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 さんのアバター 300views

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 さんのアバター 256views

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

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

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

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

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

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

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

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