トップ > WEBツール > 普段ウェブのお仕事してる身として備忘録しておきたいことまとめてみた！

普段ウェブのお仕事してる身として備忘録しておきたいことまとめてみた！

WEBツール その他

f:id:fwww:20171123233301j:plain

どうもふうや(@fwww0707)です！

最近記事書くのをサボってました、、、

今日も前回と同じように記事ネタがたくさん思いついたのでボリューミーな記事になりますが、ウェブにご興味ある方に読んで頂けると幸いです。

途中途中変な解釈や理解、知識があるかもしれないですが温かく見守ってください！

ウェブに関する話題を8つ用意しました！

便利なツールから関数、初心者が良くするミス、CSSやjavascriptをカキカキする上で知って頂きたいことなどをまとめ、需要がありそうな順につづっています！

どうぞよろしくお願いいたします！

※自分用の備忘録ですので乱雑な記事ですが予めご了承ください

カラーコードの選定に迷うならコレ使ってみよう！！

2年ほど前までは自分自身CSSでカラーコードを選定する時はカラーピッカーをグリグリして、良さそうな色を選んでいました笑

がしかし！

便利なサイトを見つけてからはここでカラーコード選定しています♪

https://www.materialui.co/colors

このサイトにはマテリアルカラーが並んでいて、ブロックをクリックすると＃なしのカラーコードをコピーできます！

f:id:fwww:20171123222238p:plain

 

色彩感覚の無い自分でしたがこのサイトでカラーコードの選定をするようになってからは、前よりもマシなデザインがカキカキできるようになりました笑

 

Above the foldのお話

普段皆さんはCSSやjavascriptを書く際何か意識していることはありますか？

ここではそんな時に意識してほしいAbove the foldについてお話します。

Above the foldというのは、ファーストビューを出来るだけ早くユーザーに見せましょうというような意識または試みのことを指します。

いわゆるPageSpeed Insightsで指摘される

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

のことです。

要するにCSSはデザインを司るものでjavascriptはDOM操作を行うスクリプトだからユーザビリティの向上を図る（レスポンスを早くする）ために、CSSはjavascriptより上に書きましょうということです。

もちろんGoogle先生が指摘しているのはファーストビューに必要なCSS、javascriptのことです。

ですが意識的にCSSを上に書くことでページの体感速度が向上し、離脱率も減少することに繋がりますので是非お試しください！

jQueryでヘッダーに設置したスクリプトが動かない時

2年ほど前にこの事象を経験してから、jQueryを書く際に意識するようになったことがあります。

それはどんな場面でも"$(function(){"と"});"で囲むようになったことです。

上記コードで囲まないと、ヘッダーにスクリプトを設置している場合DOMが読み込まれていないタイミングでスクリプトが実行されてしまいます。

よって何も実行されないわけです。

このコードはDOM要素が全て読み込まれた段階で実行されるのでヘッダーに設置していてもフッターに設置していても実行タイミングは変わりありません。

コードを圧縮したり元に戻したりするのに便利なサイト

巷で配布されているCSSファイルやjavascriptファイルの中にはminファイル（圧縮バージョン）が存在しない場合がよくあります。

どうしてもファイルを手動で圧縮させて読み込み速度の向上に繋げたい場合は下記のサイトを利用すると良いでしょう。

https://www.cleancss.com/

Minifyというのは縮小という意味で、Formatterというのは縮小されたファイルを元に戻すという意味です。

CSSやjavascript以外にもHTMLやPHP、XML、JSONファイルなども同様（一部）に操作可能です。

CDNのお話

CDNとはContent Delivery Networkの略称で、外部リソースを予め設置されたサーバーから高速に読み込ませることが出来ます。

例えば、bootstrapのファイルやfontawesome、jQueryファイルなどは有名所でありますから、CDNが存在します。

ですので、いちいちFTPで内部リソースとして扱わなくても、CDNから読み込んでしまえばその手間が省けるというお話です。

有志の方が配布されているファイル群なども「ファイル名 CDN」で検索すれば出てくることが多いです。

いつもjQueryプラグインなどをFTPで内部リソースとして扱っていた方！

この機会にCDNデビューしてみませんか？？

CSSで高さを％指定できないってときはコレ！

CSSで高さを％指定したい時よくありますよね！

殆どの場合、inline要素（画像）などに効くようですがblock要素でも高さを％指定したいって方に是非是非使っていただきたい関数をご用意しました！

 自分が過去にツイートした内容の引用になりますが、このheight_percent関数を利用すれば例えブロック要素でも高さを%指定できます。

第一引数

・親要素のセレクタ

第二引数

・子要素のセレクタ

第三引数

・%指定（1は100%）

のようにご利用ください！！

Wordpressの外観→カスタマイズ→CSSの編集って扱いにくいよね

前々から思っていたのですが、自分はCSSを追記する殆どの場合「外観→カスタマイズ→CSSの編集」を利用していません。

かといってCSSファイルに直接書き込んでいるわけでもありません。

←OPCacheやmod_pagespeedなどを利用していて即時反映しないからです。

じゃあどうしているのか！

これはSimplicityで利用されているテクニックなのですが、「header-insert.php」を作成しwp_head()の直後にget_template_part()でこのファイルを読み込みます。

このPHPファイルの使い方として自分は上にCSS、下にjavascriptをインラインで書いています。

もちろんlinkタグを使ってfontawesomeを読み込んだりするのもこのファイルです。

←外部リソースの読み込みもこのファイルで管理しています。

よってheader.phpに直接インラインで記述するより専用のファイルを用意することで、管理が楽になります。

javascriptのアラートってなんだか好かない、、、

自分javascriptのアラートあんまり好きじゃないんです。

なんか個人的に最近流行りの悪質サイトみたいなイメージが湧いてしまいます、、、、

なので自分はQiitaで見つけたこの記事の関数をいつも利用しています。

qiita.com

有志の方がカキカキされたみたいですが、実用性抜群です！！

利用者にちょっとしたお知らせをする場合などに用いています。

おまけ

jQueryで生成した動的要素にクリックイベントが発火しない場合

onを利用しましょう！

qiita.com

つぶやき備忘録

 

 

 

最近の出来事備忘録

先月から活発に動き回っています笑

ここ2ヶ月間で香川には2回行き、東京には3泊4日滞在し、高知に1泊2日滞在しました。

どの場面でも自分がインプットすることがたくさんあり、益々意識が高まりました！

これからはその熱を冷まさず何事も行動に移していき日々限界突破してまいります。

まとめ

自分専用に備忘録をまとめてしまいましたが、誰かのお役に立てると幸いです！

専門的なことはあまり触れていないですが、機会があればWordpressプラグイン開発なりWordpressのadmin_ajaxなりに触れてみようと思います！

ありがとうございました！！