東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2016.07.04

Sasaki

Maromaro社内の知識共有した話をまとめてみた201607

こんにちはMaromaro佐々木です。

Maromaro社内で定期的に知識共有をしていまして、
各々共有したい情報を書き込んで話し合っています。

自分自身も思い出すためにまとめてみました。

ジャンル選ばずなので、色々入ってしまっています(汗

コーディング関連

JPGとPNGのロスレス圧縮(劣化しない)

JPG

jpegoptimを使う

PNG

OptiPNG使う

CSSで使うアイコンファイルをオリジナルで作成する

https://icomoon.io/app/#/select
svgファイルをいれたり、フリーのアイコンを選んでオリジナルのアイコンフォントが作れる。
アイコンフォントだと色々なサイズに劣化なく対応できるのと、色の変更が柔軟。

納品ファイルにゴミが入らないようにする

書くほどの事でもないですが、下記のようなファイルは納品時に削除するように
Thumbs.db .DS_store _notesフォルダ等も注意

Firefoxで画像が表示されない時がある

安全なサイトではないとされることがあるようで
画像の読み込みなどがブロックされることがありました。
アドレスバー左の地球儀マークを押して該当箇所を許可にすると改善されます。

pタグの中にiframeはいれても良い。

むしろインライン要素の中にいれても良い
何故ならiframeがインライン要素かつブロック要素だから
https://w3g.jp/xhtml/dic/iframe

画像ファイル名の大文字小文字について

基本中の基本ですがWindows系では実はファイル名の大文字小文字はパス指定時に判別されていません。
File.pngとfile.pngは共存できないのです。
linuxだと別ファイル扱いになるので、うっかり画像ファイル名と実際のHTMLタグで指定したファイル名が違うと表示されない事に。

【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する

要素に backface-visibility: hidden; を追加すると改善される。

参考
http://bashalog.c-brains.jp/14/02/03-144700.php

PHP、Wordpress

phpの終了タグはページの最後であればなくても良い

下記のように最後だけ省略可能

<?php
echo "test1";
?>
<?php
echo "test2";

wordpressの内容をそっくりそのまま移行するプラグイン

移行時にとっても役に立っているプラグイン

参考

プラグインでWordPressを楽々お引っ越し!duplicatorならサーバー移転も簡単。

JS関連

Jquery attr と propの違いでチェックボックスの書き換えができない

下記参考。
http://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1

Javascriptの配列の最後のカンマはつけてはいけない

配列の最後にカンマがあるとエラーが出るブラウザがあります。

下記はNG

[1,2,3,]

下記はOK

[1,2,3]

jqueryを複数読み込む時にはコンフリクトの対策をする

noConflictを使うと複数のJqueryが共存できます。
既存サイトの作業などで元々のバージョンが古い場合に大活躍!

var jq1_11_3 = jQuery.noConflict(true);

Math.randomは偏る

Math.randomでランダムにしたつもりが、偏っていた・・・

参考
http://bost.ocks.org/mike/shuffle/compare.html

OGPタグは動的に吐き出したらダメ

SNSに認識されない事案がありました。

サーバ関連

htaccessでユーザーエージェント分岐する場合 RewriteCond と RewriteRule は抱き合わせする

RewriteRuleを続けて書いても以前のRewriteCondはリセットされている。
参考
http://blog.livedoor.jp/tak_bon/archives/6508443.html

デザイン関連

FireworksでSVGをパスから書き出しプラグイン

ディスプレイで見えない色が出た件について

D-SUBで差し込んでいたのをDVIにしたら改善。

Slack

Slackのemail機能

簡単にメールの内容をSlackに送れる
gmailとかと連携して、件名等で振り分けて通知とかするとさらに良いです。

Slackの中華フォントをメイリオに変える

Slack落としてやらないとだめ

参考
http://qiita.com/oboenikui/items/db11a3a4cbcf0d373d28

っと、まだまだあるのですが長くなってしまったのでこのあたりで。
代表特権で次回も・・・・・このネタで・・・!?