phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python
YAML から JSON に変換するツール作りました. Web 上で動きます! | phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python
phiary
上揃えにする方法 上揃えはデフォルトですね. 何もしなくても上揃えになります. 今回のサンプルでは他の CSS に合わせるためにあえて 下記のようなコードを追加しています. #box1 span { position: absolute; top: 0; } 中央揃えにする方法 まずは中央揃えにしたいテキストの親要素に position: relative; を適応します. .box { float: left; position: relative; margin: 10px; width: 25%; height: 90%; border: 1px solid black; background-color: white; font-size: 2rem; line-height: 2rem; } そして中央揃えにしたいテキストの position プロパティに absolute を設
phiary
Riot.js には yield という仕組みがあります. これを使いこなすことで定義済みのコンポーネントの一部を柔軟に拡張することができるようになります. 今回はこの yield について, デモや図を交えて解説したいと思います. そもそも Riot.js について知りたい方はまずこちらをどうぞ フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary Riot.js の yield とは？ yield は, Riot.js のコア機能の一つで子タグに親タグから部分的に HTML を差し込むことができます. この仕組みをうまく活用することで拡張性のある柔軟なタグ(コンポーネント)を定義することができます. yield を使ったデモ yield を使ったデモです. header の中身を外から指定したり, material
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
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
phina.js には, 要素に top, bottom, left, right というプロパティがあります. これを上手く活用することで簡単に要素を画面からはみ出ないよう制御することができます. Code デモの実装コードです. /* * runstant */ phina.globalize(); var SCREEN_WIDTH = 960; var SCREEN_HEIGHT = 640; var BALL_NUM = 64; phina.define('MainScene', { superClass: 'CanvasScene', init: function(options) { this.superInit(options); (BALL_NUM).times(function(i) { var elm = Ball().addChildTo(this); elm.x =
AngularJS tips - ng-options を使って select 要素に option 要素をぶら下げる方法 | phiary
配列からオプションを生成 item for item in Array という形で指定します. もっともシンプルなパターンです. <select ng-model="year" ng-options="year for year in years"></select> demo オブジェクトの配列からオプションを生成 item.keyname for item in Array という形で指定します. label と value は同じ値になります. <select ng-model="month" ng-options="month.ja for month in months"></select> demo オブジェクトの配列からオプションを生成(key, value 両方指定) as を使うことで label と value それぞれ別の値を指定できます. <select ng-mo
phiary
最近 WebView で包んだ iPhone/Android アプリってのを 仕事, プライベート問わずよく作ってたりします. 色々触った結果, 一旦 Onsen UI ってのに落ち着いたので, 備忘録がてら簡単に紹介したいと思います. Onsen UI とは？ OnsenUI とは, Web 上でアプリっぽい UI を表現できる JavaScript/CSS(主にCSS)フレームワークです. 驚くほど簡単にネイティブと見分けの付かない UI を Web 上で構築することができます. また, AngularJS をベースとしてるので, MVほにゃららな開発も手軽にできます. (個人的には AngularJS はあまり好みではないので無理やり Riot.js と組み合わせて開発してますがw) ちなみに名前の由来は, Onsen UI => 温泉 => SPA => Single Page A
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python phina.js とは？ phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです. プログラミング初心者でも始めやすく, それでいて上級者のハイレベルな要求にも 応えられる, 柔軟な設計と豊富な機能を備えています. 使い方はカンタン! あなたの HTML ファイルに <script> タグで phina.js を読み込むだけ でで導入でき, あとは公式サイトで提示しているサンプルコードをベースに, あなたがやりたいことを追加していくだけです. p
phiary
Introduction Onsen UI Tips です. 今回は, ユーティリティ系のネイティブアプリでよく見るタブバー. これを Web で実現する方法について紹介します. ons-tabbar ってやつを使えば簡単です♪ Runstant Demo とりあえずデモです. フッター部分にタブバーが表示されています. また, localStorage を使っているので画面を更新しても前回選択していたタブの位置が保持されているのがわかるかとおもいます. タブバーがあるだけで俄然アプリっぽくなりますね. Code html <body> <ons-page> <ons-tabbar> <ons-tab page='home.html' label='home' icon='ion-home' active='true'></ons-tab> <ons-tab page='comment.h
phiary
Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:
phiary
css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
