CSS3(129)

129follower
goto_jp さんのアバター 37views

CSS Gridレイアウト入門:グリッドの結合と列番号・行番号の概念

以下はGridレイアウトで画面全体をレイアウトした例です。 ブログによくあるレイアウトですが、Gridレイアウトでは列と行が要のため赤線を入れています。 See the Pen CSS Grid layout test 4 by Kaz... 2017年5月16日
goto_jp さんのアバター 66views

CSS Gridレイアウト入門:「fr」でのサイズ指定

Gridレイアウトで幅指定をする際に「fr」という値を使えます。 See the Pen CSS Grid layout test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ... 2017年4月25日
goto_jp さんのアバター 72views

CSS Gridレイアウト入門:基本の3プロパティ

まずはサンプルをご覧ください。 See the Pen CSS Grid layout test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルは10個のdivタグに... 2017年4月19日
harada さんのアバター 79views

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

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

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

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

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

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

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

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

CSS3Dの基本

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

CSSだけで作る万華鏡

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

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

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

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

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

flexboxの順序を入れ替える

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

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

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

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

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

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

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

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

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

【CSS】他の値と計算する

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

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

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

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

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

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

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