ErgoArrowsProの紹介をするよ！ - 自作キーボード温泉街の歩き方

2023/04/14 119 users カーソル サリチル酸 キー配列 自キ温泉ガイド キー

こんにちは。自キ温泉ガイドのサリチル酸です。 今回は比較的長い時間（１年半）をかけて開発してきたErgoArrowsProがついに完成したので、改めて特徴について説明したいと思います。 ErgoArrowsProとは 写真で見るErgoArrowsPro 特徴１：指の長さにあわせたキー配列 特徴２：アロー（カーソル）キー 特徴３：アルミ削り... 続きを読む

WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons | コリス

2021/06/27 59 users コリス figma Sketch コピペ アイコン

アロー・ホーム・サーチ・カート・メール・ソーシャルメディア・ハートをはじめ、WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できるAkar Iconsを紹介します。 コピーしたSVGコードはHTMLに貼り付けて使用してもよし、Adobe XD, Figma, Sketchなどでも利用できます。 Akar Icons ... 続きを読む

これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス

2019/09/13 85 users コリス interactions インタラクション CSS

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む

Proxy "it": アローすら面倒な怠惰JavaScripterのための遅延評価 - Qiita

2017/11/09 53 users Proxy Qiita TRIM Row col

遅延評価で これ data.map(row => row.values.split(',')[2].trim().map(col => col.trim()).map(parseFloat)[2]); が こう data.map(it.values.split(',').map(it.trim()).map(parseFloat)[2]); なる はじめに 何をしたいのか JavaScriptを書... 続きを読む

Illustrator用があるのはありがたい！シンプルにデザインされたアイコンが300種類揃った無料素材 -Iconography | コリス

2017/09/06 51 users コリス スマホアプリ ソーシャルメディア カード アイコン素材

Webサイトやスマホアプリでよく利用される、ホーム、検索、サイトマップ、アロー、カート、ソーシャルメディアのアイコンをはじめ、約300種類ものアイテムが揃ったシンプルにデザインされたアイコン素材を紹介します。 アイコンの ...記事の続きを読む 続きを読む

サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows | コリス

2017/04/19 58 users コリス 画面遷移 プラグイン Sketch ユーザーフロー

Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。 ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成でき ...記事の続きを読む 続きを読む

サイト構造や画面遷移を分かりやすく見せる、サイトマップ・フローチャートを作成する要素がすべて揃った無料素材 -UX Flow | コリス

2017/03/02 96 users コリス Sketch用 ラベル アイコン パネル

Webサイトやスマホアプリのサイトマップ・フローチャートを簡単に作成できるSketch用の無料素材を紹介します。 ラインやアローをはじめ、アイコン、ラベル、パネルなど、サイトマップ・フローチャートを作成するための要素がす ...記事の続きを読む 続きを読む

地味だけど便利！アローやカーソルなど1280+種類のアイテムが揃ったPhotoshopのカスタムシェイプの無料素材 | コリス

2014/07/07 99 users カスタムシェイプ ホビー シンボル 商用 コリス

商用でも無料で利用できる、Webページやアプリなどビジネスやホビーに使えるさまざまなアイテムが揃ったPhotoshopのカスタムシェイプ素材を紹介します。 My personal PS Custom Shapes #Freebies カスタムシェイプはなんと1,280+種類！ さまざまなアロー、アイコン、リボン、カーソル、シンボルなどが揃ってます。電気回路図かな？ もあります。アローは細いのから太... 続きを読む

小さい葉っぱがかわいい！月桂樹をあしらったフレームやアローなどの素材 -StarSunflower Studio | コリス

2013/09/26 59 users コリス 月桂樹 SVG ARROWS フレーム

かわいらしくデザインされた月桂樹をあしらったフレームやライン、アロー、リボンなどの素材を紹介します。 Free Laurel Frames & Arrows ダウンロードできる素材のフォーマットは、便利なものが揃っています。 .png 透過PNGでグリーンブラウン、ブラックの2種類。 .svg ベクターなのでサイズ変更可能です。 .abr Photoshop用のブラシ。 アイテムはPNGも高解像な... 続きを読む

商用利用無料でしかもベクター！ウェブサイト・アプリ用の375種類のアイコン素材 -375 Vector Icons | コリス

2013/03/26 324 users EPS コリス ベクター サーチ Retinaディスプレイ対応

AI, EPSのベクターで作成されたRetinaディスプレイ対応のアイコン素材を紹介します。 アロー、サーチ、メール、ソーシャルメディアをはじめ、ビジネス用もホビー用も揃ってます。 続きを読む

商用無料、同じ形状のアローやビュレットがPSD・ベクター・フォントで揃っているフリー素材 -Listicons | コリス

2012/07/30 67 users コリス フォント 形状 商用無料 フリー素材

全52種類のアイコン ダウンロードファイルには、さまざまなフォーマットが含まれています。 PSD Photoshop用のPSD素材 ベクター Illustrator用のAIをはじめ、EPS, SVGも デスクトップ用フォント OpenTypeフォント ウェブ用フォント WOFFフォント、SVGフォント、TrueTypeフォントなど PSDはもちろん、各アイコンごとにレイヤーが保持されています。 続きを読む

全133種類ちょっとレアなのもある、16×16のミニサイズのアイコン素材 -Small Ui Icons | コリス

2012/07/05 193 users コリス ヘッドフォン ハンガー メガネ ウェブサイト

アロー、検索、ホーム、メール、ソーシャルメディアなど、ウェブサイト・アプリケーション用のさまざまな種類が揃ったミニサイズのアイコン素材を紹介します。 メガネとかヘッドフォンとかハンガーとか、ちょっと変わったものもあります。 続きを読む

[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please! | コリス

2012/04/12 122 users コリス relative CSS background div

HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f... 続きを読む

使い勝手がよい、50種類のシンプルなデザインのアローのベクター素材 | コリス

2012/02/28 313 users コリス カスタムシェイプ Agreement ベクター素材

アロー素材全50種類のキャプチャ ダウンロードできる素材のフォーマットは4つです。 ai: Illustrator用のファイル eps svg csh: Photoshop用のカスタムシェイプ アローのカスタムシェイプ50種類 素材の利用にあたっては個人でも商用でも無料とのことです。 詳しくはダウンロードファイルの「MediaLoot_License_Agreement.pdf」をご覧ください。 ... 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス 矩形 ポパー Safari CSS

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

全50種類、PNGもPSDも揃ってるシンプルなデザインのピクセルベースのアイコン素材 -50 Crisp Web UI Icons | コリス

2011/12/21 204 users icons コリス psd サーチ PNG

ウェブページ・アプリケーションでよく利用されるアロー、メール、サーチなどが用意されたシンプルなデザインのアイコン素材を紹介します。 50 Crisp Web UI Icons アイコンは全50種類、それぞれ明るい背景用と [...] 続きを読む

矢印・指さし・シンボル・丸数字など、さまざなピクトグラムが全部揃ってるDingbatsフォント -Erler Dingbats | コリス

2011/12/15 417 users コリス ピクトグラム フリーフォント 矢印 フラワー

Dingbatsフォントとはいわゆる絵文字フォントのことで、人気の高いシンボル、アロー、ペン、メール、スター、フラワー、ハート、クロスなどのピクトグラムが利用できるフリーフォントを紹介します。 Unicode Stand [...] 続きを読む

隠されたデザインに感心してしまう13のロゴ（PART2）:らばQ

2011/10/14 83 users ロゴ part2 らばQ デザイン golf

隠されたデザインに感心してしまう13のロゴ（PART2） ロゴって情報量が少ないものだけに、デザイナーの力量が問われるところではないでしょうか。 創意工夫に満ちあふれた、複数の意味を持つロゴの第2弾をご紹介します。 （PART1）はこちら。 Aの文字が矢印（アロー）。 2. ドロップしてます。 3. ステップ状のE。 4. オレンジのO、キャットのC。 5. golf。 6. 照明デザインの会社だ... 続きを読む

[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect | コリス

2011/10/10 75 users コリス jQuery 半透明 CSS エフェクト

デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div clas... 続きを読む

持ってると便利な手描き風のアロー・矢印のPhotoshopのシェイプ素材 | コリス

2011/07/19 114 users コリス シェイプ 縦横比 Photoshop 商用

商用でも無料利用できる、アロー・矢印のシェイプ素材を紹介します。 70+ Hand Drawn Arrows Shapes ダウンロードできるアロー・矢印は全部で71種類あり、シェイプなのでサイズや縦横比やカラーを簡単に [...] 続きを読む

[JS]一つ一つのパネル表示をカスタマイズできるスライドショーのスクリプト -imgPlayer | コリス

2011/05/05 70 users コリス キャプチャ ナビゲーション アニメーション 静止画

一つ一つのパネルを異なるサイズで、最適な位置に表示し、異なる背景やアニメーションを設定できるスライドショーのスクリプトを紹介します。 2枚目を表示したキャプチャ 静止画ではその楽しさが分からないので、ぜひデモをどうぞ。 デモページ スライドショーの操作は、画像の左右のアロー、下のナビゲーション、キーボードの矢印キーに対応しています。 実装は少し面倒で、個々のパネルごとに座標とサイズなどを指定します... 続きを読む

[CSS]画像を使用しないでイメージを作成するスタイルシートのテクニック集 | コリス

2011/03/07 133 users コリス CSS キャラクター テクニック集 スタイルシート

コンテンツ生成用に画像をなるべく使用せずに、より多くのブラウザ対応を考慮した、画像を使用しないでイメージを作成するスタイルシートを紹介します。 CSS Generated Content 小さい三角 キャラクター アロー [...] 続きを読む

ウェブサイトで使用するものが一通り揃ったフリーのアイコン素材 -Primo | コリス

2009/07/31 260 users Primo コリス PNG フォーマット ショッピングカート

各種アイコン、アロー、ショッピングカート、検索、クレジットカードなどウェブサイトで使用するものが一通り揃ったフリーのアイコン素材をWeb Designer Depotから紹介します。 200+ Free Exclusive Vector Icons: 'Primo' ※クリックで拡大画像 ダウンロードできるアイコン素材のフォーマットはAI, PNGで、PNGのサイズは48×48, 64×64, 1... 続きを読む

あらゆるサイトのカラーにあうフリーのアイコンがダウンロードできる -Iconza | コリス

2009/05/27 287 users コリス アイコン 上記キャプチャ 背景 RSS

使用するサイトのデザインにあわせて、カラーの変更が可能なフリーのアイコンがダウンロードできる「Iconza」を紹介します。 Iconza アイコンは、上記キャプチャのようにアイコンのカラーや背景のカラーを変更でき、サイズは32×32, 24×24, 16×16のものがあります。 アイコンは現在のところ90種類あり、ホーム、メール、RSS、検索、アローなど利用頻度の高いものがたくさん揃っています。 ... 続きを読む

[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート | コリス

2009/02/11 241 users コリス グラデーション CSS パンくず リスト要素

グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 Simple scalable CSS based breadcrumbs demo パンくずはリスト要素で実装されており、日本語の使用も可能です。 パンくずのHTML Home Main section Sub section Sub sub section T... 続きを読む