無料で商用可のウェブでよく使われるアイコンをフォント化した「CONDENSE-iconFont」
営利・非営利問わず自由に使用することが可能で、ウェブフォントとしても利用OKというTrueType/OpenType/WOFF/EOT形式のフォントが「CONDENSE-iconFont」です。下記サイトの一番下にある「DOWNLOAD」をクリックすればダウンロード可能となっています。 CONDENSE-iconFont http://icon.condense-c.com/ 実際にどのようなフォントがあるかというと、こんな感じです
営利・非営利問わず自由に使用することが可能で、ウェブフォントとしても利用OKというTrueType/OpenType/WOFF/EOT形式のフォントが「CONDENSE-iconFont」です。下記サイトの一番下にある「DOWNLOAD」をクリックすればダウンロード可能となっています。 CONDENSE-iconFont http://icon.condense-c.com/ 実際にどのようなフォントがあるかというと、こんな感じです
こんにちは。EXP ひのたんです。 最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。 feathericon Web サイト: http://feathericon.com/ GitHub: https://github.com/featherplain/feathericon npm: https://www.npmjs.com/package/feathericon 名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。 アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」
スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される際には各アイテムが異なるタイミングでアニメーションします。 HTML コンテンツエリアはsection要素で、そこにナビゲーション表示のトグルとなるチェックボックスのラベルを配置します。ナビゲーションは、普通にリスト要素で実装します。 <div id="wrapper"> <div class="mobile"> <!-- トグルとなるチェックボックス --> <input type="checkbox" id="tm" /> <!-- ナビゲーション --> <ul class="sidenav"> <
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
素早く制作できた！Web制作に役立つトレンドのツール一覧
作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし
【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
見慣れたウェブアイコンをフリーフォントにした「CONDENSE-iconFont」（無料） | ライフハッカー・ジャパン
デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール
Elusive icons, an icons font designed for use with Bootstrap
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other "attribution" claws. If you don't care much about licences there are many alternatives you can use, most notably the font-awesome font. When d
こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。 以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas
アプリのUIデザイン作成ツールとして有名な Sketch 。今週、バージョン44が発表されたタイミングで、Sketch をより使いやすくするオープンソースの優れた無料プラグインをまとめてみました。 Sketch のユーザーコミュニティーは、とても活発に情報交換が行われており、ワークフローを根本的に改善する数多くの素晴らしいプラグインを見つけることができます。この記事では、すべてのデザイナーが持っておきたいベストプラグイン12選をご紹介します。 UIデザインの作成ツール Sketch！10の魅力と入門フリー素材50個まとめ Sketch Measure Sketch Measure は、デベロッパーやプロジェクトマネージャー、他のチームメンバーの作業を整理し、プロジェクトの概要をまとめるのに役立ちます。 また、デザインからコーディングまですべてのプロジェクトを一人でこなすひとにも便利なツール
はじめに こんにちは！新卒デザイナーの浜田です。 今回は、入社して初めての担当サービス「UPTOON」の作品管理画面のデザイン時に起こった問題を、ケース別に紹介・解決策の提案をしていきたいと思います。 本記事は、以下の構成となります。 開発前のデザインの状態 起こった問題とその解決策〜開発編〜 起こった問題とその解決策〜デバッグ編〜 まとめ 同じく新人のデザイナーさん、デザイナーを目指している方には特に本記事を読んで注意してもらいたいです！ 開発前のデザインの状態 エンジニアさんにデザインを渡す前に以下の項目はクリアしており、自分では大丈夫だろうなと思っていました。 ボタンやテキストのHoverやActive状態のデザイン用意した セルのテキストが1行の時、2行の時など複数パターン用意した 入力前、入力後など状態別に用意した エラーページ、エラーメッセージ用意した 必要な素材は書き出した
Elusive icons, an icons font designed for use with Bootstrap
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other "attribution" claws. If you don't care much about licences there are many alternatives you can use, most notably the font-awesome font. (UPDAT
Icon Fonts are Awesome
Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add
[Gulp]これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみるでgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作成しました。今回はそのタスクをベースにSCSSファイルの変更を監視してタスクを実行するようにします。 watchタスクを作る まず、前回のgulpfile.jsをお復習いです。Sassを実行するだけのsassという名前のタスクが作られています。コメントの部分にwatchタスクを作ります。 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('./src/scss/*.scs
![[Gulp]これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
Electronさわってみました アイコンフォントを作り直す案件があり、位置調整やサイズ感の確認のたびにコマンド叩くのも、（リモートの）デザイナーさんとやりとりするのも大変だなということで、デザイナーさん向けの検証用のツールを作りました。 ゴール: GUIでSVGからwebfontに変換できるようにする github: svg2webfont に置いてます。 ツールとしては、ブラウザ上で使えるIcoMoon や fontello に近いものです。 もちろんこれで不便なければこちらを使えば良いのですが、 unicodeとアイコン名が対応しているjsonファイルが欲しい web上のサービスに依存するのが怖い（手元でやりたい） 一度作ってしまえばどのプロジェクトでも使いまわせそう Electronで何か作ってみたかった（重要） ということで、お試しでつくってみました。 Electronを使う利点
各フォントの♥マーク全21種類比べてみた
はじめまして、カヤック新人デザイナーのきんこと申します。 アイコンマークに起用したり、グラフィックの一部に使ったりと、 デザインをしていてなにかと登場することが多いハートマーク。 みなさんは普段どのように制作していますか？ フリーの素材をダウンロードして使う人やオリジナルのマークを作る人が多いかと思いますが、 今回は自分がよく使う、フォントに含まれるハートマークについてお話しします。 フォントに含まれるハートマークをリストにしてみた はじめに、ハートマークがシンボル登録されているものを表にしてみました。 こうして並べてみると、よく見る形のものから個性的な造形のものまで様々です。 見たことのないハートもあるのではないでしょうか？ 特に欧文フォントは、シンボル登録されている書体も少なく、「ハート→変換」では入力出来ないので、 見つけるのに苦労しました...。 (他言語のハートマークを入力したい
Elusive-Icons Webfont
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws. When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve the
非常にたくさんの種類がフリーで配布されているアイコン。常に新しいものをチェックされているという方も多いのではないでしょうか？そんな中今回紹介するのは、定番として使用できるアイコンが揃った「274 Vector Line Icons for free」です。 アイコンを使う頻度の高い方は是非ストックしておきたい、ベーシックなタイプのアイコンが274個セットでダウンロードできるようになっています。 詳しくは以下 ルーペやソーシャル、メールやペンなどのBASIC、いろいろな表情のEMOTION、天気のWETHER、さまざまなデバイスやマルチメディアをアイコン化したDEVICES、いろいろな形の矢印が揃ったARROWS、ショップカートやクレジットなどECサイトに最適なFINANCEといったようにカテゴリに分類され収録されているので使いやすく、ラインアイコンというシンプルな描写がどんなデザインにもマ
head内にコードを一行書き足すだけで潤沢なアイコンフォントがすぐ使える「Font Awesome」が便利 * prasm（プラズム）
アイコンフォント、便利です。 自分でいちいちアイコンを書く必要がなくなるし、レティーナや高解像度のディスプレイでも表示が汚くならないし、アイコンフォント、便利です。 まだアイコンフォントを使ったことのない方は、導入面倒なんじゃないの？とお考えかもしれませんが、意外に簡単です。 簡単って言うか、一行です。嘘だと思ったら、ここから先の記事をどうぞ。 使い勝手のいいアイコンフォント「Font Awesome」 とにかく導入は手軽です。 Get Started with Font Awesome ＜head＞＜/head＞内に一行コードを書き足します。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 必要なスタイルシートを外部から読み込むだけです。 メリ
非Boostrapプロジェクトでも使える200種を越えるWeb Fontアイコン集·Elusive icons MOONGIFT
Elusive Iconsは非Bootstrapサイトでも使えるWeb Fontを使ったアイコン集です。 Bootstrapの魅力の一つにWebサイト構築でよく使われるようなフォントが予め提供されているというのがあります。さらにそのアイコンも使い勝手よくしてくれるWeb FontによるFont Awesomeも便利です。そしてBootstrap以外のサイトでも使いたいと考える方はElusive Iconsを利用してみましょう。 Bootstrap標準のアイコン相当があります。 ソーシャル系アイコン。 一般的なユーザ向けのアイコンもあります。 Elusive IconsはBootstrapベースのプロジェクトはもちろん、それ以外のプロジェクトでも使えるように想定されています。IE7以上から対応が可能とのことです。217のアイコンがあれば、大抵の装飾には事足りるのではないでしょうか。 Elus
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
Here’s the List of Free Icons Offered by Linea Linea Icons :20+ Best Sites for Free Icons What are line icons? A line icon is a shape vector outline that consists of fonts designed in CSS. You can use line icons in place of using jpeg or actual images to show what message a developer is passing across. Folders and pictures can be bulky, heavy, and outdated, but you can make your work look more app
海外デザインブログSixRevisionsで、商用利用も可能な無料アイコンフォント17個をまとめたエントリー「Free Icons Fonts for Web User Interfaces」が公開されていたので、今回はご紹介します。Webサイトやアプリのインターフェースデザインにいかがでしょう。 詳細は以下から。 アイコンフォントってなに？ アイコンフォントは、通常のアルファベットやひらがなとは異なり、シンボルや絵文字（矢印、フォルダー、虫眼鏡など）を収録したフォントファイルです。 アイコンフォントは、Webサイトのナビゲーションメニューなどのユーザーインターフェース(UI)デザインに利用することを想定してデザインされています。CSS @font-faceスタイリングをすることで、他のWebフォント同様に利用することが可能です。 [fancy_box] [list type=”star”
[Gulp]これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編｜Yuu's Memo
皆さんこんにちは！！ 前回までで、最低限のスケジュール管理をできるAPIサーバーの作成が終わりました。 今回からは、フロントエンド編ということで、ようやくWEBアプリの開発らしくブラウザー上で動きを確認できるようになります。 フロントエンドは、Vue.jsで作成するのですが、いくつか開発に便利なライブラリーを利用して開発を行なっていくので、今回は「準備編」ということで、一気にそれらのライブラリーをプロジェクトへ組み込んでいきたいと思います。 では、張り切っていきましょう！！ 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクロ
iOS7やアプリではすでにお馴染みの「フラットデザイン」。 平面的なレイアウトや、均整が取れた配色にシンプルなデザインはウェブやアプリ開発では主流になりつつあります。 ただ、いくらシンプルとはいえ、Webデザイナーでない限りアイコン1つ作成するにしても難しいと感じる方は多いのではないでしょうか。 今回は、ノンデザイナーの方でも気軽にフラットデザインを取り入れられるよう、無料でダウンロードできるフラットデザインのアイコンをご紹介します。 フラットデザインアイコンの特徴 フラットデザインのアイコンはシンプルの中にしっかりとした象徴的モチーフや、ユーザーが見て一目で意味が理解できるものなのでとても質の高いアイコンです。それを自分で考えて制作するのはとても大変ですよね。 フラットデザインはレイアウトにしてもフォントや色の均整が取れていて、平面的なデザインが特徴です。 そのため、アイコンもすっきりと
Es mangelt nicht an guten Iconsets, die man für eigene Zwecke anpassen kann. Aber manchmal muss es dann doch mal etwas Eigenes und Individuelles sein. Gerade die Entwicklung von Icons ist eine anspruchsvolle Sache. Sie müssen möglichst einfach in der Gestaltung sein und dennoch eine eindeutige und klar verständliche Botschaft vermitteln. Dazu kommt, dass Icons innerhalb eines Sets ein einheitliche
gulpでWebFont作成を自動化 | Web雑記帳
gulp-iconfontでweb-font作成を自動化 前の記事（WebFont作成をGrunt.jsで自動化）でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。 参考 以下２つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。 https://www.npmjs.org/package/gulp-iconfont https://github.com/cognitom/symbols-for-sketch インストール 以下が今回インストールしたパッケージになります。 gulp gulp-consolidate テンプレートエンジンで使用 gulp-iconfont シンボルフォント作成の本体 gulp-rename gulp-w
Free PSD Web UI Element | Web Elements | Photoshop | blognews | AlexWolkov | Life & Live
Free PSD Web UI Element 41 Button, web elements, APIs PSD | Кнопки, веб элементы, программные интерфейсы PSD. Часть 41. 270 векторных иконок 270 векторных иконок для загрузки в .SVG | <noindex><a href="http://aristath.github.com/elusive-iconfont/" target="_blank" rel="nofollow" >Elusive Icons</a></noindex> Иконки на HTML/CSS Иконки на HTML/CSS | <noindex><a href="http://one-div.com/" target="_blan
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, somethin
アイコンをwebfontにするの、数年前から流行ってて、確かに便利ということがある。[Font Awesome](http://fontawesome.io/)とかが有名。 アイコンフォント、自分でも作れそうだったので作り方まとめた。 ## 用意するもの - [Glyphs Mini](https://itunes.apple.com/jp/app/glyphs-mini/id469036911?mt=12&uo=4&at=11l8Mb) - Adobe Illustrator Glyphs Miniはフォント作るアプリ。Mac App Storeで買える。 具体的な手順1.Illustratorの準備1792*1792pxのドキュメントを新規作成する環境設定 -> ガイド・グリッド で、グリッド128px、分割数2にする 「グリッドを表示（⌘+¥）」するアートボードにグリッドが14マスで
はじめに 「今かよ」って話なんですが、急遽はじめた一人アドベントカレンダーでどの日に何を書くか構成がきまっていなかったので考えてみた。 12/01：bundler, rbenv, nodebrewでGulp環境を作ってみる 12/02：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる 12/03：watchで変更を監視する 12/04：gulp-plumberでエラー時のwatchを解除させない 12/05：gulp-connectでWebサーバーとライブリロード 12/06：gulp-load-pluginsでプラグインの一括読み込み 12/07：gulp-ruby-sassでSassオプションの指定（bourbon, neat, bittersのロード） 12/08：頻繁に使いそうなモジュールを試す：JS,CSS圧縮系 12/09：頻繁に使いそうなモジュールを試す：
アイコンフォント使ってますか？ 私はウェブアイコンフォントと言えばこちらの記事で紹介しました「Font Awesome」を個人的によく使っています。簡単だし使っている方も多いのではないでしょうか？ https://www.webproduct-lab.com/entry/how-to-use-fontawesome しかし、たまにここには用意されていないアイコンを使用したい時があります。 はてなブックマークのアイコンなんかも実はないんですよね。。 それで他のアイコンフォントを探してみて良いなと思ったのが今回ご紹介する「IcoMoon」というアイコンフォントです。 と言ってもこちらにもはてなブックマークのアイコンがないんですが…このアイコンフォントは簡単に設置することができる上にオリジナルのアイコンフォントをインポートして使用することもできちゃうんです！ では今回はアイコンフォント「IcoM
アイコンフォントが手軽に使える「IcoMoon」の使い方｜WEBサービス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
IcoMoon の取扱アイコン IcoMoonページ上部の「IconMoon App」ボタンをクリックします。 WEBサービスでもよく使いそうなアイコンが多数掲載されています。 一部になりますが、ざっとこんな感じ↓ IconMoon Free Linecons Eighty Shades Entypo IcoMoon の使い方 使いたいアイコンをクリックして、 ページ下部の「Font」ボタンをクリックします。 確認ページへ遷移しますので、同じくページ下部にある「Download」ボタンをクリックします。 icomoon フォルダ内の構成 ダウンロードした icomoon.zip を解凍すると、中身はこのようになっています。 アイコンフォントを表示させるのに必要なファイルは、 style.css と、fonts フォルダ内の4つのフォントファイルです。 style.css 下記ソースコードの
今回の投稿はWebサイトの作り方についての個人的なまとめの続編でございます。 これまでご説明してきた内容はWebサイトの作り方に関するデザインの具体例ではなく、Webデザインのあり方を元にWeb制作の考え方に寄ったお話しでした。 https://www.webproduct-lab.com/entry/webdesign-process-design https://www.webproduct-lab.com/entry/webdesign-process-design-2 具体的な例もわかりやすくて良いと思いますが、そもそもの概念を知った上でサイト制作をしなければ次に繋がりませんからね。 どうやったらうまく表現できるのか？ということを常に考えていると「こういうことか！」といった“ひらめき”に辿り着くこともあります。そんな私もデザインに15年以上も携わっていて未だに考え続けています。。
[Gulp][Sketch 3][hologram][SCSS][CSS]これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作るでSpriteイメージを作りました。今回はgulp-hologramプラグインとスタイルガイドジェネレータのHologramを使ってスタイルガイドを作ってみたいと思います。 Hologramについて HologramはRuby環境で動くスタイルガイドジェネレータです。Hologramは独自のテンプレートを使ってスタイルガイドをカスタマイズすることができます。スタイルガイドジェネレータには他にもStyleDoccoやKnyle Style Sheetsがあります。 Ruby環境の準備 Gemfileにgem "hologram"を追記して$ bundle installを済ませます。 sour
[Gulp][Sketch 3][SketchTool]これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
これからはじめる Gulp シリーズこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し はじめに この記事はGulp.js（全俺） Advent Calendar 2014とSketch 3 Advent Calendar 2014の19日目です。前日のSketch 3 Advent Calendar 2014は@soutaroさんのヒラギノの縦位置を揃えるちょうべんりなSketchプラグインの紹介でした。2つのAdvent Calendarを掛け持ちしている記事でややこしくなってごめんなさい。Gulp.js（全俺） Advent Calendar 2014の方はnodebrewを使ったGulp.js環境の構築や使い方について一から紹介しているので興味があれば1日目から読んでみてください。 前回のGulp.js（
これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイコンフォントを作ったのでオープンソース化して GitHub と npm に公開しました | WP-E (仮)
[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション
フロントのチーム開発効率を最適化するワークフローと SPA 設計 | Nagisaのすゝめ
sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | Goodpatch Blog
Sketchってこんなに便利！デザイナーが入れておきたい無料プラグイン12個まとめ
新人デザイナーがUI制作時に陥りやすい4つの問題と解決策 | Nagisaのすゝめ
Electronでwebfont変換ツールを作ってみた話 - Qiita
定番として使用できるアイコンが揃った「274 Vector Line Icons for free」
Transitions for Off-Canvas Navigations | Codrops
Linea Icons :20+ Best Sites for Free Icons
Webサイトに利用したい、ピクトグラムの無料アイコンフォント17個まとめ - PhotoshopVIP
フラットデザインのアイコンを無料でDLできるWebサービス4選
Icons selber gestalten und erstellen: So geht es
Multi-Level Push Menu | Codrops
Glyphs Miniでアイコンフォントを作る方法 - MEMOGRAPHIX
[Gulp]これからはじめるGulp（0）：アドベントカレンダースケジュール
アイコンフォント「IcoMoon」の使い方と便利に使う方法について｜webproduct-lab
Webサイトの作り方について個人的まとめ -デザイン編（続編2）｜webproduct-lab