アイキャッチ画像サイズチェッカー｜TwitterやFacebookでのOGP表示を確認
TwitterやFacebookでシェアされたときに、アイキャッチ画像がどんなサイズでどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください（表示は2018年7月時点のものです）。 画像を選択
トライアウト | Webフォント TypeSquare
ホーム トライアウト TypeSquare Web Font Tryout は TypeSquareで配信されるフォントを使って、 あなたのWebサイトの書体を自由に変更できます。 ページの下にあるフィールドでURLを入力して「Tryout」をクリックすると ご自分のページにTypeSquare を適用した様子を見ることができます。 1フォントの選択 TypeSquareでご利用いただけるすべてのフォントをお選びいただけます。 2一覧・選択履歴からフォントを選択 をクリックすると、書体一覧や選択履歴から書体を選択できます。 3フォントの大きさ、行間の編集 をクリックすると、2つのスライダーで「文字サイズ」と「行間」を調整できます。 4現在のスタイルを保存 ページに適用したスタイルを3つまで保存できます。 ※別のブラウザからは呼び出せません
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月
Open Graph Object Debugger - Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。
Responsive Design Testing
Responsive Web Design Testing Tool This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page. Unfortunately, with the way browser security works, you are unable to navigate your site through the frames that your website
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
リガチャなアイコンフォントをお手軽に作成する - アインシュタインの電話番号
リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ
HEX 2 RGBA Color Calculator | by @Devoth
« Back to devoth.com Devoth‘s HEX 2 RGBA Color Calculator ver 1.3 Let‘s you convert color value in HEX to RGBA and RGB, prepared for inclusion in CSS styles. Like what I do? Check my other tools & scripts: calculate Temperature conversion Calculator for converting temperature between Celsius, Fahrenheit, Kelvin and other scales Check it out → PHP Dead Simple Gallery Create a gallery in less than 5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Gradient Generator
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
IcoMoon App
Ultimate CSS Gradient Generator from ColorZilla
Ceaser - CSS Easing Animation Tool - Matthew Lein