主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

メイリオを CSS で斜体にする方法

CSS

いろいろ思案した結果、em で括ったとこにだけ font-face 指定するのがベターそう。 @font-face { font-family: 'Meiryo-italic'; src: local('Meiryo'), local('メイリオ'); } em { font-family: 'Open Sans', 'Meiryo-italic' , sans-serif; font-style: i…

2017年の11月に築40年の中古物件を買った話

かなり前に書いたまま下書きで放置されていたので2020年にもなってもったいないので公開しておこうと思います。※この記事の税に関わる情報は古くなっている可能性があります。あくまでも個人的な記録としてご査収ください。 2017年の11月に築40年の中古物件…

60hz のモニタと 144hz のモニタを デュアルモニタで使うと 60hz になる問題の解決方法

まず、144hz のモニタは、体外そのまま使用すると 144hz出ていないので、Windowsの設定をいじる必要があります。設定方法はこちら 121ware.com で、これをやった上で、 hiroshi-gamepc.com 以上の記事のとおり、自分も同じ現象になって、いろいろ試して全部…

:focus-within は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…

衝撃!Mac の Firefox で Tabキー移動したいときはシステム設定いじる必要がある

最近、諸事情から Firefox に乗り換えたんですけど、Tabキーでフォーカス移動したいところにぜんぜんいけなくて、どうやらボタンとかフォームは移動できるんやけど、アンカーリンクに移動できない。あれ、バグってる?と思って、いろいろ調べていたら、 stac…

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…

html font-size: 1px で body font-size: 16rem

CSS

ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。 butchi.github.io 62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、 qiita.com ブラウザの最小フォン…

TypeScript の型宣言の ?

TypeScript の型をインターフェース宣言してるときにある? interface Props { className?: string; children?: string; } なんやこの ? と思ってたんですけど、必須のプロパティじゃないときにつけるみたいです。 参考: TypeScript 型と型宣言の備忘録

webpack 4系、ts-loader 4系、storybook 4系にしたときに出る謎のエラーを解決

React で storybook を使ってコンポーネントベースのUI開発をするっていうのが、こんな書籍も出てるぐらい Atomic Design ~堅牢で使いやすいUIを効率良く設計する作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本(ソフトカバ…

Wordpress のパーマリンク設定のカスタム構造の postname を .html から スラッシュ終わりにしたら、スラッグが数字のみのページが 404 になる

Wordpress のパーマリンク設定のカスタム構造のパスを、 .html 終わりから / 終わりに変更したら スラッグが数字のみのページが 404 になってしまいました。 いろいろ調べたのですが、 パーマリンクの使い方 - WordPress Codex 日本語版 一日に一投稿しか公…

Mac でさくっとローカルサーバーを起動する方法

Mac

Mac標準のターミナルからApacheを起動する MacにはApacheが標準でインストールされているらいいです。 Apacheの起動 sudo apachectl start ブラウザで http://127.0.0.1/ を確認すると、「It works!」と表示されるかと思います。 これは、/Library/WebServer…

2017年の福岡出張

今年も会社の行事で福岡に行った。 毎年、その行事が終わったあと、どっか行きたいなぁ、と思うんですが、今年はYCAMというずっと行きたいなぁ、と思っていた山口にあるメディアアートの施設に行こうかなと調べたら、ちょうど何もやってなくて、ほんなら、と…

東京、巡り 2017・5

出張で1年ぶりぐらいに東京に行ったので、またまた1日多めに滞在してぷらっとしたので、感想を書いた。 東京都現代美術館は果たしていつまで改修するのか。 坂本龍一設置音楽展 ryuichi sakamoto async(ワタリウム美術館) 初めてワタリウム美術館に行った…

英語学習、これまでとこれからの2年

2年ほどまえに現在の会社に転職して以降、英語の勉強をだらだらとマイペースに続けていたのだけど、いろいろあって2年後の2019年4月までに、ある程度ガッツリ英語が使えるようにならないといけない感じになってきたので、最近までだらだらやってきたことを一…

いきなり IIJmioから送られてきたもの

IIJmio認定バッチ。 いらんし!とか思って、なんで送られてきたのか調べたら www.iijmio.jp このキャンペーンの、5名以上紹介でもらえる特典でした。 nakagaw.hateblo.jp nakagaw.hateblo.jp この記事からかーっとおもったら、、すごない!?

2016年 Hulu で見た映画の感想ダイジェスト

マッド・ガンズ ★★★★☆ 2014年、アメリカ、ジェイク・パルトロー監督・脚本・製作作品。異常気象により水不足が深刻化した近未来を描いたSF映画であるが、いわゆるSFっぽいSFではないというか、登場する武器やロボットとかがかっこいいとかではなくて、あくま…

Pure Data の進捗 #1

Pd Recipe Book -Pure Dataではじめるサウンドプログラミング(単行本)作者: 松村誠一郎出版社/メーカー: ビー・エヌ・エヌ新社発売日: 2012/02/23メディア: 単行本(ソフトカバー)購入: 3人 クリック: 164回この商品を含むブログ (4件) を見る 大体 半分ぐ…

Pure Data ことはじめ 2017

年末あたりからシンセサイザーとか電子音楽ブームが来てて、4、5年前にこの本買って1回挫折してる Pure Data をポチポチやり始めてる。 Pd Recipe Book -Pure Dataではじめるサウンドプログラミング(単行本)作者: 松村誠一郎出版社/メーカー: ビー・エヌ・エ…

svg をまとめて圧縮したいとき

SVG

svg を illustrator から書き出しただけだと、けっこう無駄なタグがはいってるので最適化しておきたい。 jpg や png とかは Webサイトで一括でできるやつとかがあって、わりと手軽やけど、 TinyPNG – Compress PNG images while preserving transparency Com…

table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう

CSS

Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。 position: relative; している td に backgr…

gulp media queries まとめる系プラグインで @supports が消えてる件

かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。 いろいろ調べてたら…

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出る

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。 こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ち…

東京、展覧会巡り 2016・9

出張で8年ぶりぐらいに東京に行ったので、1日多めに滞在して、観光がてら展覧会巡りをしたので、感想を書いた。 杉本博司/ロスト・ヒューマン(東京都写真美術館) 杉本博司さんの作品はやたらどこか行くたびに見てる気がするけど、いつものように特に何も…

SVGシンボル化(SVGスプライト)

けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが) Delivering Octicons with SVG · GitHub そろそろアイコンファイルの主流はSVGになりつつある…

2016年に見た海外ドラマ

アンダー・ザ・ドーム ★★★☆☆ LOSTとかウォーキング・デッド的な食料と人間の生存をテーマにしてるものが好きなので、見てみたけど、最後の方、LOST的な霊的な宇宙人的な展開なって残念だった。途中のドームの中にドームとか、出たり入ったりとかあたりまでは…

position: fixed; してるのに、親要素の相対っぽい感じになる

CSS

position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。 transform: translateY(0); もうちょっと調べてみると、translateY、ではなく、"Tran…

2015年に買ってよかったもの

1. IIJmio SIM with Nexus 5 詳細はこのあたりで。 nakagaw.hateblo.jp nakagaw.hateblo.jp これまで嫁と自分の合わせて16,000円以上かかってた月額料金が、(iPhone5sの残債とNexus5代があるとはいえ)2人で5,000〜6,000円になったインパクトはでかい。 2. …

あのコミットのファイルだけこのブランチ取り込みたいときは git cherry-pick

Git

develop ブランチでいろいろごにゅごにょしたあとに、masterにマージしたい。 でも、マージしちゃいけないコミットも混ざってる。 そんなときは、 git cherry-pick を使うと、別のブランチで作業したコミットファイルを取り込めます。まさにチェリーをピック…

映画「セッション」

引用元:http://www.fashion-press.net/news/14641 弱冠28歳のデイミアン・チャゼル、監督・脚本作品。 京都シネマの名画リレーのチラシで見て、雰囲気がいい感じだったので、見たいなぁ、と思ってました。 映画館に見に行くのもよいけど、いちいち街に出た…

急に node.js が動かない系のとき。

急に node.js が動かない系のことがあると思います。 zsh: command not found: node とか、 env: node: No such file or directory とかなったとき。 そんなときは、とりあえず、'brew doctor' $ brew doctor Please note that these warnings are just used…