カテゴリー別アーカイブ: css

【Ruby Sass】Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.【更新されなくなるってよ】

css, ソフト全般（開発用）, 開発関連

今日なにげにsassをインストールし直したら下記が。。

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811

Successfully installed sass-3.6.0

あら。

Ruby SassメンテされなくなるからDart Sassに移行してねだって。

続きを読む 【Ruby Sass】Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.【更新されなくなるってよ】 →

深まりゆく秋、移ろいゆくブレークポイント（とポイント間のレンジ）2018

css, 開発関連

前にこういう記事をかいたのだが、あきらか変わってきているのでメモ

俺が考えるレスポンシブ対応最新のブレークポイント 2017 | hirokona

俺が考えるレスポンシブ対応最新のブレークポイント 2017

SP⇔PCデザイン切り替えのブレークポイントはまだ750pxあたりでいんじゃね？ってところから、だいぶ変わってきている気がする。

単純に、グロナビはいりきんねーから、とかレスポンシブの工数吸収とか、りあるな理由のやつがおおい気がする。
きゃんぺんさいとは特に顕著。

つまり、「でっかくなっちゃった」

正式にはスマホ画角として捉えられる範囲が、「でっかくなっちゃった」☆

SP画角と判断されるレンジは広く、PC画角と判断されるレンジは逆に狭くなってきている
なのでブレークポイントのポイントもそれに合わせて数値が大きくなっている場合が多い。

PCでみてて、あ、SPに切り替わるポイントはよなってきてるな〜とおもったので、サイトをメモしとく用に記事準備しておく。

続きを読む 深まりゆく秋、移ろいゆくブレークポイント（とポイント間のレンジ）2018 →

深まりゆく秋、移ろいゆくブレークポイント（とポイント間のレンジ）2018

css, 開発関連

前にこういう記事をかいたのだが、あきらか変わってきているのでメモ

俺が考えるレスポンシブ対応最新のブレークポイント 2017 | hirokona

俺が考えるレスポンシブ対応最新のブレークポイント 2017

SP　PCデザイン切り替えのブレークポイントはまだ750pxあたりでいんじゃね？ってところから、だいぶ変わってきている気がする。

単純に、グロナビはいりきんねーから、とかレスポンシブの工数吸収とか、りあるな理由のやつがおおい気がする。
きゃんぺんさいとは特に顕著。

つまり、「でっかくなっちゃった」

SP画角と判断されるレンジは広く、
PC画角と判断されるレンジは逆に狭くなってきている
なのでブレークポイントのポイントもそれに合わせて数値が大きくなっている場合が多い。

PCでみてて、あ、SPに切り替わるポイントはよなってきてるな〜とおもったので、サイトをメモしとく用に記事準備しておく。

続きを読む 深まりゆく秋、移ろいゆくブレークポイント（とポイント間のレンジ）2018 →

Noto Sans JPの使い方 2018

css, 開発関連, ,

何週間か前に書いたと思っていた記事が見当たらないのでメモ。
下記の2016年の記事が閲覧ランキングに上がっていたので、８月の案件で再度調べたときの参考URLをちょいちょい補足します。

Noto Sans JPをCDN経由で使う

2018/8/27にツイッターで投稿されてた劇的にロードが早くなった日本語漢字フォント、にはいっていました

https://fonts.google.com/?subset=japanese

これはアーリーアクセスでなくても早くなったってことなのかしらね。
続きを読む Noto Sans JPの使い方 2018 →

フォーム系memo jsで制御する場合にもhtml5デフォルトのバリデーションを機能させる

css, , , , , ,

デフォルトのバリデーションを残すmemo

formタグに　onsubmitでreturn false →デフォルトのバリデーションはされるが、送信は行われない
ボタンにonclickかonsubmitでJS制御を追加

【JavaScript入門】submitイベントで入力フォームの送信処理をする | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

フォーム系memo cssトグルスイッチでフォームパーツを制御

css, , , , ,

チェックボックスでトグルスイッチ

のび太スニペットくれよ〜と言わんばかりにネットで探す。

さいしょにめっけたやつ
円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法！｜SeleQt【セレキュト】

円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法！

結局コレ参考にしたよってやつ
Simple CSS Toggle Switch — Create a toggle switch with only a checkbox
https://danklammer.com/articles/simple-css-toggle-switch/

最初に選んでから記事が読めて便利
CSS3 Toggle Switch Button – HTML Lion
https://www.htmllion.com/css3-toggle-switch-button.html

色んなデザイン
10 Free Customizable CSS Snippets for Radio Toggles & Switches – 1stWebDesigner

10 Free Customizable CSS Snippets for Radio Toggles & Switches

How To Create a Toggle Switch
https://www.w3schools.com/howto/howto_css_switch.asp

トグルスイッチと他のパーツのdisabledを連携させる

【jQuery入門】checkboxのchecked設定や取得まとめ！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

【jQuery入門】checkboxのchecked設定や取得まとめ！

input 要素の disabled 属性と readonly 属性の違い: 小粋空間
http://www.koikikukan.com/archives/2009/04/26-003300.php

inputがdisabledの時のCSSを指定する | CloudAdvisor

inputがdisabledの時のCSSを指定する

2014-04-11 1st – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/Yukimi.Sato/5y3C

jQueryでshow/hide, addClass/removeClass, disabledの切り替えを一行で書く
https://qiita.com/nmta/items/0f5c460d135c4f72dc4a

IEばくはつしろ！animationでcalc使ってたら死ぬ

css, 開発関連, ,

keyframe内でwidthにcalc使ってたら死ぬぞ！
IE１１もedgeももれなくだ！！

IE10 / IE11で複数設定したCSS3のアニメーションが動かなかったときのはなし | 尼崎市でWEB制作してます［s-oyama.me］

IE10 / IE11で複数設定したCSS3のアニメーションが動かなかったときのはなし

こういうのもあるらしい
mediaquery内でkeyframeを定義しちゃダメ
↓
IE11のバグまとめ
https://qiita.com/sawadays0118/items/bd0731878e9eb49c03f5

ひさしぶり　svg IE11 高さauto バグる

css, ,

bodymovinのsvg突っ込んだら久しぶりにIEさんの制御不能に出くわすなど。
height:autoナシでwidthだけCSSで指定したら治った

IEでSVGタグを使った時にheight:autoが効かない | ふたえごのWEBテクニックブログ
https://www.futaego.com/2017/ie%E3%81%A7svg%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%99%82%E3%81%ABheightauto%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84/