ウェブの技術とか開発環境構築の覚書。
HEX（#ff000などの１６進数カラーコード）をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。
See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0
HEXは、R2桁+G2桁+B２桁が集合した6桁なので
この手順でRGBに変換できます。
HEXからRGBの逆パターンです。
InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。
意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。
調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。
前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。
極論から。
InternetExplorerではHTML5の<main>タグは使えません。
検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…
main {
display: block;
}
そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン！
CSSのcontentでは文字を挿入することもできますが
「&(&)」「>(>)」などの特殊文字はコードのまま出力されてしまいます。
contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。
「>」の参照はこうなります
16進数の数値参照 > の記号を置換します。
これを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でSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。
gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ
まずは
と対処した上で
ポイントには、このように対応してみました。
Source TreeでGitのクローンを実行しようとすると、このようなメッセージで止まってしまい実行できない事が。
Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
コマンドラインで規約同意を求められた場合はこちらで。
“XcodeのライセンスらしきメッセージでGitのcloneが実行できない” の続きを読む
Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。
レティーナディスプレイ対策もすっかり定番となり
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);
}
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で並べ替えられます。
<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>
テキストエリアのplaceholderは、数値実体参照で改行コードのCRとLF書けば改行させられる…と思っていたら
Safariでは効かないことが判明。
<textarea placeholder="改行 させる"></textarea>
荒技でいくなら、属性値の途中でリアル改行させる手もあります。
<textarea placeholder="改行 させる"></textarea>
しかし、Safariでは効かないのか… うーん。