phiary
最近, 仕事で CSS を使ってスマホの UI を再現してくれーという要望が多いので, その中でも中心となる リストアイテムのスタイリングについて備忘録がてらまとめました. Flexbox を上手く使うことでシンプルなものからアイコン付きや, 2カラム, 3カラムになってもキレイに配置されるようにスタイリングすることができます. デモはすべて Runstant で作ってあるので, fork して色を変えたり要素を増やしたりして遊んでみてください. ※ CSS には Less を使っています. 変換後の状態が見たい場合は下記のツールをお使いください. 『リアルタイムで LESS から CSS に変換する Web ツール作りました! | phiary』 Edit HTML <div class='list'> <a class='item', href=''> <div class='cont
phiary
前回に引続き Vue.js についてのエントリーです. Vue.js で簡単な Markdown エディタを作ってみました. 公式のサンプルをちょっとイジっただけですが... Runstant で作ってあるので実際に動かしたりコードを書き換えて試せます. Flow 1. Vue.js と marked.js を読み込む 必要なライブラリを読み込みます. Vue.js はコアとなるデータバインディングに, marked.js は markdown を html に変換するのに使います. それぞれ cdnjs から読み込んでいます. <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs
とりあえず試してみたいって方のための phina.js 入門 | phiary
phina.js Advent Calendar 2015 - Qiita 8日目のエントリーです. 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita 4日目 【phina.js】Gridクラスを使いこなそう - Qiita 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita 7日目 [phina.js] サンプルから覚えるphina.js - Qiita このブログでお馴染みの とりあえず試
phiary
前回書いた『JavaScript tips - Number に times メソッドを追加して Ruby ライクに使えるようにしよう | phiary』の発展です. Array.prototype.map 的な機能を Number.prototype に追加して, 様々な配列を楽に作る方法について紹介します. d3.js でグラフ作る際に, ダミーとなるランダムなデータを作る時とかに便利ですよ♪ map とは Array.prototype.map とは EcmaScript5 から追加されたメソッドです. 与えられた関数をすべての要素に対して実行し, その結果からなる配列を生成する便利なメソッドです. 使い方はこんな感じ. var a = [0, 1, 2, 3, 4]; var b = a.map(function(d) { return d*2; }); console.log(b
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Trigger 先々週ぐらいにこんなエントリーが流れてきました. http://alfalfalfa.com/articles/133066.html 2ch まとめで, 防衛装備庁のホームページが古臭すぎるという内容でした. どうせ誇張して楽しんでるだけなんだろうなと思い リンク先を見てみると...えっ...この時代にこれって... 開設日は 2015/10 と書いてある. 何度見ても 2015/10 です. つまり 2015年10月 に公開された ホームページだということです. ほぼ now です.
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Browser だと標準でグローバルに atob(), btoa() という関数が定義してあります. それぞれ文字列をbase64に, base64を文字列に変換してくれる便利なメソッドです. ですが, この関数は Node.js にはありません. 代わりに toString() が便利になっていて, encoding を指定できるようになっています. 自分は Browser 側の JavaScript に慣れ親しんでいる人なので, 今回はこの toString() を 使って Node.js 上で bt
phiary
css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci
phiary
昔はちょっとしたことをやりたいだけでも, JavaScript を使ったり HTML に 見た目のためだけに要素を追加したりしていました. CSS2, CSS3 以降からは色々なプロパティが追加されて劇的に表現の幅が広がり, Pure CSS でも様々なことがやれるようになりました. 今回はその中から ::before, ::after 擬似要素について紹介したいと思います. 使用例もいくつか並べてるのでよかったら参考にしてください. ::before, ::after 擬似要素とは？ そもそも擬似要素って何？って話ですよね. 擬似要素(Pseudo-elements)とは, マッチする要素に対して擬似的に要素を追加できる機能を指します. ::before, ::after 擬似要素は, マッチした要素の最初/最後の子要素を定義することができるセレクタです. 実は, この機能自体は CSS
phiary
Node.js 6連投. 第２弾! npm と Node.js 上で require を使ったモジュール読み込みの仕組みについてメモ Node.js 用に作った自作モジュール『merger』を npm で公開してみた <- いまここ Node.js 用の自作モジュールの作り方メモ Node.js 用に作った自作モジュールを npm に登録して公開する方法 JavaScript テストフレームワーク『Mocha』の使い方メモ JavaScript テストフレームワーク『Mocha』をブラウザ上で使う方法 Node.js 勉強がてら簡単なモジュールを作って npm に登録, 公開してみました. 名前は『merger』. 渡した複数のファイルをひとまとめにして出力するだけの簡単なモジュールです. Install npm に登録してあるので下記のコマンドで簡単にインストールできます. npm in
phiary
前回 nvm を使った Node.js, npm のインストール方法 について紹介しました. 今回は Node.js のパッケージ管理ツール npm の使い方と packcage.json の活用方法について紹介します. npm の使い方をマスターすれば, 自作の Node.js パッケージを 公開したり, Node.js を使ったプロジェクトをキレイに管理できます. ぜひ参考にしてください. npm ってなに? npm とは Node Package Manager の略で Node で 作られたパッケージモジュールを管理するためのツールです. 基本 Node.js をインストールすれば一緒にインストールされます. ターミナル or コマンドプロンプトで $npm -v を実行するとバージョンが表示されるのが分かるかと思います. Python でいう easy_install, もしくは
phiary
もうかれこれ６回ぐらい環境作る度に nvm インストールしてってことを やってるのでいい加減メモっておきます. nvm(Node Version Manager) を使って Node.js をインストール, バージョン管理する方法について紹介します. nvm ってなに？ nvm とは Node Version Manager の略で, 頻繁にバージョンアップしては関連するプログラムが 動かなくなってしまう Node.js を簡単にバージョン管理できるツールです. Github nvm のインストール方法 ターミナルを起動してコマンドでインストールします. 手順は下記の通り. 1. nvm をインストールする github.com から nvm を clone する $git clone https://github.com/creationix/nvm.git ~/.nvm 2. nvm
phiary
みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか? 意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ. 今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します. 以前書いたエントリー『CSS の border-style 一覧』で紹介した border-style に加え border-color や border-width を活用することで簡単に見出しを装飾することができます. 色々なパターンの見出しを作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです. また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください. シンプルな見出し シンプルな見出しです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
