Web制作で使っている便利なジェネレーターまとめ

ハウツー
コロのicon
コロ

シェアした時の画像やタイトルを表示するOGP関連のmetaタグを生成してくれます。
書き方を忘れてしまいがちなのでこのサービスを使用しています。
meta tags使い方

生成されるメタタグ

画像はサーバーにアップして、画像までのパスを書き直します。
<!-- Primary Meta Tags --> <title>テクテク</title> <meta name="title" content="テクテク"> <meta name="description" content="これからWebをはじめる人もわかる、を目指したweb制作チームブログ"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.saases.jp/"> <meta property="og:title" content="テクテク"> <meta property="og:description" content="これからWebをはじめる人もわかる、を目指したweb制作チームブログ"> <meta property="og:image" content=""> // 表示したい画像のパスを入力 <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://www.saases.jp/"> <meta property="twitter:title" content="テクテク"> <meta property="twitter:description" content="これからWebをはじめる人もわかる、を目指したweb制作チームブログ"> <meta property="twitter:image" content=""> // 表示したい画像のパスを入力
グラデーションをCSSで作る時に利用しています。
うまく作れない時はグラデーションギャラリーからcssをコピーすることもできます。
グラデーションギャラリー: https://cssgradient.io/swatches/
css gradient

画像からグラデーションを生成したい時

右下のimport imageからCSSグラデーションを作れます。
画像からグラデーションを作成できるサービス
サイズ、色、テキストを指定すると画像URLを生成してくれます。
デモ画像としてimageタグのsrcにコピペして使用します。
ダミー画像URL作成サービス

生成された画像URL

http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png?text={任意のテキスト}

使い方

<img src='http://placehold.jp/24/cccccc/ffffff/250x150.png?text=デモ画像です'>
URLを変更するだけでサイズ変更、色変更ができます。
サイトフレームの作業中に画像を用意しなくてもさくっとデモ画像を表示してスタイル作業が進められます。
Basic認証での認証で使うパスワード生成ツールです。
.htpasswd作成サービス
ジェネレーター
Web制作
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい