アイコンを探す手間がなくなる！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 あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。 jQuery.ImgLoaderとは 多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。 デザインは綺麗な状態を見てもらいたいですよね。 そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。 準備 まずはImgLoaderを使うための準備をします。 下記URLからダウンロードしてみましょう。 https://github.com/Takazudo/j
GitHubでライブラリを公開したら★300以上がついて海外からも注目された学生にインタビューしてみた! - ♥OSS
前年開催したリーダブルコード勉強会やアプリコンテストに参加いただいた大学院生 kentya6 (Kengo Yokoyama) · GitHub さんが、Swiftで作った以下のライブラリをGitHubで公開したところ、★300以上ついた！ というお話を聞きつけ、その経緯やどんなことが起こったのか、インタビューしてきました! github.com －まずは自己紹介ということで、普段行っている研究や開発で、どんなことをされているか、教えてもらえますか? 私の在籍している 筑波大学高度ITコース では、研究ではなくPBL形式のチーム開発を行っていて、顧客の要望をヒアリングして実装に落とし込み、最後に納品するというシステム開発を行っています。 修士2年になってからは別のプロジェクトが始まりましたが、修士1年では施設内ナビゲーションアプリCampusAR を作成していました。 （補足: Campu
おしゃれなローディングアニメでイライラ解消 fakeLoader.js
「fakeLoader.js」は、ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示するjQueryプラグインです。 あくまでも「フェイク」なので読み込みが終わったかどうかは判断できませんが、デフォルトで用意されたオシャレなローディングアイコンを手軽に表示でき、オリジナルの画像や背景色も選択できます。設置方法が明快で、圧縮版のサイズは2KBという超軽量な点も特徴です。 fakeLoader.jsプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、スマートフォンではiOS 7.1のSafari、Android 4.1以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式
[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita
社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は 「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ です。 流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^; 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。 ① Heroku Heroku を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は Git で push するだけ です。 商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デ
![[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a05c54efc4e23b8f321cec1bcae63bb87257553f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV0VCJUU5JTk2JThCJUU3JTk5JUJBJTVEJTIwJUU3JUE3JTgxJUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlDJTgwJUU4JUJGJTkxJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JTJGJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwMTQlRTklODElQjglMjAlRTMlODAlOUMyMDE0JUU1JUI5JUI0JUU3JTg5JTg4JUUzJTgwJTlDJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hYzRkNzQ2NGU1M2VlZDNkZTQwYTYxNDNlZmQ1MjZkOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dd239fddef9fb1a234fbc44b218471eb6)
Facebook風ドロワーメニューが手軽に導入できる drawer
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
米Yahoo!がYUI新規開発中止を発表。その背景となったJavaScriptの現状解説
米Yahoo!のエンジニアリングチームは、同社がこれまでJavaScriptライブラリとして開発してきたYahoo User Interface library（YUI）の新規開発を中止すると発表しました。 YUIは、JavaScriptでインタラクティブなWebサイトを構築する技術「Ajax」への注目が高まっていた2009年に登場したライブラリです。さまざまなメニュー、カレンダーやカラーピッカー、タブ、リッチテキストエディタなどのコンポーネントが揃っているだけでなく、DOM操作やイベントハンドリング、テスト用ライブラリやJavaScript圧縮ツールなど、幅広くJavaScriptを強化するための機能を備えています。 しかしその後登場したjQueryなどのさまざまなライブラリやツールに人気を奪われ、ここ数年はYUIへの注目度も低下。コミュニティからのリクエストも少数になり、多くのモジュー
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方
連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - google/material-design-icons: Material Design icons by Google (Material Symbols)