これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
プレゼンで使ってみたい！横棒グラフのデータ変化をアニメーションで表示するオンラインツール -Bar chart race
SNSやテレビなどで見かける、横棒グラフの変化をアニメーションで表示するオープンソースのオンラインツールを紹介します。 データは.csvにも対応しており、誰でも簡単に利用できます。 値の変化が非常に分かりやすく、プレゼンなどにもいいですね。 Bar chart race -GitHub Bar chart raceの特徴 Bar chart raceの使い方 Bar chart raceの特徴 Bar chart raceは、横棒グラフがレースをするかのようにその変化をアニメーションで表示するオンラインツールです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 上記のロングバージョン Bar chart raceの使い方 Bar chart raceは、下記ページから利用できます。 横棒グラフのデータ（.csv）を用意し、アニメーション時間を設定するだけです。データが無い人
シンプルで使いやすくPWAにも対応したオンラインWebサイトビルダー・「8b」
8bはシンプルで使いやすいオンラインのWebサイトビルダーです。直感的な操作でWebサイトを作成、公開する事が出来ます よくあるビルダーサービスですが、UIもまぁまぁ分かりやすく、PWAにも対応しています。ページも複数作れるみたいです 有償版は月1ドル程度でSSL対応、作成したWebページのエクスポート、独自ドメイン対応、ページ数が無制限になる等のサービスが追加されます Google AMPにも対応、全てのテンプレートはモバイルフレンドリーに設計されています。広告も削除とあるんですが今のところ広告は見当たりませんので、無償版はそのうち挿入されるかもしれませんね 使ってみた エディターです。ブロック単位でスタイルや画像を編集、テキストはクリックでツールバーが表示されます。テキストはその場に入力します。メニューのリンクも最初は分からなかったんですが、ツールバーが出えるだけでテキストの編集はその
可変フォントに対応したフォントを探せる・「variable fonts」
variable fontsは可変フォントに対応したフォントを探せるWebサイトです まだ多いとは言えないvariable fontsに対応した有料/無料のフォントが集められています OSSのフォントもあるので勉強用に良いかなぁと思って備忘録。ブラウザの対応状況もかなり良くなってきました おさらい可変フォントのおさらい。可変フォントは以下のようなCSSが利用できます font-variation-settings: "wght" 100, "opsz" 6, "slnt" -9.5;font-variation-settings: "wght" 117.64, "wdth" 4.26, "ital" 3.62;以下動作サンプルです 可変フォントを利用する事で今まで以上に様々な表現が可能になりますね 日本語で可変フォントに対応しているフォントはあまり多くありません 僕自身、Axis-Prax
多言語化必須！多言語対応と外国人観光客向けのWebサイトを紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのママです。 LIGのオフィスは上野エリアにあります。そして上野といえば……パンダの親子シャンシャン&シンシンで話題の「上野動物園」、活気溢れる商店街「アメ横」、西郷隆盛像のある上野公園など魅力溢れるスポット満載の街でございます。 そんな上野ですが、現在外国人観光客の方々で日々賑わっております。上野だけでなく、日本への訪日観光客数は年々増えてきており、過去最高を更新し続けているそう。 今後、たくさんの外国人観光客が日本に訪れるにあたって、Webサイトの多言語化が重要になってくる……というかなっています！ そこで今回は、Webサイトの多言語化で役立つツールと、外国人観光客向けのWebサイトなど紹介しようと思います。
日本語にもしっかり対応してる！PhotoshopのPSDファイルをSketchファイルに変換する -PSD to Sketch
ツールを移行する時にネックになるのが、既存のファイルです。 Photoshopで作成したPSDファイルをSketchファイルに変換するオンラインサービスを紹介します。レイヤー、シェイプ、スマートオブジェクト、マスクなどにも対応しており、PSDで作成したファイルがSketchで利用できるようになります。 日本語フォントや日本語のレイヤー・ファイル名でも問題なく、またかなりのファイルサイズでも問題なく利用できました。 PSD to Sketch Design Converter PSD to Sketchでは、PSD上のさまざまなエフェクト・機能をそのままSketchファイルに変換できます。 シェイプ レイヤー 結合されたレイヤー グループ化されたレイヤー テキスト レイヤー ビットマップ レイヤー スマート オブジェクト グラデーション 調整レイヤー ガイド マスク レイヤー スタイル 詳し
[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy
デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。 このかわいいデザインに、癒やされますｗ
![[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy](https://cdn-ak-scissors.b.st-hatena.com/image/square/cde97ef420f6979f6f55c6ada68e3199441556d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031503-01.png)
Pizza Amore! | Playground from ZURB
Deliver up pie charts, bar charts and line graphs for your responsive site. Download Create charts and line graphs for any device with Pizza Amore. Our menu now includes bar charts and line graphs. Not to worry, you can still have a piece of pie ... charts that is. Your Amore will be steaming hot with SVG so it'll look good on retina devices and HiDPI devices. Example Pizza Amore is an easy to use
無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」
ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ＆無料でダウンロード可能なのが「Hero Patterns」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー＆ペーストすることも可能になっています。 Hero Patterns http://www.heropatterns.com/ デフォルト状態のウェブページには薄い青とやや濃い目の青の背景パターンが並んでいます。市松模様や十字模様などシンプルなものもあれば…… 歯車やダイヤ、葉っぱなど、ポップな模様もあります。 画面上部のツールを使って、背景や柄の色を変更可能。柄の色を緑色にしてみました。 さらに、背景色も変更。 柄の不透明度も調整できます。以下は、やや薄めにした様子。 不透明度を上げると柄がくっきりと浮かび上がります。 また、各背景の右下にある「Use
AMP 化しよう: Google モバイル検索における AMP ページへのリンク機能のプレビュー
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Reduce email development time by hours » MailDeveloper
Reduce email development time by hours Start using MailDeveloper, the advanced email template editor. For developers and marketers alike. Since 2015, 1,000,000s of recipients* have received MailDeveloper-built emails in their inbox It is advanced: unlike most builders, you are not limited to stacking pre-built components on top of each other. You build the components yourself and arrange them howe
背景画像のフリー素材サイト10選！デザインで悩んだときに役立ちます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1. Subtle Patternsオススメ https://www.toptal.com/designers/subtlepatterns/ 一番よく利用してます。商用利用可の、シンプルで使いやすいシームレスの画像がたくさんあります。 2. Background Labs http://backgroundlabs.com/ 色・タグから検索できます。花柄やイラストがはいった、カラフルで派手なパターンの画像やイラストが多いです。 3. pattern cooler https://www.patterncooler.com/ 選んだデザインの柄の大きさや色をカスタマイズできます。派手派手なデザインがほとんどなので使いどころは難しかもしれません。 4. TextureKing https://www.textureking.com/ テクスチャ画像をお探しのときはこちら。木目・コンクリート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニークでシームレスなパターン背景を簡単に作成、SVGやPNG等でダウンロードできる・「Pattern Generator」
ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
コリス
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
SiteOrigin Background Generator