【フロントエンド】役に立ったページその2、Web豆知識

役に立ったページ

・知っておくと便利なHTML5の機能、要素や属性のまとめ

「mapタグ」、「markタグ」、「datalist要素」など、どれも知っておいて損は良いと思えるタグや機能などでした。
coliss.com

・【CSS】mix-blend-mode

>CSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティ。

最近までこのプロパティは知らなかったのですが、Photoshopでいうオーバーレイなどを実現でき、画像や色を重ねて表現する時にとっても便利と感じました。

【CSS】ボタンのhoverでのアニメーション

design.aekana.com

【JavaScript】JSのメディアクエリ

coliss.com

【VSCode】Gitの拡張機能「Git Lens」

リンクに貼ったところのように、
あるコードにカーソル合わせた時に、過去のそのコードの状態を比較でき、引っ張ってくることも可能なのがすごい便利です。

eh-career.com

豆知識

・MacのChromeにて、左上の更新マーク（グルグルの矢印マーク）を、commandキー押しながら押すと、タブを複製（現在のページと同じページを隣のタブに開ける）出来る。Windowsだと、更新マークをホイールボタンで押すと同じことが出来ます。

地味にめっちゃ便利なんです。

・Macにて、【】（すみつきかっこ）の早い出し方→　全角のときに「option + 9/0」で入力出来る。

Macで入力ツールは、ライブ変換が便利すぎて「ことえり」を使ってるのですが、変換で出しづらいので、覚えとくと便利。

その他備忘録

tableタグのコーディングにて、
・trにはstyle当てない。
・flexもあまり使わない
・paddingで余白を取る。