Internet Explorer では HTML5の main タグが使えない

極論から。
InternetExplorerではHTML5の<main>タグは使えません。

検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…

main {
	display: block;
}

そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン!

“Internet Explorer では HTML5の main タグが使えない” の続きを読む

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → &gt;
  • 10進数の数値参照 → &#62;
  • 16進数の数値参照 → &#x003E;

16進数の数値参照 &#x003E; の記号を置換します。

  • &#x003E; → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

gulpでshift_jisとCR+LFの開発環境を構築

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

  1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
  2. Browsersyncはshift_jisが文字化けする
  3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
  4. 画像までshift_jis変換すると化ける

まずは

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

“gulpでshift_jisとCR+LFの開発環境を構築” の続きを読む

XcodeのライセンスらしきメッセージでGitのcloneが実行できない

Gitのクローンを実行しようとすると、このようなメッセージで止まってしまい実行できない事が。


Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

この場合、Xcodeを起動してライセンスに同意するとOKです。
「Agree」ボタンを押すとインストールが始まります。

Gitのcloneが行えるようになりました。

Sassの関数でサイズ指定を簡単に

Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。

値を1/2に変換

レティーナディスプレイ対策もすっかり定番となり
Photoshopのデザインデータは大概×2サイズでできたものとなっているかと思います。

これを、マークアップのときサイズ変換するのが地味に面倒だったりします。
たとえば、デザイン上で36px(36pt)と指定されている文字は×0.5してこうなります。

.headline {
	font-size: 18px;
}

これまで何の疑問もなくいちいち×0.5していましたが、functionを使えばそもそも計算しなくて済むことに気づきました。
このように値を半分にコンバートする関数を設定すれば

@function size($n) {
	@return: $n * .5;
}

デザインデータの値をそのまま入力するだけでOK。塵も積もれば工数削減になります。

.headline {
	font-size: size(36px);
}

“Sassの関数でサイズ指定を簡単に” の続きを読む

IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考:
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0

AngularJSのorderByで複数条件のソート

AngularJSで出力する一覧はorderByで並べ替えられます。

<div ng-repeat="item in datas | orderBy : date">
	<div>{{item.id}}:{{item.name}} {{item.date}}</div>
</div>

複数条件で並べ換えたいときは、この書式で。

<div ng-repeat="item in datas | orderBy : ['id', 'date']">
	<div>{{item.id}}:{{item.name}} {{item.date}}</div>
</div>

textareaのplaceholderに改行をいれる

テキストエリアのplaceholderは、数値実体参照で改行コードのCRとLF書けば改行させられる…と思っていたら
Safariでは効かないことが判明。

<textarea placeholder="改行&#13;&#10;させる"></textarea>

荒技でいくなら、属性値の途中でリアル改行させる手もあります。

<textarea placeholder="改行
させる"></textarea>

しかし、Safariでは効かないのか… うーん。

参考:
textarea 要素内の placeholder 属性で改行するには – Corredor

CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。

pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。

参考:
Can I use… pointer-events

“CSSのpointer-eventでマウスイベントを制御” の続きを読む

Macの「写真」でシステムフォトライブラリを選べないとき

複数台あるMacで写真を共有したかったので
「写真」アプリの保存データであるフォトライブラリを共有ディスクに設置してみました。

がしかし。
公式のガイドでは、Optionキーを押しながら「写真」を起動すれば
「ライブラリ選択」というメニューが立ち上がるとあるのですが
これが何度やっても普通にしか立ち上がらない。

参考:
「写真」でシステムフォトライブラリを指定する

その時のシステム構成はこちら

  • MacOS Sierra 10.12
  • 写真 2.0

フォトライブラリから「写真」を起動

Optionキー押下で「写真」起動でフォトライブラリを切り替えることはできませんでしたが
フォトライブラリデータから、開くアプリケーションで「写真」を選ぶと成功しました。

ファインダーで、「写真」のデータ元としたいフォトライブラリデータがあるディレクトリまで移動し
フォトライブラリデータの「このアプリケーションで開く」から「写真」を選択。

「このアプリケーションで開く」を選択

すると、写真アプリが起動し
選択していた新しいフォトライブラリの内容が表示されました。

あとは、公式ガイドにある手順で
環境設定からシステムフォトライブラリを切り替えれば操作完了です。