Sign in Subscribe

YOSHIDA NEKOHA

猫派。ゲーム、マンガ、アニメなどインドアなものが好きです。キーボード作れます。

CSS3 transform translate系まとめ

transform: translate 系まとめ transform: に組み合わせる translate 系の関数。 x, y は普通に効くけど z 座標はブラウザによって表示が異なります。使える関数 * translate(x, y=0) * translateX(x) * translateY(y) * translateZ(z) * translate3d(x, Y=0, z=0) transform 系の要素について適用する要素のpositionはabsoluteにする必要があります。検証サンプルわかりやすいようにアニメーションしていますが、下記の CSS のままではアニメーションしません。 translate(x, y = 0) y が未指定のときは 0 扱いです。 /* x方向に20px, y方向に10px */ .translate { transform: translate(

CSS3 transform rotate系まとめ

transform: rotate 系まとめ transform: に組み合わせる rotate 系の関数。使える関数 * rotate(angle) * rotateX(angle) * rotateY(angle) * rotateZ(angle) * rotate3d(x, y, z, angle) transform 系の要素について適用する要素のpositionはabsoluteにする必要があります。角度を表す数字は<angle>データ型を使用します。一周 360 度でおなじみの度(deg)やラジアン(rad)、グラード(grad)、1 回転を表すturnなどが使えます。時計方向がプラスの値、反時計回りはマイナスの値を指定します。検証サンプル動きがわかりやすいようにアニメーションしているので、ちょっと CSS が冗長です。 rotate(z) 画像を時計回りに回転します。 .anm-rotate

Mojaveにアップデートしたら文字がぼやけるんだけど？

MacOS Mojave(モハベ)がリリースされたので、アップデートしました。以前のアップデートのときもgitコマンドが使えなくなったりしたことがあったので、不具合は覚悟していたのですが。 VSCode が暗い仕事でもこのブログ書くときも VSCode を使用しています。 Mojave にアップデートして Dark モードにしてからというもの、VSCoce までもがなんだか暗い。具体的には、エディタの文字が薄暗くなり、とても見にくくなっていました。高 DPI のディスプレイじゃないと発生するようだ。 5 ちゃんねるのVisual Studio Code / VSCode Part4というスレッドの 723 で対応策を発見。 > macOS 10.14（Mojave）にアップデートした場合、高 DPI モニタを使用していない場合、VSCode のフォントがぼやけて見えることがあります。高 DPI の定義って？ちなみに自分の環境は MacbookPro2016(with TouchBar)

WSLにnode.jsをインストールする

node.js のインストール node.jsをインストールするだけなら問題ない。 sudo apt install nodejs npm が動かない？ Mac だと、インストールしたら一緒にnpmコマンドが使えるのですが、WSL で上記のコマンドだけだとnpmがインストールされません。 > npm : not foundram Files/nodejs/npm: 3: /mnt/c/Program Files/nodejs/npm: : not foundram Files/nodejs/npm: 5: /mnt/c/Program Files/nodejs/npm: /mnt/c/Program Files/nodejs/npm: 6: /mnt/

ブログでフロントエンドコードを実行したい！

Hexoで文章を書くのは良いのだけれど Hexoでブログを書くのはとても快適です。コードを載せるのも快適です。ただ、HTMLとJavaScriptとCSSを組み合わせて、実際に動くページを作ろうとするとちょっと煩雑。。。 babelとかautoprefixorとか用意するの面倒だし。解決！別サイトを立ち上げたコード見るより、動きを見たほうが良いことってありますよね。同じくコード見せるより動きを見てほしいこともあるんです。ってなわけでnuxt.jsをベースに、別サイトを立ち上げました。猫好きが猫以外のことも書く[技術検証ラボ] ページヘッダのネコが、時々なにかをつぶやきます。 2019/11/12 追記このサイト自体をNuxt.js化したのでもう別サイトは必要なくなりました。。。

firebase functionsをローカルでテスト

前回:firebase functions でサーバレス APIの続き firebase functionsでは、デプロイしなくてもローカル環境でテストが可能です(できないテストもあります)。せっかくなのでオリジナルのプログラムを作って、ローカル環境で動作確認をしてみます。おみくじ API を作るとりあえず動けばいいのでガバガバの仕様。 * GET で API が呼ばれる * JSON 形式で大吉〜大凶を返すこれだけ。レアくじの出現率なんか気にしない。平等です。おみくじ Function を作成 const functions = require('firebase-functions'); // cors許可のためインポート const cors = require('cors')({ origin: true }); const kuji = ["大吉", "中吉&

TouchBarでファンクションキーを使う

Mac のTouchBar使ってますか？ボリューム調整とか輝度調整とかすぐにアクセスできて便利ですが、アプリによってはそんなものよりファンクションキーを表示してくれ！ってこと、ありますよね。開発でEclipseやChrome、VisualStudio Codeなどを使っていると、fnキーを押さずにすぐF1〜F12キーを使いたくなるものです。ならないならモグリ。設定方法 Mac の設定から、特定のアプリのみファンクションキーを有効にすることができます。 * 「システム設定」→「キーボード」→「ショートカット」から「ファンクションキー」を選ぶ * 「＋」ボタンを押して、ファンクションキーを表示したいアプリケーションを選択して「追加」これで OK。特定のアプリだけに設定する利点「システム設定」→「キーボード」の直下にも「TouchBar に表示する項目」から選択できますが、すべてのアプリに適用されてしまいます。自分の場合、この項目は「App コントロール」にしています。 PhotoShopやExcelなど、(あまり使いませんが)Tou

CSS filterで複数の効果

filter は多重がけできない？例えば下記のような CSS でblurとdrop-shadowを２つ適用しようとしてもうまくいきません。 <img class="cat center dbl-filter" src="/images/site/cat.svg" title="SVGねこ" /> /* ぼかしと影を同時適用できず、最後のフィルタが有効となる */ .dbl-filter { filter: blur(3px); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6)); } 最後に定義したフィルタが適用されます。これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。 1

CSS filter - 画像をぼかす

filter: blur で画像をぼかす画像をぼかしてみます。 blur 関数ねこ画像にblur関数でぼかしをかけてみます。関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。 <img class="blur" src="/images/site/cat.svg" title="SVGねこ" /> /* filterでぼかし */ .filter-blur { filter: blur(10px); } .filter-blur:hover { filter: blur(0px); } filter:blur リファレンス MDN のサイトが参考になります。 blur() ねこ画像 by 素材 Library.

CSS filter - 画像に沿って影をつける

CSS だけで、画像に沿って影をつけたい！ box-shadow しか知らないあなたへつい最近まで私もそうでしたが、img タグの画像に影を付けるときはbox-shadowを使っていました。皆さんご存知の通り、box-shadowでは画像の内容がどうであれ、画像の外枠にしか影が付きません。しかし最近、いろいろ SVG や透過 PNG 画像を扱うようなり、画像の形を活かして影をつけたい要望も増えてきました。そこで今回は画像の形で影を落とす、CSS のfilter: drop-shadow関数を使ってみます。まずは box-shadow のおさらいまずは通常のbox-shadowです。  <img class='box-shadow' src='/images/site/cat.svg' title='SVGねこ'/> /* box-shadow