GitHub - OfficeDev/office-ui-fabric-core: The front-end CSS framework for building experiences for Office and Microsoft 365.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
HTML5+Canvasで学ぶ物理アニメーションの基礎
HTML5+Canvasで学ぶ物理アニメーションの基礎 HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 投稿日2015年07月28日 更新日2019年04月13日 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy; //Y速
How to Make a Smartphone Controlled 3D Web Game | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on! In this tutorial I’ll explain an approach on how to connect your smartphone to a 3D web game. We’ll be making a car w
HTMLとJavaScript、CSSだけで作ろう！Firefox OSアプリ
HTMLとJavaScript、CSSだけで作ろう！Firefox OSアプリ 清水智公（Mozilla） こんにちは、清水です。先日のHTML5 ConferenceでFirefox OS上で動作するアプリの開発と、Firefox Marketplaceの公開に関する講演をさせていただきました。今回はその講演内容のうち、アプリ作成に関する部分を重点的に説明します。 すべてWeb技術で Firefox OSの特徴は、ユーザの目にする部分は全てHTML5で実装されている点にあります。音楽アプリ、カメラ、ギャラリーといったプリインストールされているものはもちろん、ダイヤラーや、SMS、スマホのロックスクリーンや、ホーム画面といったシステムよりのアプリもすべてHTMLとJavaScript、CSSだけで実装されています。 Firefoxをインストールして、開発スタート Firefox OSのアプ
Brunch | ultra-fast HTML5 build tool
var app, base, concat, directory, gulp, gutil, hostname, path, refresh, sass, uglify, del, connect, autoprefixer, babel; var autoPrefixBrowserList = ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']; gulp = require('gulp'); gutil = require('gulp-util'); concat = require('gulp-concat'); uglify = require('gulp-uglify'); sass = require('gulp-sass'); connect = require(
Foundation CheatSheet
Primary #2ba6cb Secondary #e9e9e9 Alert #f04124 Success #43ac6a Body Font #222222 Header Font #222222 @media only screen { } @media only screen and (max-width: 40em) { } @media only screen and (min-width: 40.063em) { } @media only screen and (min-width: 90.063em) { } @media only screen and (min-width: 90.063em) and (max-width: 120em) { } @media only screen and (min-width: 40.063em) and (max-width:
Building HTML5 Form Validation Bubble Replacements
I've written and spoken about HTML5 form validation over the last few years, and one of the most common questions I get is about bubbles. By bubbles I mean the UI controls browsers display validation errors in. Below you can see Chrome's, Firefox's, and IE's implementations: For whatever reason, we developers (or more likely our designer colleagues) have a deep-seated desire to style these things.
スマホ用のSingle Page Applicationサイトを作る上での問題点と対応 - Qiita
はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 前回はSinglePageApplicationにおける問題点と対応として全般的なSPAの問題を書きましたが、今回はスマホに特化したスマホサイトをSPAで構築するにあたって気づいた問題点とその対応方法を共有したいと思います。 画面遷移に思いのほか時間がかかる！ SPAで構築しているのに、次の画面の遷移が思っているより遅い感じがします。 サーバにアクセスしていないハズなのに。。 原因 clickイベントの発動にスマホの場合は時間がかかるためです。 スマホの場合はタッチがリンクを押したいのか、それともスクロールしたいだけなのかを判定するために一定時間経過しないとクリックと判定しません。 が、その判定時間がかなり長いものと思われます。
Web制作者はブックマーク必須！LIGブログ記事を知りたい分野別にまとめてみました。
日本のみなさん、こんにちはぁ！LIGサイトを教科書代わりに使っています、ライターの、のび太です。 今回は、これまでLIGで公開された記事をWeb制作者が見たいもの、学びたい分野別にまとめてみました。ぜひブックマークしておいて、時間があるときに見ておいてくださいね。特にWeb制作者の方は必見だと思います。めっちゃ勉強になること間違いなしっす！ LIGブログ 知りたい分野別リンク集 Sass、Compassを学びたい人 CSSの常識が変わる！「Compass」、基礎から応用まで！ これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) 目指せSassマスター！デザイナーがすぐ実践出来る基本テクニック12連発 Compassの設定ファイル「config.rb」の編集方法 Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた Sass
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
input[type=file]で投稿画像を即時表示する際のメモ - Qiita
input[type=file]使って投稿画像を表示する時、 大抵の場合はFileReaderオブジェクトのreadAsDataURLメソッドを使うサンプルをよく見かけるけど、 Android4.0だと動作が不安定だった。 $(function(){ var $input = $('#js-input'), $result = $('#js-result'); $input.on('change', function(e){ var file = e.target.files[0]; if (!file) { return; }; var filereader = new FileReader(); filereader.onload = function(e){ var url = e.target.result, $img = $('<img>').on('load error', f
![input[type=file]で投稿画像を即時表示する際のメモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84ad770e90926d6b2d02a209513b70d0d75f54bd/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9aW5wdXQlNUJ0eXBlJTNEZmlsZSU1RCVFMyU4MSVBNyVFNiU4QSU5NSVFNyVBOCVCRiVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MiU5MiVFNSU4RCVCMyVFNiU5OSU4MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5OSVFMyU4MiU4QiVFOSU5QSU5QiVFMyU4MSVBRSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTcyN2JmODA5NWFkZTEyMjEyODdmMDJhMDgxNjA2ZWE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwRmlOR0FIT0xpQyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjJkOTVlMDM0NDUyYjNjYWZmMzI1YjYzOTBiNGMyNDM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dde4f00a8b480839bb02e0819ea064523)
[HTML5] Drag & Drop API おさらい | DevelopersIO
こんにちは。クラスメソッドの稲毛です。 2014 年の正式勧告へ向けて策定が進められている HTML5 ですが、既に Web 開発では定番となっています。今回は、HTML5 で追加された API の内のひとつである Drag & Drop API について、正式勧告前におさらいをして内容をまとめてみたいと思います。 概要 開発者が Web アプリケーションへ Drag & Drop 機能を実装する際に必要な事柄は下記の通りです。 Drag Target を指定する。 Drag & Drop 関連イベントを適切に処理する。 この二点さえ押さえれば Drag & Drop を実現することができます。しかし 2 番目の「イベントを適切に処理」という点が意外に複雑なので注意が必要です。（この点については詳細記事にて触れます。） 二種類の Drag & Drop Web アプリケーションでの Dra
![[HTML5] Drag & Drop API おさらい | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
Examining Responsive Navigation: Off Canvas Patterns | Envato Tuts+
In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding! To recap, the first in this series focused on patterns where the navigation remained in the header. The second looked to patterns that moved the navigation to the footer. The third
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Safari on iOS 7 and HTML5－firt.dev
Problems, changes and new APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 12 years ago (18 Sep 2013) About 18 min reading time #ios #html5 #webview #homescreen webapps Apple has rolled out iOS 7 with iPhone 5S and iPhone 5C . As expected, Apple has published just 10% of the necessary information for web developers, and I can say without fear of mistake that this is the buggies
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The best tools for web development | Web Code Tools
Brackets - Web デザインを認識する最新のオープンソースコードエディター
Creating Friendlier, “Conversational” Web Forms | Envato Tuts+
HTML5特集 の記事一覧 | DevelopersIO
