h's blog

備忘録とか勉強とか

translateXを使ったときに、IEで表示すると水平スクロールバーが表示されてしまう問題への対処法

f:id:hiro0164:20180218191418p:plain

画像とテキストを重ねて中央寄せするときなどに、translateXが便利でよく使っているのですが、IEだと水平スクロールバーが表示されてしまう事があります。

以下のサンプル(もしくはこのページ)をIEで表示するとサンプルデモの結果表示の下部に水平スクロールバーが表示されてしまいます。(Firefox, Chromeで表示した場合は問題なく表示されていると思います。)

See the Pen translateX by m (@m3816) on CodePen.

この場合の対処法は、以下の通り。

See the Pen translateX with overflow-x: hidden by m (@m3816) on CodePen.

bodyにoverflow-x: hiddenを指定することで水平スクロールバーが表示されなくなります。

人気どころのオンラインエディタを比較 / CodePen, jsFiddle, jsbin, Plunker, jsdo.it

f:id:hiro0164:20180216024721j:plain

記事を書くのにオンラインエディタを使うようになったので、人気どころを調べてみました。

以下の記事を参考にGoogleトレンドで比較。(以下の記事には入っていませんが、国産っぽいjsdo.itも比較に入れました。)

続きを読む

矩形、正方形、円形に画像を切り取って表示するmixin (レスポンシブ対応)

f:id:hiro0164:20180216025135p:plain

毎回、切り取り画像をcssで記述するのがめんどうなので、mixin化しました。

コードは以下の通り。

続きを読む

Docker+Jenkinsで簡単に回線速度テストを定期実行

f:id:hiro0164:20180216025451p:plain

ネットの回線速度が異常に遅い時があるので、定期的に回線速度をテスト、記録するdockerコンテナを作成。

一時的なものなので、jenkinsで定期的にテストする形としています。

続きを読む

PhpStormでVagrantfileに色づけする (シンタックスハイライトを適用する)手順

  1. textmate/ruby.tmbundle をクローン

  2. PhpStorm | Setting | TextMate Bundlesでruby.tmbundleをフォルダごと追加 f:id:hiro0164:20170620034131p:plain

  3. 適用されていない場合は、Setting | File TypesのFile Supported Via TextMate BundlesにVagrantFileを追加。 f:id:hiro0164:20170620034136p:plain

 

参照サイト

Is it possible to get Ruby syntax highlighting in PHPStorm?

JavaScriptを使ってリダイレクトする方法

window.location.replace(...)

がHTTPリダイレクトのシミュレーションとしてベター。

window.location.href=...

を使った場合はリダイレクト元がセッション履歴に残ってしまうけど、replace()だと残らず、リダイレクト元に戻る事が出来ないので、よりHTTPリダイレクトに近い動作をします。

リンククリックのような動作をさせたいならwindow.location.hrefが、HTTPリダイレクトをシミュレートしたいならlocation.replaceがオススメです。

続きを読む

Atom 1.2.0に更新後、折り返しがおかしい場合の解決策

Atomを使っていたら、突然折り返しがおかしな事に(;x ;)

Atom 1.2.0に更新後、折り返しがおかしい場合の解決策

ファイル名変更なども同様に。

Atom 1.2.0に更新後、折り返しがおかしい場合の解決策

利用中に急におかしくなったので、Atom自体かパッケージの自動更新が原因かと思い、とりあえずTwitterで検索。

続きを読む