OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
aguse.jp: ウェブ調査
あやしいサイトや知らないサイトを訪れる前に、URLを入力するだけでサイト背景情報を調査したり、迷惑メールの送付経路を表示したりすることが出来ます。
ファビコン favicon.ico を作ろう! リアルタイム版
ファビコン favicon.ico 作成 リアルタイム版 ウェブコーダーやブロガーに必須アイテム。半透過マルチアイコンが作れます。 ウェブブラウザで、タブやURLのとなりに表示されているアイコンがfaviconです。 16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。 処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。 このページでは 16x16, 32x32, 48x48 の3つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。16x16の画像に100x100の画像を指定すると縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定
ストップウォッチ｜ブラウザ・スマホですぐ使えるWEBアプリ
アドレス変更のお知らせ サイト引っ越しに伴いアドレスが以下に変更になります。ブックマークなどの変更をお願いします。 https://garakuta.app/timer/
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
Gitがこわくて触れられなかったけど、このスライドで理解出来るようになったよGitサイトまとめ
触れるのがこわくてずっとGitを避けて来ました。ですが、使わなければならない状況に追い込まれたので初心者ながら少しずつコミットしたりしながらGitの使い方を学んでいたらGitってもしかして楽しいかも!!って思うようになり、もっとGitの事を学びたくて色々勉強出来る資料やサイトを集めていて情報がたまって来たので、ここでまとめていつでも見れるようにしたいと思います。 Gitの仕組みを優しく教えてくれるスライド 素敵なスライドがありましたのでご紹介させていただきます。 うん、見やすい!見やすいよー!! Gitを勉強出来るサイト サルでもわかるGit入門 サルでもわかるGit入門 世界一わかりやすく説明しているサイトです。僕でもわかりました。 Learn Git Branching Learn Git Branching ゲーム感覚で勉強したい時はこちら。このサイト自体がすごい 笑 Gitコマンド
Photoshopの整列を劇的に楽にやる方法
開催中 Amazonブラックフライデーの攻略法。お得な買い方 最初に書いちゃうけど、Webデザイナーの方は必見！！ 人生が変わるぐらい(笑)に、Photoshopの凄く使える便利な技を伝授しちゃうよん。 まー知ってる人には、そんな事も知らないのかと突っ込まれるかもしれないけど。 さて、問題Photoshopで下図のグレーのシェイプを水平方向の中心に整列をしたいのだが、どうすればよいか？ 生まれ変わる前の僕だったら、新しいレイヤーを作って、そこにキャンパスサイズの横幅と同じ新しいシェイプかなんかを作って、その新しいシェイプとグレーのシェイプを選択して整列の「水平方向中央揃え」をクリック、な感じかな。 しかし、これだと手間だよね～。 もっと簡単にできる整列方法①まずは、シェイプレイヤーを選択 ②次に「長方形選択ツール」を選択 ショートカットは「M 」。 ③横幅すべてを選択 ④続いて「移動ツール
ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
WhatTheFont : MyFonts
Frequently asked questions How do I find a font from an image? To identify a font from an image, use a font finder or font identifier. These tools are great for finding the name of a font or similar alternatives. All you need to do is upload an image of the text by having it readily available on your device or taking a photo. Is there an app I can use to identify fonts? Yes, WhatTheFont is a simpl
PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール（有名なものではAzConvPNGなど）を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常
画像を綺麗に拡大するフリーソフト「SmillaEnlarger」がすごい | 日刊ウェブログ式
小さな画像を拡大したい時、どうしても起こってしまう画像の劣化。そんなときに便利な、画像を美しく拡大するフリーソフト「SmillaEnlarger」をご紹介します。上の画像は拡大例ですが、かなり滑らかに拡大出来てます。 ダウンロード こちらから「SmillaEnlarger」をダウンロードします。 Download ソフトを起動させます。 使い方 まずは、拡大したい画像をドラック＆ドロップします。 Output Dimensions …サイズ変更 Specify zoom facter: 倍率 Specify width of result: 横幅指定 Specify height of result: 縦幅指定 Fit inside boundary: 縦横幅の最大値指定 Stretch to fit: 縦横幅の指定 Crop to fit: 切り取り指定 Fit inside, add
時間の節約になるWeb制作関連ツール 12+1
2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト！ Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな
webページを綺麗にpdfにしてくれる、至れり尽くせりな"Web2PDF"。 - あまたの何かしら。
http://www.web2pdfconvert.com/ 久しぶりの当たりでしょうか。日本語でもちゃんと使えるし、なにより拡張が揃っているのがいいですね。 URLを入れて Convert to PDFってすれば、PDFの完成。 様々あるサービスの中でもここの特殊なところは、設定があること。 Images Compression Level 画質の設定。数字が小さいほど高画質。 PDF Page Size PDFのサイズを決められる。デフォルトではA4。 PDF Page Orientation 縦（Portrait）か横（Landscape）か。 PDF Document Margins (mm) 余白。 Date and URL Stamp 「Created by Web2PDF Converter at 日時, URL: ページのURL 」っていう文字がPDFについてくる Enab
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
履歴書メーカー
履歴書メーカーゼロワンご案内 オンライン履歴書作成ツール。卒業年次も誕生日入力で自動計算します。 書式フォーマットはJIS規格など8種類をご用意、就職活動やアルバイト応募にすぐ使えます。 当サイト作成サービスは会員登録不要、すべて無料でご利用いただけます。 おかげさまで23年目。これからも当サイトをよろしくお願いします。(since 01 May ,1999) 作成ページに入れない場合は、refererの送信許可を設定してください。 サービス利用法はこちらのヘルプを、書き方はこちらをご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
IDEA * IDEA
サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】
web計。
