[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる
CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。 Units フォントのサイズ指定に使う単位を「px, rem, em」から選択。 Selector 「font-size」を適用するセレクタを記述（id, class など)。 Font-size フォントが拡大縮小する範囲を指定。 Viewport width フォントのサイズに対応するビューポート幅を指定。 Options コメントの有無、サイズの最大値を超えないように指定 スタイルシートは
![[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる](https://cdn-ak-scissors.b.st-hatena.com/image/square/1cd72c10cbf289cd889d716004dc41c5e78c5fab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031001.png)
画面の動きをGIFアニメーションに変換する時に使える便利ツールいろいろ
2016年7月13日 JavaScript, 便利ツール 制作関連のブログのように作業の手順を紹介する時、Webサイトやアプリの動きを見せたい時、Webサービスの不具合を報告したい時…。画面に表示されているものや動きを言葉で説明するよりも、動画で説明した方が早い場合も多々ありますよね。短時間の動画ならGIFアニメーションにしてみてはいかがでしょうか？今回は画面キャプチャを録画し、自動でGIFアニメーションに変換してくれる便利なツールを紹介します。 ↑私が10年以上利用している会計ソフト！ 画面キャプチャからGIFに変換するツール GIPHY GIPHYは画面の動きを録画し、GIFに変換するためのMac用アプリ。無料で使えます。GIPHYのいいところは、なんと言っても動きが滑らか！そして繰り返し表示の設定や、動画の開始・終了ポイントの編集、キャプション（英数字のみ）まで加えられます。ただ、滑
面倒な画像のサイズ変更をワンクリックで！リサイズツール7選
ホームページに画像を掲載するとき、画像サイズが合っていないと画像が小さいと粗くなったり、思うような表示にならなかったりします。Illustrator（イラストレーター）やPhotoshop（フォトショップ）のような画像編集ソフトでサイズを変えることもできますが、複数の写真を一度に変換したいときにはあまり適していません。 そのような時に便利なのが、画像リサイズツールですWeb上では、一括で複数の画像サイズが変更できたり、定形サイズに当てはめて手軽に画像加工を行えたりするリサイズツールが公開されています。 今回は、サイズ変換に役立つ7つの画像リサイズツールを紹介します。ホームページを作成する際に画像のサイズがバラバラだと、見た目にも統一感が失われてしまいます。リサイズツールを活用して、統一したサイズで画像の掲載ができるようにしておきましょう。 インストールせずに利用できるブラウザ型の画像リサイ
ダミー画像生成の真打ちとも言える高性能がすごい！オンラインなのにオフラインでも利用できてしまう -satyr.io
ダミー画像の無料サービスはいくつかありますが、真打ちとも言える高性能なダミー画像が利用できる無料オンラインサービスがリリースされました。 ダミー画像はレスポンシブ対応、可変画像や高さが不揃いの画像にも対応しています。しかもオンラインなのにオフラインでも利用できてしまう優れものです。
お手軽に画像加工・編集出来るフリーソフト26選
画像加工でおなじみのソフトといえば、Photoshopを（フォトショップ）です。しかし、Photoshopは高額な上、使いこなすには専門的な知識が必要となり、初心者には扱いづらいソフトだと言えるでしょう。 そこで活用したいのは、無料で配布されている写真・画像の無料加工ソフト。無料と言っても高機能なものが多い上、初心者でも扱いやすいものが揃っています。 今回は、無料で手軽に画像が加工できるサービスをまとめて紹介します。写真に文字入れが必要な時やコラージュをしたい時におすすめです。ぜひ活用してみてください。 無料の写真・画像加工ソフトでできること まず、写真や画像の加工ソフトでできることを確認しておきましょう。以下の機能は、ほとんどの加工ソフトに備わっています。 写真や画像に文字入れをする 写真や画像のトリミングをする 写真や画像のサイズを変更する 以下のような機能が備わっている加工ソフトもあ
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
Bootstrapのカスタマイズが簡単にできてしまうオンラインツール -Bootstrap Live Customizer | コリス
Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
ライターなら知っておきたい！記事作成業務を手助けしてくれるツール7選
ライターは、記事を書くことがメインの業務となりますが、簡単な画像編集やキーワードの設定など、ただテキストを書く以外の業務も行う必要があります。 様々なツールが提供されていますが、多機能過ぎて逆に使いにくいと感じていることもあるのではないでしょうか。 今回は、ライターにオススメの記事作成業務を手助けしてくれるツールをご紹介します。 記事の構成から仕上げまで、ここで紹介するツールを使用すれば、効率よく業務を進めることができるだけではなく、より優れた記事になるでしょう。 記事作成業務を手助けしてくれるツール7選 1.ODN http://www1.odn.ne.jp/megukuma/count.htm 使用料金：無料 ブラウザ上で使用できる、文字数カウントツールです。 ライティングをしていると「◯文字以上は必要」という場面が多々あります。 ODNでは、コピーアンドペーストをして「字数を数える」
Googleも重要視！Webサイトの表示速度アップに欠かせないJavaScript/CSSの圧縮ツール9選
Webサイトの表示速度をアップさせる上で、JavaScriptやCSSなどWebサイトの構成要素を圧縮することは重要な解決策の一つです。圧縮とはソースコード中のコメントや改行を削除し、ファイル自体をコンパクトにする作業です。圧縮することで処理を高速に行えるようになります。 Googleが"ページ表示速度を検索順位評価要素に入れている"ことを公表していることもあり、Webサイト構築・運営に関わる担当者にとって「表示速度の向上」は放置できない課題といえます。 今回は、Webサイトの高速化に欠かせないJavaScript/CSSの圧縮ツールをその活用法とともにご紹介します。 JavaScript/CSS圧縮ツールを使うメリット 一般的にWebサイトの表示処理速度が遅くなる要因として、以下の3つが挙げられます。 1. Webサーバのハードウェア的なパフォーマンスが悪い 2. ネットワークが遅い 3
配色選びで悩みたくない！誰でも簡単に絶妙な配色が選べるツール15選
ホームページやブログ制作、提案書作成においても必ず必要になってくるのが「配色」です。 少しでも見た目を良くしたいと思うものですが、実際にデザインしてみるとシックリこないというような経験はないでしょうか。 配色をはじめ、デザイン作業はセンスが必要だと感じてしまいがちです。 そんな時にオススメしたいのが、様々なパターンを提案してくれる配色ツールです。 基本の1色から合うものを選んでくれるものや、ランダムに配色カラーパレットを生成してくれるものまで様々あります。配色ツールを使えば、誰でも簡単にかつプロのような配色が作れます。 今回は、配色パターンを検討する際に手助けをしてくれる便利なツールをご紹介します。 「なかなか配色が決まらない」と思った時はぜひ活用してみてはいかがでしょうか。 デザイン作業を効率化する便利な配色ツールまとめ 1.Adobe Color CC https://color.ad
GIFアニメーション完全ガイド 2016 : 無料ツールによる作り方や使い道、そして重要なワケとは？
海外サイトBuffer Blogで公開された「The Ultimate Guide to GIFs: How to Create Them, When to Use Them and Why They’re Essential for Every Marketer」の著者 Ash Read より許可をもらい、翻訳転載しています。 GIF アニメーションは、とても素晴らしいツールのひとつです。 わたしたち Buffer では、カスタマーサービス用のツイートや Eメール、Slack チャネルなどあらゆるところで使っています。なにかメッセージを伝えたいとき、GIFを利用できるチャンスだと思いましょう。 さらにGIFアニメーションは通常のSNS投稿に比べ、拡散、シェアされやすくなることも分かっています。またメールによるカスタマーサポートデモ、GIFを使って説明することもあります。 今回は、GIFア
Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ
普段利用しているソーシャルメディアのユーザーおよそ40%が、文字テキストだけの投稿に比べて、写真などのイメージを好むそうです。それだけ魅力的なビジュアルが重要になってきているということでしょう。今回は、フォトショップを利用せずデザイン編集作業できるツールやアプリをまとめてご紹介します。 ドラッグ&ドロップの手軽な操作だけでなく、オンラインやスマートフォン端末など Photoshopがインストールされていない環境でも無料で利用できるツールを中心に揃えています。用途に応じて利用してみてはいかがでしょう。 Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ Canva Canva は、オンラインで利用できるもっともシンプルなデザインツールのひとつ。文字やシェイプの追加など直感的に行うことができ、無料で利用できる点もポイント。 料金: 無料、写真のライセンスは$1
Photoshopがなくても簡単に作れる！無料のFavicon作成ツール7選
ホームページをお気に入り登録したりたくさんのタブを開いている時などに、アイコンが表示されていることに気がつきますでしょうか。 このアイコンを「Favicon(以下、ファビコン)」といいます。 このファビコンは、Photoshopがなくても簡単に作成することができます。 今回は、無料でファビコンを作成できるツール7選と合わせて、基本的な知識(サイズやフォーマット、作成のコツなど)もご紹介します。 まだ設置していない方は、ぜひこの機会に設置してみてはいかがでしょうか。 このニュースを読んだあなたにオススメ Illustratorを使ってファビコン（favicon）を作ろう 【全て無料！】商用利用OKのアイコン、イラスト素材8選 オシャレなアイコン使いに重宝する無料ピクトグラム40選 faviconとは favicon(以下、ファビコン)とは、favorite icon(お気に入りのアイコン)と
無料で使えるロゴジェネレーター16選｜ロゴが簡単に作成できる
今回は、ロゴが簡単かつ無料で作れるロゴジェネレーターをいくつかご紹介します。ロゴ作成に苦労している方、サクッとロゴが作りたいという方はぜひ活用してみてください。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 日本語のロゴが作れるロゴジェネレーター 1.LOGASTER LOGASTER 大きいサイズは有料となりますが、小さいサイズなら無料で作成できます。会社名選択、デザイン選択、デザイン編集の3ステップですぐにロゴが完成です。ビジネスタイプに応じてデザインを表示してくれるため、探す手間もありません。日本語にも対応しているので、日本語の企業名やサービ
Animated gif tools
Online GIF maker and image editorVideo to GIFResizerOptimizerGIF MakerEzgif.com is a simple, free online GIF maker and toolset for basic animated image editing. Here you can create, edit and convert GIF, APNG, WebP, MNG and AVIF animations. ezgif.com news and updatesMar 6, 2024Added PNG to SVG and JPG to SVG converters using autotrace and vtracer tools. Feb 23, 2024We have doubled the maximum uplo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
液体の流れをリアルに再現したOSSのペイントツール・「Fluid Paint」
Photoshopで画像の切り抜き、選択範囲を作成するのはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
Webデザインに役立つ無料のツール・デザイン集まとめ
オンラインロゴ作成／LOGASTER
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
