Webの現場で使えるテクニック集まとめ（完全メモ帳）

Webの現場でたまに使うけど忘れてしまい、またググるみたいな記事やこれだけは読んどけ的な記事を載せていきます。
完全メモ帳なので、随時更新していきます。

CSS系

天地中央

.hoge{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

https://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html
天地中央ってよく使いますよね。

CSS3を使った新しい画像置換の方法

https://kojika17.com/2011/03/css3-image-replacement.html

セレクトボックスをいい感じにするデザイン

https://copypet.jp/797/
セレクトボックスのスタイルとか忘れがちなので大分参考になります。

JavaScript系

クラス名（class属性に値）を削除（IE9有）

http://shanabrian.com/web/javascript/remove-class.php
もうほとんど使う事ないけど、IE9対応有りであれば参考になります。

Ajax

https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b
then()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。

ブラウザバック禁止

https://qiita.com/masashi68/items/d53f2195dde0712e641f
ブラウザバックってペナルティ受けそうですが...たまにある要望です。

Cookieが有効かどうかを確認する。

1.変数宣言（フラグ判定用）
2.Cookie にダミー Cookieを書き込む
3.書き込めた場合、Cookieの値を過去日付にして削除し、有効フラグを立てる

let cookieFlag = false;
document.cookie = "cookie_dummy=cookie_dummy";

if(document.cookie.length){
//Cookie有効化
  cookieFlag = true;
  document.cookie = "cookie_dummy=cookie_dummy;expires=Thu, 01 Jan 1970 00:00:00 GMT;"
}else{
 //Cookie無効化
}  

その他、HTMLとか制作環境まわりなど

「aria-hidden="true"」と「speak: none;」

http://blog.e-riverstyle.com/2015/02/aria-hiddentruespeak-none.html

noindex,nofollow

https://digital-marketing.jp/seo/about-noindex-and-nofollow/
noindex,nofollowの仕組みや利用タイミングなど

Gitとがクローンできない場合

環境変数とか疑え。

nodeがインストールできない。

proxy設定とかを疑え。

$ npm config set proxy http://proxy.example.com:8080

https://qiita.com/tenten0213/items/7ca15ce8b54acc3b5719

バージョン指定、gulpインストール方法

$ npm install --save-dev gulp@x.xx.x

html差分ツール

https://chrome.google.com/webstore/detail/html-diff-check-tool/fjbonpakihikkocmockbkndhooihpijo
めっちゃ便利

Vue.js初心者向け：インラインテンプレートから単一ファイルコンポーネントの使い方まで

https://qiita.com/sygnas/items/c0228eabbb3157766d5c
単一ファイルコンポーネントの理解