全部、商用利用無料！ UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるTabler Iconsを紹介します。 アイコンの種類はなんと1,900種類超え！ 豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。さらに、PNGやWebフォントも揃っています。
)
webimgo - 画像をバッチ処理でサイズ変更&最適化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像をまとめて変換したい時はよくあります。たとえば提案資料を作っていて、Webサイトのスクリーンショットをたくさん取得したものの、それをサイズ変更したい時です。異なる画像フォーマットも合わさったりすると、とても面倒です。 今回紹介するwebimgoはバッチ処理で画像サイズの変換、そして最適化をまとめて行ってくれます。 webimgの使い方 webimgoのコマンドヘルプです。基本的に幅を指定するだけです。 $ npx webimgo --help Usage: webimgo <command /> [options] コマンド: webimgo webimgo Batch width resize and optimise images オプション: --version バージョ
arrangeit - クロスプラットフォームで使えるウィンドウ管理ユーティリティ MOONGIFT
GUIのOSにとってウィンドウ操作は大きな問題です。ついつい開きすぎてしまってデスクトップがウィンドウで溢れかえってしまったり、目的のウィンドウがどこにあるのか分からなくなったりします。 そこで使ってみたいのがウィンドウ操作のユーティリティ、arrangeitになります。 arrangeitの使い方 arrangeitの操作はちょっと独特です。操作対象にしたいウィンドウがアクティブな状態で実行します（または右クリックでウィンドウを移動できるようです）。そうすると専用のウィンドウがフローティングで表示されます。 そしてサイズを変更したりして確定すると、その場所と大きさにウィンドウが移動します。 仮想デスクトップへ移動したりもできます。 arrangeitは仮想デスクトップを使ってウィンドウを移動したり、リサイズや最小化したりすることができます。キーボードとマウス操作の両方に対応していますので
WordPress で最大アップロードサイズを変更する方法 - by Takumi Hirashima
WordPress で最大アップロードサイズを変更する方法を紹介します。 例えば、2MBを超えるファイルをアップしたい時に便利な方法です。 functions.php に変更を加える方法 php.ini に変更を加える方法 サーバーの設定を確認 WordPress 側で最大アップロードサイズの変更を試す前に、まずはサーバーの設定を確認してください。 XSERVER やロリポップなどの主要なサーバーでは、サーバーの管理画面でファイルのアップロードサイズを管理している場合があります。 functions.php に変更を加える方法 WordPress でファイルの最大アップロードサイズを変更する方法を紹介します。 例えば、アップロードサイズを 5MB まで引き上げたい場合は、次のコードを functions.php に追加します。 /* WordPressで最大アップロードサイズを変更する
フォトショップの作業が楽になる、覚えておきたい小技テクニック29選
2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。
デザインツールの革命と言っていいかも！サイズ指定を「%」でできるSketchのプラグイン -Fluid
普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。 Sketchでサイズ指定を「%」でできるプラグインを紹介します。 キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。
アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
Web上にある画像を任意のサイズに変換してくれる・「Firesize」
FiresizeはWeb上の画像を任意のサイズにリサイズしてくれるWebサービスです。例えば http://example.com/foobar.jpg といった画像があった場合、 http://firesize.com/400×300/g_center/http://example.com/foobar.jpg のようにサイズを指定すればそのサイズに変換して返してくれます。特に特定のライブラリやCSSを読む込む必要はなく、Firesizeにサイズとリサイズする画像のパスを指定すればそのサイズに変換しCDNにホストされるので、そのパスを使ってね、という類のもののようです。こういった仕様なので用途は限られますが、覚えておいても損は無いかもですね。 Firesize
チェックボックスやラジオボタンを大きくする方法
チェックボックスやラジオボタンを大きくする方法を紹介します。 １．はじめに デフォルトのチェックボックスとラジオボタンのサイズは小さいです。 デフォルトのチェックボックスとラジオボタン で、jQueryなどで独自デザインに変更して大きく見せているサイトは多いと思いますが、CSSで簡単に大きくできないか調べてみました。 ２．CSSでチェックボックスやラジオボタンを大きくする まずサンプルのHTMLを示します。 <input type="checkbox" id="foo" name="foo" /><label for="foo">チェックボックス</label> <input type="radio" id="bar_1" name="bar" /><label for="bar_1">ラジオボタン1</label> <input type="radio" id="bar_2" name=
バイク買取価格の相場は？高く売れるバイクの特徴｜知りたかったバイク断捨離アレコレ
このサイトでは、バイク買取で知っておきたい内容を取り上げます。 まず最初に、バイクの買取価格の相場の考え方を取り上げ、高く売れるバイクの特徴を考えます。 加えて、バイクの買取を依頼した場合のキャンセルの期限や、カギがないバイクの買取が可能かどうかについても記載します。 そして、バイクを買い取ってもらう場合の手順もわかりやすく説明し、さらには、まだローンを支払っているバイクを売却する場合の注意点もお伝えします。 バイク買取の相場はバイクの車種や年式などによりある程度決まっています。 一般的に、バイクの年式が新しく人気が高い車種は高値で買い取ってもらえる確率が高くなります。 そして、バイク買取を考えている人は、自分のバイクの買取相場を知っておくと買取業者に安く買いたたかれることを防ぎ、適正価格で売却するのに役立ちます。 高く売るためには、相場以外に大切な要素があります。 その一つが売却する時期
PDFのサイズを変更する方法
PDFのサイズを変更する方法を紹介します。 このエントリーでは、以下の「てすと」とだけ書かれたA4サイズのファイルをB4サイズに変更してみます。 プリンタの設定でB4に拡大すれば問題ない場合もありますが、たとえば近頃流行のネットプリントなどではファイルサイズと異なる設定ができないケースもあるかもしれないので、そういう場合に役立つかもしれません。 このテクニックにはAdobe AcrobatまたはPrimo PDFが必要です。 １．ファイルサイズを確認する サイズを変更する前にファイルのサイズを確認するには、Adpbe ReaderなどでPDFファイルを開き、「ファイル」→「プロパティ」を選択。 開いた「文書のプロパティ」画面の「概要」タブに「ページサイズ」が表示されます。 （クリックで拡大） 210 x 297mmでA4サイズであることが分かります。 ２．Windows10 + Acrob
การถ่ายภาพและการท่องเที่ยว - RESPONSIVE
This message appears for administrator users only
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」を紹介します。 先日、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を投稿したところ、Chromeでも同じような機能がほしい！みたいな書き込みがあったので、探してみたら似たような拡張機能がありました。 それがこの「Resizer」です。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」については、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を参照ください。 ２．インストール 「Resizer」のページ右上にある「CHROMEに追加」をクリック。 表示されたダイアログの「追加」をクリック。 これでインストールされました。 ３．「Resizer」の使い方 レスポンシブWebデザインのサンプルサイトとして
設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer
なかなか便利かもと思ったのでメモ。よくある、 フォントサイズを変更できるやつなんですけど、 設定が凄く楽で軽量なjQueryプラグインです。 導入も楽なので積極的にうまく入れて行きたい ですねー。正直使ってもらえるか分からない ものですけど、あれば誰かに役に立つかも 知れませんし。 軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITとGPLのデュアルライセンスとなっています。 これこれ。よく見かけますよね。多くの場合は小、中、大となっていますが、これはもっと細かい設定を簡単に行えます。ボタンは若干分かりにくいのでその辺は工夫してみてください。 設定を変えるプラグイン（jquery.fontSizer.js）を開いて20行目あたりの変数定義の部分です。 var defaults = { maxSize: 30, minSize:
指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」:phpspot開発日誌
jFontSize | jQuery plugin | Font Size | Font Resize | Change font-size | Javascript 指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」 大・小だけでなく、標準サイズにも変更できるようなボタンを実装できます ↓指定エレメントのみをリサイズ可能。標準ボタンもあるので戻すのも簡単。 使い方は、サイズ変更用のボタンを指定のマークアップで記述後、$(element).jfontsize() としてリサイズ対象としたいエレメントを選ぶだけです ボタンも自分でCSSを使って簡単にデザイン変更できます 関連エントリ 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 手描き感がクールな44種類のフリーフォントいろいろ
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック
ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href
指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」:phpspot開発日誌
FontSize | jQuery Plugins 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 特定のエレメントをクリックした際に、指定した要素のフォントサイズをUPさせることが可能。最大や最小のサイズも指定出来ます。 使い方は簡単で、必要なライブラリを読み込んだら次のように呼び出すだけです。 $(element).fontSizer({ action: "up", elements: "#content", max: 36 }); デモページはこちら コンテンツをどんどん大きくしていった例。maxを指定しておくと一定以上からサイズは大きくならなくなります。 エレメントを絞ることで、サイト全体のレイアウトが崩れることもありません。 ちょっとしたユーザビリティの向上に知っておいてもよさそうなプラグインですね。 関連エントリ コンピ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブデザインのブレイクポイントの確認用、ブラウザの幅をピクセル単位で簡単に変更できるFirefoxの機能拡張 -FireBreak
Firefoxのタブを大量に開いた時にアクティブなタブのタイトルを見やすくできるテク | ライフハッカー・ジャパン
