検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ

ponta

Feb 03, 2015

HTMLファイ部のほんだです。

気づきTips！ Σ(・ロ・)

カヤックの中でもHTML5のWebフロントエンド実装を担当する
エンジニアを集めた部署「HTMLファイ部」では、
制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。

通常は、

1. 制作で何かわからないことがでた
▼
2. Google等で検索して解決の糸口をさがす
▼
3. こんな方法があったのか〜と気づきを得る

というフローでスキルアップしていくことがもっぱらだと思うのですが、
学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。
カヤックHTMLファイ部では、

1. みんなで蓄積したTipsをざぁっと読む
▼
2. こんな方法があったのか〜と気づきを得る
▼
3. 制作の際に導入していく

というフローを繰り返し実践していくことで、
検索では気づけないことを学び、実装力アップを図っています。

この記事では、そんなHTMLファイ部の気づきTips集を公開しちゃいます！
（※ 実装経験のある中級者向けの記事となっております）

マークアップ編

<br>をdisplay:noneすると Σ(・ロ・)

<br>をdisplay:noneすると、改行を消すことができます。
最近はPC/SPサイトを1ソースで作成することも多いですよね。
画面サイズによって改行の位置を変えたい！といった時に便利な技です。
参考ページ：http://jsdo.it/calmbooks/qCzf

CSSで縦位置センタリング①（display:table-cell） Σ(・ロ・)

一筋縄ではいかない、要素の縦位置センタリング。
display:table-cellを使った方法です。
要素の高さに依存せず、センタリングできます。
参考ページ：http://kimizuka.hatenablog.com/entry/2014/03/16/233158

CSSで縦位置センタリング②（position:absolute） Σ(・ロ・)

position:absoluteの場合でも縦位置センタリングできる方法です。
要素の高さ指定は必要です。
参考ページ：http://dskd.jp/archives/35.html

Sass/SCSSで色の調節が行える関数 Σ(・ロ・)

明度を調節できるlighten()/darken()や、透明度を調節できるtransparentize()という関数があります。
使いどころによってはめっちゃ便利！
参考ページ：http://www.webopixel.net/html-css/771.html

CSS calc()で複雑なサイズ指定 Σ(・ロ・)

%とpxを併用して指定したい時などに便利です。徐々に使える環境も増えています。
参考ページ：http://negimemo.net/2364

#topにするとページトップへ移動する Σ(・ロ・)

idが"top"の要素がなくてもハッシュを#topにすると、ページトップに移動します。
参考ページ：http://jsdo.it/calmbooks/kmi5

JavaScript編

JS内で文字列を改行したい Σ(・ロ・)

JS内で長い文字列を読みやすく改行したい時ってありますよね。
意外と一筋縄ではいかず、色々な方法があるみたいです。
参考ページ：http://kimizuka.hatenablog.com/entry/2014/09/12/095957

配列の中の連想配列をキーでソートする Σ(・ロ・)

sort()メソッドで連想配列をソートする方法。
参考ページ：http://kimizuka.hatenablog.com/entry/2014/05/19/000000

配列の中で1番大きな値のインデックスを取得する Σ(・ロ・)

indexOf()とMath.max()をうまく使います。
参考ページ：http://kimizuka.hatenablog.com/entry/2014/09/18/230000

jQueryのfilter()は判定式を渡してフィルタリングできる Σ(・ロ・)

jQueryのfilter()は、セレクタを渡すのが基本的な使いかたですが、
判定式の関数を渡すことで、より便利に使えます。
参考ページ：http://nanoappli.com/blog/archives/4649

プライベートブラウジングの検出方法 Σ(・ロ・)

プレイベートモードだけで問題が起こる！なんてことがたまにあると思います。
検出不可能と思われたプライベートモードですが、（ブラウザごとに異なる）変化するプロパティを見て検出できます。
参考ページ：http://please-sleep.cou929.nu/detect-private-browsing-mode.html

API編

音声合成API Σ(・ロ・)

テキストを読み上げてくれるAPIです。
音声認識APIのほうはわりと使われているようですが、
こっちはあまり使われていない印象・・
Chromeだけじゃなく、なんとMobile Safariでも使えます。
参考ページ：http://jsdo.it/kimmy/69GV

フルスクリーンAPI Σ(・ロ・)

ページをフルスクリーンにできるAPIです。
参考ページ：http://jsrun.it/calmbooks/saruFull

Web Messaging API Σ(・ロ・)

クロスドメインでiframe間の通信を行う場合などに使えます。
参考ページ：https://developer.mozilla.org/ja/docs/DOM/window.postMessage

バイブレーションAPI Σ(・ロ・)

スマホをブルブルできるAPIです。
まだ対応している環境はごくわずかです。
参考ページ：https://developer.mozilla.org/ja/docs/Web/Guide/API/Vibration

WebGL、GLSL編

GLSL powに負の値を入れてはいけない Σ(・ロ・)

動作未定義。PCではよしなに対応してくれていますが、
特定のAndroid端末だとバグるようです。
参考ページ：https://www.opengl.org/sdk/docs/man/html/pow.xhtml

GLSL continue がIE11で動かない Σ(・ロ・)

for文などをスキップさせるcontinueがIE11のGLSLでは動きません
なんでも、IE11ではGLSLのバージョンが0.94と、他と比べて低いみたいです。
参考ページ：http://qiita.com/cx20/items/39826348a059a2f235ba

開発・デバッグ編

Browserify Σ(・ロ・)

node.jsのrequireをクライアントJavaScriptで実現してくれるnpmモジュールです。
依存関係を気にせず他ファイルを読み込めるのが便利です。
参考ページ：http://qiita.com/makotot/items/d524941fc6b8b4493de2

Chromeでキャッシュ削除&ハードリロード Σ(・ロ・)

開発中は、キャッシュを削除したい！ということはしょっちゅうですが、
なかなか消えないしつこい汚れ（キャッシュ）ありますよね。（特にjsで動的に読み込んだファイルとか・・
この方法できれいに汚れをおとしましょう。
参考ページ：http://kimihiro-n.appspot.com/show/86002

すぐに長さを測りたい Σ(・ロ・)

Mac限定ですが、スクリーンショット機能「cmd + shift + 4」で
サイズをすぐにどこでも測れます。
参考ページ：http://hamachan.info/mac/kihon/screen.html

すぐに色を調べたい Σ(・ロ・)

Macの標準搭載アプリ「Digital Color Meter」を使いましょう！
参考ページ：http://tokyo.secret.jp/macs/digi-color.html

注意！編

IEでは透明なdivにイベントは振れない Σ(・ロ・)

背景に透明な画像を指定することで解決できます。
参考ページ：http://kimizuka.hatenablog.com/entry/2014/03/21/000000

iOS8 Mobile Safariでzoomプロパティが無効に Σ(・ロ・)

Retina対応やViewport関連でzoomを使ってサイトをつくったことのある人は注意かも。
参考ページ：http://roka404.main.jp/blog/archives/110

jQueryのdata()メソッドはデータ属性を取得するメソッドではない Σ(・ロ・)

jQueryのdata()メソッドには実は色々な使い方があります。
きちんと理解して使わないと、思わぬところではまることも・・
参考ページ：https://w3g.jp/blog/jquery-data-attr-cache

cursor:url();での指定は絶対パスで Σ(・ロ・)

IEだと相対パスがCSSファイルではなく、HTMLからのパスに
なってしまうので、絶対パスで指定するのが無難
参考ページ：http://zero.css-happylife.com/property/cursor.shtml

6to5はIE8で動かない Σ(・ロ・)

ES6を使えることで話題のaltJS「6to5」ですが、IE8では動かないようです
Object.createをPolyfillすることで動くようになります。
参考ページ：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create