MiniGrid -GitHub デモページ、アニメーションのデモ レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページ パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。

これからプログラミングを始めようと書籍やサイトで学習して挫折した方も多いと思います。そこで今回は、厳選したプログラミング学習サービス6選をご紹介させていただきます。 これからプログラミングを始めようと書籍やサイトで学習して挫折した方も多いのではないでしょうか。 挫折してしまった理由としては、学習教材に「少しづつでも継続できるものであること」と「達成感があること」が足りなかったからではないでしょうか。 そこで今回は、プログラミングを学習できるWebサービス18サイトを調査・実践し、3日坊主の私でも続いた「継続度」と「達成感」が高い厳選6サイトをご紹介させていただきます。 これからご紹介するWebサービスの評価につきましては、プログラミングを学習できるWebサービス18サイトを調査した中での相対的な評価となっておりますので、ぜひ参考にしてみてください。 本記事の対象者 業務でプログラミングの知

作成：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

Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io

今回は無料で使える便利なMacアプリを総まとめしてみました。使えそうなものがあれば是非チェックしてみてください。

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び

作成：2012/10/29 更新：2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記） Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました

猫を追いかける作業（どうすれば野良猫に逃げられずにナデナデできるのか？） 猫を追いかけ続けてもう何年になるだろう？ 僕はよく道で野良猫に遭遇する。そのたびナデナデしようと思って近づき、そして絶対に逃げられてきた。絶対、という点が重要だ。たまにナデナデできるとかじゃない。絶対に失敗してきた。僕の猫ナデリングの企ては１００％の確率で失敗してきた。いいかい？１００回やって１回成功したとかじゃない。１００％失敗してきたんだ。つまり、一度も成功したことがないんだ。 おそらくこれまでの僕の人生の中ですでに１万回は野良猫と遭遇したはずだ。地元の街で、地方で、旅先で。そしてそのたび、僕は近づき、猫は逃げた。猫は絶対に体を触らせてはくれなかった。 散歩をしていて曲がり角を曲がる。野良猫がマンションの花壇前に座り込んでいる。さあ猫追い開始だ。僕は彼女に気づかれない位置までスニーカーをにじらせて近づく。彼女を思

超おはようございます。梅雨の時期はジメジメしていて、湿気に弱い私の髪は元気がありません。城内です。 今回は、少し趣向を変えて、技術情報以外の情報を発信してみたいと思います。 はじめに クラウドファーストというキーワードもかなり浸透してきたようで、新規システムを検討する時はクラウドを使ってみたいと仰るユーザー企業が増えてきました。また、それに伴って、既存システムもクラウドへ移行されたいと仰るお客様も増え、弊社にもそのようなお問い合わせが多く届くようになっています。 そんな中、弊社はAmazon Web Services（以下、AWS）に特化し、最適なAWS利用をご提案してきているのですが、実は一般公開されている情報も、かなり有用な情報が多くなってきています。 今回は、そんな有用な情報たちを移行のアプローチに乗せてまとめてみようと思います。 有用な情報たち クラウドサービスとは まず、そもそも

ちと真面目にモダンAWSの勉強を始めるために、まずはコンパネに沢山あるAWSのサービスを整理してみたよ。 僕の価値観で、超重要なものに◎、そこそこ重要なものに◯、ひとまず忘れておいても大丈夫そうなものに分類しました。 主観的な判断なので、これ重要だろ！ってのがあったら教えて下さい！ Dev Ops Store Network 後回しでOK

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）

JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格

Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo

JSGraphsはデータ可視化の為のJSライブラリをまとめているWebサイトです。左カラムの各項目でライブラリをJquery依存のもの、無償利用可能なもの、SVGを使ったもの等に絞ることが可能です。SSにマウスホバーすれば該当のライブラリのプロジェクトサイト、ダウンロードページ、動作サンプルページへのリンクが表示される、というシンプルなもの。目的から探せて良いですね。 JSGraphs

“ツイッター埋め込み禁止”で再注目！ 『テトリス』や『パックマン』、『信長の野望2』…MS-DOSゲームが無料公開中 1990年代まではまだまだ現役で使われていた、マイクロソフトのオペレーションシステム「MS-DOS」――。今やコマンド入力をしたことがない人のほうが多いだろうが、この時代に数々の名作ゲームがMS-DOSで作られていたことも事実だ。そして今、かつて人気を博したMS-DODゲームがネット上で静かに甦っている。 ■レトロゲームの宝庫「MS-DOS Games」 1996年に創設された非営利団体の「インターネット・アーカイブ」に昨年あたりから1970～90年代のレトロなアーケードビデオゲームや「Atari2600」など、家庭用のゲームが公開されてレトロゲームファンから注目を集めていたが、年明け早々に2400タイトルものMS-DOSのゲームが公開されたことが報道され、一部のゲーム好き