CSS3(131)

131follower
goto_jp さんのアバター 41views

CSS3:Gridレイアウトで簡単に作れるモバイル用レイアウト

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。 See the Pen Grid only App layout sample by Kazuyoshi... 2017年6月2日
goto_jp さんのアバター 117views

CSS3:フォントで画像をマスクする

CSSでフォントをマスク化する方法です。 マスクされてることが分かりやすいようhoverアニメーションも付けてます。 See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto... 2017年5月31日
goto_jp さんのアバター 82views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3Dの基本

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

CSSだけで作る万華鏡

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

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

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

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

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

flexboxの順序を入れ替える

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

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

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

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

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

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

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

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

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

【CSS】他の値と計算する

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

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

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