CSS3(126)

126follower
harada さんのアバター 70views

読み込むだけで画像にInstagramのような加工ができるCSSライブラリ「CSSgram」

利用方法 CSSライブラリをダウンロードします。 CSSgram フィルターをかけたい画像に該当のクラスを指定します。 <img src="" class="aden" /> 外側のクラスでも大丈夫です。 <f... 2016年11月24日
goto_jp さんのアバター 63views

ヒラギノ角ゴが太く見える問題を解決する:その2

以前下記の内容を書きました。 ヒラギノ角ゴが太く見える問題を解決する MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。 旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChr... 2016年10月20日
Yukimi Sato さんのアバター 10views

Safari(〜9系)でのcssアニメーション指定

10系(最新)ではanimationで全部纏めて記述できるのですが、〜9系は -webkit 接頭語とそれぞれを指定してあげる必要があります。 -webkit-animation-name: topBtn; -webkit-animati... 2016年10月20日
goto_jp さんのアバター 34views

CSSだけで数値をカウントし表示する

サンプルはこちら。 See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLにもCSSにも数値は書いておらず、連番リ... 2016年10月5日
goto_jp さんのアバター 22views

CSS3Dの基本

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSだけで3D空間を作れます。 「Jade」、「Scss」表示の「VIEW COMPILED」か... 2016年9月29日
goto_jp さんのアバター 121views

CSSだけで作る万華鏡

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確... 2016年9月27日
goto_jp さんのアバター 102views

ヒラギノ角ゴが太く見える問題を解決する

MacのChromeだけで妙にフォントが太く感じ、実際に font-weight:300 を指定しても500以下は無視されていたので調べたところ、下記のことが分かった font-family にこれまで「 Hiragino Kaku G... 2016年9月7日
goto_jp さんのアバター 63views

CSS3 : 画面サイズで相対指定できる「vh」と「vw」

まずはサンプルから。 See the Pen Full window contents by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. Box1〜3と書かれた3つの<section... 2016年8月26日
goto_jp さんのアバター 61views

flexboxの順序を入れ替える

一昔前は左右逆なレイアウトを作る時は float を使うことが多かったですが、CSS3のflexboxを使えば簡単にできます。 See the Pen CSS3 Flexbox : 左右並び替え by Kazuyoshi Goto (@K... 2016年8月10日
kayama さんのアバター 117views

[CSS3]calc()をつかって単位が異なる値を計算する

単位が異なる値同士で計算(たとえば100% – 170px)をすると通常はエラーになってしまいます。 しかし、CSS3で登場したcalc()を使用すると可能になります。使い方は以下です。 CSS3 /* % - px */ ... 2016年2月4日
harada さんのアバター 4,608views

CSS3では背景画像を複数重ねて指定・表示できる

CSS3ではひとつの要素に対して複数の背景画像を重ねて表示できるようです。 左側に記述したものが上になる ので、記述順番に注意すれば簡単に実行できますね! 記述例 div { background: url(img/bg_bottom.... 2015年10月28日
Yukimi Sato さんのアバター 56views

【CSS】box-shadowで外側に罫線を付ける

border-boxを付けない限りは幅、高さにborderは干渉しますが、完全に外側に付けるにはbox-shadowで以下のように指定すれば可能なようです。 div { box-shadow : 0 0 0 10px #000; ... 2015年8月7日
Yukimi Sato さんのアバター 44views

【CSS】[class*="XXX"]でXXXが名前に入っているclass全てに指定する

bootstrapのCSSを見ていたら見慣れない指定が。 .controls-row [class*="XXX"] { margin-left: 0; } なんだろうと調べてみると、 どうやらclass名にXXXが含ま... 2015年8月4日
Yukimi Sato さんのアバター 24views

【CSS】他の値と計算する

$headerHeight : 100px; $menuHeight : 40px; #wrapper { padding-top : $headerHeight + $menuHeight; } こうすることで高さが変わっても一箇... 2015年7月16日
harada さんのアバター 275views

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

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

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

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

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

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

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

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

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日