日記です

ブックマークの整理がてら、普段よく使うツールやサイトをまとめてみました。

誰かのお役に立てば幸いです。

Chrome拡張

デザインデータを透かしてズレを確認

PerfectPixel by WellDoneCode (pixel perfect) - Chrome ウェブストア

この拡張機能は、ピクセル単位の精度でWebサイトを開発するのに役立ちます！

https://chromewebstore.google.com

PerfectPixel。

コーディングに必須のChrome拡張。

サイト

クリップパスジェネレーター

Clippy — CSS clip-path maker

https://bennettfeely.com

Clippy。
平行四辺形や五角形など少し複雑な形に切り抜きたいときに使用しています。

先ほど紹介したPerfectPixelを使って切り抜きたい形を透かして、それに合わせて点の位置を調整しています。

メッシュグラデーションジェネレーター

CSS mesh gradients generator: Mesher Tool by CSS Hero

A Free tool to create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones to build the trendiest CSS gradients of 2023

https://csshero.org

CSS mesh gradients generator: Mesher Tool。

CSSでメッシュグラデーションを表現できます。グラデーションを画像にすると地味に重く、軽量化すると汚くなるので容量が多いときに使用しています。

CSSプロパティの各ブラウザの対応状況を確認

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com

The Embed for CanIUse Data

Embed up-to-date data from caniuse.com. Displays feature support data for various versions of the 10 major browsers. Configurable, reliable, and fully responsive.

https://caniuse.bitsofco.de

Can I use... Support tables for HTML5, CSS3, etc。

新しめのプロパティを使用するときにこちらで確認しています。

マークアップが正しいか確認

The W3C Markup Validation Service

W3C’s easy-to-use markup validation service, based on SGML and XML parsers.

https://validator.w3.org

The W3C Markup Validation Service。

かなりお世話になっています。閉じタグやalt抜け、古い記述などを指摘してくれます。

グーグルフォント

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com

様々な言語のフォントが揃っていて使いやすいです。グーグルフォントのおかげで日本語のWEBフォントの選択肢が一気に増えてほんとうにありがたいです。

文字化けをある程度修復

�����������猳�̕����𐄑�����c�[�� �ʓ|�Ȑl�����̎������ʕϊ� - �؂񂽂� info

https://pentan.info

たまにファイル名が文字化けしている素材があり、再請求するほどでもないときに使用しています。

ブックマークレット

OGPタグを確認

ブックマークレットでOGPタグを確認する【javascript】

OGPタグはページに表示されない裏側のタグです。そのためチェックがめんどくさいし、確認漏れも起こりやすいので『OGPタグ確認』ブックマークレットを作りました。 登録すればボタン一つでタグが確認できるので便利です！ ブックマークレットの登録方

https://m-kenomemo.com

かなりお世話になっています。

PHPでメタを出し分けしている際にちゃんとできているか確認するのに使用しています。

ALTの値を確認

マークアップ後の画像やmetaをチェックするブックマークレットを作ってみた

imgのaltやサイズ、metaのチェックなどを行えるブックマークレットを作ってみました。 ブックマークレット altをチェックできるツールを探して

https://cly7796.net

LPなど大量の画像を使用した際にこちらで確認しています。

URLの?以降を削除

URLの?以降を削除するブックマークレット

URLの?以降を削除するブックマークレット. GitHub Gist: instantly share code, notes, and snippets.

https://gist.github.com

地味によく使うブックマークレットです。

本番環境とテスト環境のURLを切り替え

ブックマークレットで本番環境とテスト環境のURLを切り替える【javascript】

今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。※動作確認はChromeのみです。 ブックマークレットとは 気に入ったウェブサイトをブラウザのお気に入りに登録すると、通常その

https://m-kenomemo.com

個人的にブックマークレットの中で一番使用回数が多いです。作業効率かなり上がります！

ブックマークレット変換

Bookmarklet スクリプト変換

https://ytyng.github.io

jsを書くとブックマークレット形式に変換してくれます。

チャットのテンプレ文をブックマークレットにする際に使用しています。

コピペサイト

動くWebデザインアイデア帳

動くWebデザインアイデア帳

https://coco-factory.jp

アニメーションの参考にしています。

copypet.jp

コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログコピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ

https://copypet.jp

マークアップの参考にしています。

読み物(コーディング)

MDN

HTML: ハイパーテキストマークアップ言語 | MDN

HTML (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するものです。 HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (CSS) または機能や振る舞いを記述するもの (JavaScript) があります。

https://developer.mozilla.org

セマンティックなHTMLを意識して書きたいときに読んでいます。

Zenn

Zenn｜エンジニアのための情報共有コミュニティ

Zennはエンジニアが技術・開発についての知見をシェアする場所です。本の販売や、読者からのバッジの受付により対価を受け取ることができます。

https://zenn.dev

暇つぶしの際に読んでいます。新しいプロパティやメディアクエリの情報が手に入りやすいです。

読み方わかるくん

IT・web用語の読み方わかるくん

WEBデザイナー・プログラマの初学者向けの独学学習サイトです。

https://webliker.info

CSSやHTMLタグの読み方が列挙されたサイトです。

読み物(デザイン)

デザインの制作中に役立つまとめ検索 | デザイン研究所

403 Forbidden

https://desaken.com

デザインの引き出しを増やしたいときに読んでいました。

今見てもとてもわかりやすいです。

ギャラリーサイト

Pinterest

Discover recipes, home ideas, style inspiration and other ideas to try.

https://www.pinterest.jp

【総数6812件】BANNER LIBRARY | デザインの参考に！おしゃれなバナーだけを集めたギャラリーサイト

バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。バナー広告から特集バナーまで、幅広いジャンルから収集しています。バナー作成の練習やWebサイトデザインのアイデアに繋がる事例を紹介しているギャラリーサイトです。

https://design-library.jp

SAMUNE｜良質なデザインのサムネイルを集めたギャラリーサイト

目を惹かれる良質なデザインのYouTubeサムネイルを集めたギャラリーサイト。思わずクリックしてしまうような事例をデザイナー目線で紹介しています。サムネイルに興味を持つ人すべてに、クリエイティブな刺激を与えられますように。

https://thumbnail-gallery.net

あまりデザインはやらないのですが、作業があったときはこちらを参考にしています。

その他

ショートカット練習

COMMAND LAB

楽しく直感的にショートカット＆コマンドを練習できるサイト。

https://command-lab.com

新卒のときめちゃめちゃ練習しました。

フォトショップとVScodeのショートカットを叩き込んだおかげで作業時のUIを探すイライラが少し減った気がします。

VScodeスニペット

HTML・CSSコーディングでよく使うVScodeスニペット集

https://zenn.dev

魔法使いになったみたいで楽しいです。

主にSCSSの @include pc {} 系やJSだとclick等のイベントを登録しています。