IE11, Microsoft EdgeのみにCSSを適応させる時のメディアクエリ

IE10から従来のHTML上にif文でIEのみ対象にしたCSSを読み込ませることができなくなった模様。(正確にはHTML5を使用している時にだが)

HTML5 Parsing in IE10

よって今後はどうすればいいかというと、メディアクエリを使用する。以下IE10,IE11それぞれに適応させる時のメディアクエリ。

/* for IE 11 */
  @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .selector {
      some-syntax: some-property;
    } 
  }

/* for IE 10 */
  @media all and (-ms-high-contrast:none){
    .selector {
      some-syntax: some-property; 
    }
  }

Edgeの場合はこちら

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  .class-name {
    some-syntax: some-property;
  }
}

以下の記事を参考:

Targeting IE10 & IE11 Browsers with CSS

CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ

IEのバグで背景画像に指定しているSVG画像(SBGアイコンなど)がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。

svg画像内の<svg>タグ内に、以下のコードを追記。

preserveAspectRatio=”xMinYMid”

例:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

     viewBox="0 0 20.8 41.6" style="enable-background:new 0 0 20.8 41.6;" xml:space="preserve" preserveAspectRatio="xMinYMid">

というような感じになる。

詳しくは下記を参照。

svg background image position is always centered in internet explorer, despite background-position: left center

Best Practices for Getting Started with SVG

IE11 min-widgh:initial; が反映されないバグ

IE11でmin-width:initial;が反映されない。initalはもともと0が設定されているため、0を直接指定すればOK。IE、edgeを見越したコーディングをするのであれば、min-widthの初期化には0指定がよさげ。

.sample {
 min-width: 0;
}

 

MagentoでCSSを適用する

MagentodでオリジナルテーマでCSSを適用する場合

フォルダ構成は以下のようになってる

Default_head_blocks.xmlに

<css src="css/test.css"/>

を追加。

そして気をつけるべき点は、モジュールのディレクトリ名はMagento_モジュール名にすること。CSSを読み込むためのモジュールは

Magenta_Theme

である。

CSSファイルがない場合は自動でlessファイルを参照しサーバー側でコンパイルしてくれる。

ChromeなどのBlinkレンダリングエンジン搭載のブラウザーでSVG画像がキャッシュされて別のSVG画像が表示されてしまうバグへの対処法

Chrome、VivaldiなどのBlink rendering engine搭載のブラウザーにて、キャッシュされたSVG画像が別の箇所に表示されてしまうバグへの対処。

特にソーシャルメディアのアイコンにSVG画像を使用し、アンカータグで囲ってリンクを追加し、そのリンクをクリックした後戻るボタンで戻った時に、キャッシュされた画像が違うところに出現したりする。(お化けのよう)

これへの対処は、

  1. SVG画像をobjectタグで読み込む
  2. objectタグ内に、name属性を追加し、ユニークな名前を設定する

特に、name属性を追加することで解決できる。

ソース:Google Chrome randomly shuffles SVG images in <object> tags

SASSのマッピング(map)の書き方で気をつける点

SASSで値をマッピングする時に書き方に気をつける。

$breakpoints: (
  'small':        $screen-sm,
  'medium':       $screen-md,
  'large':        $screen-lg,
  'extra-large':  $screen-xl
);

最後の値の後はカンマがない。かつ括弧の最後にセミコロン。
JSONの書き方で括弧を丸括弧にしたものと同じ。

BitbucketでSSHキー設定をしてGitにリモートサーバーに登録してプッシュしようとしても”repository access denied. access via a deployment key is read-only”とエラーが出る

BitbucketでSSHキー設定をしてGitにリモートサーバーに登録しても”repository access denied. access via a deployment key is read-only”とエラーが出る件について。

BitBucketではSSHキーをユーザーアカウント自体と各レポジトリ毎に設定できる。そして各レポジトリ毎に設定したものはDeployment Keyといって、Read onlyのため要注意。

Pushも可能なWrite権限を作成するには、ユーザーアカウント設定のところでSSHキーを設定すること。

右上のユーザーアカウントアイコンをクリックして、Bitbucket Settingsをクリック、左側のメニューにSSH Keyのメニューがあるのでそこから登録する。

最近はGit初心者向けの書籍も充実してきてて、この本とか取っ付きやすく分かりやすそう。評価も高い。

Gitのリモートレポジトリのssh接続で no such identity: /Users/ユーザー名/.ssh/bitbucket: No such file or directoryとエラーが返される

ssh-keygenでsshキーを作成後、公開鍵をリモートサーバー側に入れて、複数ssh接続を使用しているためconfigにも追加した後、Gitにリモートサーバーを登録してレポジトリをクローンしようとしようとすると、下記のエラー

no such identity: /Users/ユーザー名/.ssh/bitbucket: No such file or directory

なぜかというと、単純にconfig内のIdentityFileで指定していた秘密鍵のファイル名が違ったから。

こういった凡ミスでもはまることがあるから気をつけよう。

GoogleスプレッドシートでVLOOKUP関数で別シートを参照する(importrangeと併用の仕方)

Excelとは違い、Googleシートで別シートの情報をVLOOKUP関数で取り込む時はimportrange関数を使う必要がある。

まずはVLOOKUPの基本から。VLOOKUPの使い方自体はExcelと同じ。

F2からI20の範囲の中の2列目の値を、同じシート内のC4の値を参照して該当する情報を取得する場合。

VLOOKUP(C4,$F$2:$I$20,2,FALSE)&””)

ポイントはコピー&貼り付けでも参照範囲が変わらないように$を付けること。末尾の&””は参照先に値が入ってない時に0を返さないようにするためのもの。

Excelの場合他シートを参照する場合は、

VLOOKUP(C4,ToDo!$F$2:$I$20,2,FALSE)&””)

と参照先の範囲指定の目に「シート名!」を付けるだけでできるが、グーグルスプレッドシートの場合は少しややこやしく、importrangeを使う。

Importrange(インポート先のシートのURL, シート名!参照するセルの範囲)

という引数の取り方をする。インポート先のシートのURLはシート右上の「シェア」のボタンをクリックして表示されるURLを使うのが一番確か。URLをコピーするだけでシェアする必要はなし。

(※画像は英語表示)

URLをコピーしたら使い方は以下のようになる。

VLOOKUP(C4,importrange(“https://docs.google.com/spreadsheets/d/1XHDDGDoV-ec9vZDDjp6UYLn_cfoyNiSgX_B1xnEQLTA/”, “ToDo!$F$2:$I$20″),2,FALSE)&””)

エラー値、#N/Aを返さないようにするためにIF関数を加えると下記のようになる。

=IF(ISERROR(VLOOKUP(C4,importrange(“https://docs.google.com/spreadsheets/d/1XHDDGDoV-ec9vZDDjp6UYLn_cfoyNiSgX_B1xnEQLTA/”, “ToDo!$A$1:$Z$100″),2,FALSE)),””,VLOOKUP(B2,importrange(“https://docs.google.com/spreadsheets/d/1XHDDGDoV-ec9vZDDjp6UYLn_cfoyNiSgX_B1xnEQLTA/”, “ToDo!$F$2:$I$20″),2,FALSE)&””)

ちなみに同じ行から複数列ではなく、他シートの1セルのみを参照したいだけの時はVLOOKUPは使わずimagerangeだけを使えばオーケー

Importrange(URL, C4);

Googleスプレッドシートの書籍はそんなにないけど、下の仕事で使えるシリーズのはさくっと調べられて活用しやすいからおすすめ。

https://support.google.com/docs/answer/3093340?hl=ja