フェンリルのプロダクトSleipnir タブの切り替えさえも1フリックで片付く。 最速タブのモバイルブラウザ。 東海旅客鉄道株式会社EX アプリ 新幹線の指定席予約、変更等が行える 「エクスプレス予約」「スマート EX」の公式アプリ フェンリルのプロダクトNILTO 磨き込まれたインターフェースで、 チームの理想を実現するヘッドレスCMS。 フェンリルのプロダクトBrushup イラスト・写真・動画などのレビューを効率化。 高速コミュニケーションツール。 株式会社大丸松坂屋百貨店 株式会社JFR情報センター大丸・松坂屋アプリ 全国14店舗の「大丸」「松坂屋」の 便利でお得なアプリ。 日本放送協会NHK ニュース・防災 ニュースや災害情報、防災に役立つ 情報などをいち早く届ける、NHKの公式アプリ。 九州旅客鉄道株式会社 JR九州コンサルタンツ株式会社トンネル検査支援アプリ トンネル検査の省

第5回　CakePHPで作るToDoアプリ（1）｜gihyo.jp … 技術評論社 を参考にCakaPHPでアプリを作ってみましたが、古い記事だったので結構はまりました。 対応した内容をメモしておきます。 ・環境 Ubuntu11.04-server, Apache2.2.17, PHP5.3.5 ・app/tmpディレクトリの権限エラーが出たので、権限を追加しました。 $ chmod -R 777 app/tmp ・以下の警告が出たので、core.phpのSecurity.salt, Security.cipherSeedを変更しました。 app/config/core.php Notice (1024): Please change the value of 'Security.salt' in app/config/core.php to a salt value specific

Mac OS X Snow Leopard のユーザー別サイトにCakePHPをインストールする方法をメモしておきます。 ダウンロード CakePHP からダウンロードしてきます。今回は1.2を使います。 ダウンロードしたファイルを解凍して、ユーザー別のサイトフォルダに放り込みます。 フォルダ名を「cake」に変更します。 httpd.conf を編集 ターミナルを開き、httpd.confを編集します。 viで編集します。 sudo vi /private/etc/apache2/httpd.conf 下の箇所が # でコメントになっている場合は # を削除します。 無い場合は追加します。 LoadModule rewrite_module libexec/apache2/mod_rewrite.so 下記を追記します。 <Directory "/Users/xxxx/Sites/cak

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

ブラウザ上でのちょっとしたアニメーション、っていうと長い間 jQuery がそのデファクトの座にいたわけですが、モバイルだと重いし、各ブラウザの CSS3 実装も進んできたし、そろそろ CSS3 だよね！ というわけで、重い腰を上げて本気で CSS3 アニメーション書いてみました。いろいろ調べながら書いているので、ダメな所とか突っ込み歓迎です。 今回は連載の第 1 回目、"Cap" と題して、アイコンに蓋をかぶせてみたいと思います。 ※注意！ ページの下の方にループしているアニメーションがありますが、そのせいで長時間ページを開いたままにしていると、Chrome / Firefox 共に少しずつ重たくなってきます。特に Firefox の方が顕著です。 おそらく何らかのバグではないかと思うのですが、将来的に解消されるまでは、ページが重たくなったらタブを閉じて開きなおして下さい。リロードでも解

「できるポケット Web 制作必携 HTML&CSS 全事典 改訂 3 版」 3 度目の重版 （第 4 刷） が決定しました

【問題】 var i = 0; function jack(){ if( i == 10 ){ clearInterval( dummyInterval ); } console.log( i ); i++; } function myCounter(){ var dummyInterval = setInterval("jack()",1000); } $("#hoge").click( function(){ myCounter(); } を実行し、クリックすると、 ご丁寧に1000ミリ秒ごとに Uncaught ReferenceError: jack is not defined と伝えてくれる。 【解決】 var dummyInterval = setInterval("jack()",1000); を var dummyInterval = setInterval( jack

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

javascriptの「this」は「4種類」？？ この記事ではベースとなる４種類の「this」を紹介します。 実際は４種類ではないのですが、 このベースの４種類を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン ここで重要なのは「呼び出し元」をみることです。 なぜなら「呼び出し元」に「this」は左右されるからです。 メソッド呼び出しパターン これはもう一番直感的にわかりやすいです。 説明はいらないんじゃないかという感じなのですが、 一応ソースを。。 //メソッド呼び出しパターン var myObject = { value: 10, show: function() { console.log(this.value); } } myObj

JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。 メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf() 関数でアクセスすることができます。これは、標準

JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(

黙々とモックアップを作るの図（約10分）。 no sound.

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

Dmail Extension

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

自分が制作したゲームを人に見せたくなったときは「9leap」に投稿してみましょう。ここはenchant.jsで作成したゲームを自由に投稿できるサイトで、みんなでスコアを競い合ったり、共有したりしていて楽しめます。 なお、同サイトはコンテストサイトとしての一面も持ち、自信がついてきたら応募してみると自分のゲームを広める大きなチャンスになるかもしれません。初めの一歩から公開まで、一貫して環境が用意されていることでプログラミング初心者に陥りがちな「始められない」「見てもらえない」を防ぎ、純粋にゲーム制作を楽しめるでしょう。 【5】enchant.js本体の容量は64Kbytesと、ゲーム用ライブラリにしては容量が少ない enchant.js本体の容量は、他のJavaScript製ゲームエンジンに比べると抑えられており、通信環境が乏しいモバイル環境でも使いやすいものとなっています。本体が軽量な分、

iphone,ipad,android用のHTML5アプリを開発していて、androidのタッチイベントの挙動が（mobile safariと比べて）おかしいなと思うことがあります。w3c Touch Eventsでの策定でも、細かなところまでは決められないだろうし、守られるものでもないだろうとは思うが、出来る限り統一されることを望みます。 W3C Touch Events version 2 機種・バージョンの差異に加えて、様々なブラウザが登場しているので、ネイティブアプリにせよ、HTML5アプリにせよ、ますます開発と試験が混沌としてきたと感じます。 手元のSonyTableS(android4.0.3)では、コンテンツをscalableに設定した場合、touchmoveイベントが取得できません。viewportにてuser-scalable=noとすると正しく取得できるようになります。

ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する

compass-retina-sprites.scss `\*1wU ��11wU $sprites: sprite-map("sprites/*.png"); $sprites-retina: sprite-map("sprites-retina/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-position: sprite-position($sprites, $name); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)); width: image-width(sprite-file($sprites

This domain may be for sale!

JavaScript : What is it really? AND Some new features in ES6

[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案

In this article, Jeremy Girard will detail the process he and his team took when they were redesigning their company’s website. including some of the changes they made along the way, as they worked to build a better responsive website. Earlier this year, I was in the beginning stages of a redesign for our company’s website. We had already been planning to use a straightforward responsive approach

Web design isn’t what it used to be. Web design used to be a fixed process. Except for some browser quirks here and there, and for the regular lockdown of creativity of course, it was a fairly straightforward operation. It used to be the defining of a canvas and as long as we kept the design within the 960 horizontal pixels of a grid, everything would be safe and sound. That was during the time wh

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')

This resource includes 99 hand drawn icons that have been converted to a webfont for use in your online applications. Simply load the font and use letters in place of icon .png files. Using font icons is a great step to make your website retina ready. Nathan Brown Nathan Brown is an artist/designer from Austin Texas. He specializes in web design, poster design, and album cover art -- and has a par

Freebies 10 Super Useful Free Icon Font Sets Henry JonesFebruary 26, 20135 Comments04.4k Icon fonts are great because, as you may have guessed, they are delivered as a font. This gives them a number of advantages over traditional image icons. For instance, if you want to change the color, it can easily be done with CSS. Whereas with an image, you would need to have a separate version of the icon.

9 Comments These designs are definitely pretty cool. Grey, white and black aren’t the most striking, but when done right, they can have a great impact on your audience. I personally opt for more colorful and modern looks, though, because a wider audience will be attracted! Really inspiring collection of grey color usage within web design. Personally “Aria” is the favorite one. Thanks for sharing !

JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での

Index 開発の基本 逆引きリファレンス 注意事項 enchant.js の基本的なテンプレート 基本(描画) Scene を作る/消すには 画像を出すには 文字を出すには 音をならすには 基本(制御) 素材を読み込むには フレーム処理をするには タッチ(クリック)を処理するには マップ マップとは マップを作るには マップ上に障害物があるか判定するには スプライト スプライトを移動するには スプライトを回転/拡大縮小するには スプライトを透明にするには スプライトにCanvasを使うには スプライトで衝突判定を行うには 文字(ラベル) 文字色・フォントを変えるには 文字を移動するには 文字を透明にするには その他 シーンの背景色を変えるには ゲームのfpsを変えるには ゲーム画面の倍率を変えるには ロード時に表示されるシーンを変えるには 素材のプリロードを行うには 開発の基本 ench

前回の「カスタマイズ自由・軽量なエディタ「Sublime Text 2」」に引き続き、今回は導入して便利だったパッケージとショートカットです。 １．導入して便利だったパッケージ

css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 transitionアニメーション https://www.webcyou.com/?p=1937 これらをJavascriptと連携させることによって様々な表現をすることが可能になってきます。 その際、良く利用するのが、webkitAnimationEndとwebkitTransitionEndのイベントとなっております。 webkitAnimationEndとwebkitTransitionEndは、それぞれアニメーションとトランジションが終わった時に起きるイベントで 以下の様にして取得することができます。 elemen

enchant.jsとは―― 2Dゲームに特化したHTML5＋JavaScriptライブラリ 「enchant.js」とは、ユビキタスエンターテインメント（UEI）が2011年4月にリリースした、HTML5＋JavaScriptベースのゲームエンジンです。enchant.jsはオープンソースでGitHubでソースコードを公開しています。ライセンスは、MITライセンス／GPL2のデュアルライセンスです。もともとはプログラミング学習を目的として開発されましたが、現在では世界中で多く利用されているHTML5向けゲームエンジンとなりました（2012年6月UEI調べ）。 実際に活用された事例としては、サントリータウンの会員コンテンツであるFlashミニゲームが、enchant.jsを用いてHTML＋JavaScriptに組み直されました。これはiPhoneなどのFlash非対応端末からでも楽しめるよ

今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン

タッチデバイスのUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう。 前編のタッチUXを実現する7つのポイントでは、タッチデバイスの特徴と、その上でタッチUXを実現する7つのポイントについて説明しました。後編では、そのようなUXを実現するためにWebアプリでのタッチ仕様や、実装のポイント、今後の動向など、より技術的な面から解説します。 W3Cによるタッチイベントの標準化 Webアプリケーション向けのタッチイベント仕様はW3Cによって標準化が進められていて、執筆時（2012/10/20 現在）の段階で、勧告候補となっています（最新のものはW3Cの明示する「Touch Events version 1」を確認してください）。まだ仕様は確定していませんが、最新のiOS、Androidのブラウザでほぼ仕様通りのものが使用できます。タッ

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 (function(){ if(typeof jQuery == 'undefined')return; jQuery.noConflict(); jQuery(function($){ //対象の要素を取得 var twObj = $('#obj'); twObj.text('クリック'); twObj.click(function(){ twObj.text('クリック'); //クリックしたら実行 init(); }); //要素をわかりやすくCSS適応 twObj.css({ 'position':

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 2012年6月にサービスを開始したスマートフォン向けソーシャルゲーム　ULTIMATE RACERアルティメットレーサー）でデベロッパーをしている横田と申します。ULTIMATE RACERの開発時に、画面内のアニメーションをjQueryのanimate処理からcssアニメーションに切り替えた経緯について、自分なりの考察ともにご紹介したいと思います 対象としてはデザイナー、マークアップエンジニアでJSやcssでアニメーションの実装を始めたばかりの方が最適だと思います。 また本稿はjQueryのバージョン1.7.1を使用した場合を想定して記述しています

JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ

関係をビジュアル化するjqueryライブラリ Arborを試してみました。 Arborはこちらから入手できます。 https://github.com/samizdatco/arbor サンプルデータは市区町村のつながりをマップ化するSpNeNeプロジェクトのデータを利用しました。 http://spnene.antlabo.jp/spnene_project/view/sitemtop_W27B3.html 結果はこちら http://spnene.antlabo.jp/spnene_project/view2/index.html 都道府県単位にマップ化させています。 （全国版の大量のノード一気にマップ化させるとさすがに固まりました） 隣の県の市区町村が見えないのは既知の問題なので気にしないで下さい。 Arborを使ってみた感想としては ＜いいところ＞ ・わりと軽量 ・データの扱いがj

ガリレオスコープ開発チームによる �最新Web動向、技術メモ ( Ruby, Rails, node.js ) です 起こったバグ Android4の標準ブラウザにて、構築したサイトを開いたら、なんとリダイレクトの無限ループ。 設定内容backbone.jsのrouterを使用して、開かれたURLによって、実行するjsを切り替えていた。 原因Android2系までは対応していたのに、３系以降対応しなくなったらしい。 http://d.hatena.ne.jp/zentoo/touch/20111130/1322667152 ちなみにこのサイト(http://fmbip.com/)で対応しているかどうかチェックできる。 で、backboneではpushStateに対応していないと、URLのパス部分をfragmentとして、 hashタグに変換して、リダイレクトする仕様になっているが、 そのあ

先日、「A Dao of Web Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。この「A Dao of Web Design」には、ウェブ制作の歴史と未来が記されています。当時は存在すらしなかった「レスポンシブWebデザイン」やウェブの基本理念である「One Web」にも通じる内容です。 この記事が書かれてから12年以上たっていますが、日本のウェブ制作を次のステップに進めるためにも、「ウェブの哲学書」とも言えるこの「A Dao of Web Design」が、いま一度、日本で見直される必要があると感じています。 いったいどんな記事？ 「A Dao of Web Design」は、オーストラリア出身のJohn Allsopp氏が書いた記事で、2000年4月7日にA List Apartに掲載されたものです。John Allsopp氏は、早くからウ

今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

Multi-touch web development Stay organized with collections Save and categorize content based on your preferences. Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these eve

どうにもなりませんので、本当にどうにかしたい時には最後のJSでどうにかする方法が良いと思います。 思い切ってガラケーユーザーからAndoridユーザーになってはや2ヶ月くらい。 Andoridは一刻も早く爆発したら良いと思います。 スマホサイトのナビゲーションって概ね行全体がタップ出来るっぽくなってますよね。 概ねっていうとアレですが、概ねサイト内にはありますよね、こういう雰囲気の。 この場合、「New」とか「Sold Out」とかのアイコンもリンクテキストと一緒にa要素で包むような感じになると思いますが、そうするとAndroidではタップハイライトカラーがおかしなことになります。 本当は行全体に付いてほしい所ですが、リンクテキストにしか付かなくなってしまうような感じです。 サンプル1 ちなみにアイコンに指定している背景を取ると期待通りの結果になります。 アイコンをデバイステキストとCSS

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ &nbsp;を&emsp;に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

僕はiPhoneとかiPadとかmacみたいな流行りものを使用すると蕁麻疹が全身に出てさらに左腕が疼きだすという特異体質(別名：天邪鬼)のため、これまであまりjQueryは使ったことがなかったです。特異体質によるものもあったのですが、僕みたいなグズがjQueryのような便利なものに手を出したら、面倒なコードを書くにもjQuery頼りになって自分でコードを書く努力を怠る習慣が身についてしまうのでは、という懸念があったためです。最近になってようやく、本当に多少ではありますが独力である程度の処理は書けるし読めるようにもなったので、効率化のためにもjQueryをもっと使っていこうという気になったわけであります。 で、そうなるとやはりjQueryが提供する便利関数では全然足りなくて自分でプラグインを書きたくなるわけです。ちょうどjQueryの公式サイトにjQueryプラグインの作り方指南な記事(ht

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 スマートフォンを操作する際、タッチや、フリック等、色々な操作方法があります。 タッチはご存知のとおり、スマートフォンのディスプレイにタッチすることです。 フリックとは、画面にタッチし指やペン等をスライドされる動作となります。 このタッチやフリックを操作する際、JavaScriptで取得出来、扱えるイベントは以下の通りとなっています。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend これらのイベントを使い、操作していきましょう。 タッチされた場合のイベント まずは、タッチ出来るエリアの作成です。スマフォン用にviewportを設定します。 HTML <meta n

Ememo This is a tumblelog, kinda like a blog but with short-form, mixed-media posts with stuff I like. Scroll down a bit to start reading, or a bit more to read more about me. まぁ大したことはしていないのだけど。 * { -webkit-backface-visibility: hidden; }を追加しただけ。 Androidはレンダリング周りが弱く、CSSでアニメーションさせてもあまり綺麗には動きません。でもゲームのようなものだとやっぱり綺麗にアニメーションさせたい。でも・・というジレンマ。 そこで今回の手法を使うと、レンダリング周りが改善されるかもしれない、というメモ。 この方法は、どこかのバグリストで書いてあ

Explore Free Stock Photos Find the best royalty free photos and pictures for your design, with thousands of new images added every day. Download free photos of backgrounds, nature, business, food and more that are safe for commercial use.

HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】 HTML5の勉強を始める際に新要素の使い方などを勉強すると思いますが、その際にまず迷うのが「section要素」と「article要素」はどういうときに使うのだろか？使い分けはどういうようにするのか？という疑問にほとんどの人が行きつくとおもいます。 しかしこれはコンテンツの原稿によっても変わるものなので何もない段階で要素だけ見て「section要素」はこうする、「article要素」はこうするという絶対的なルールはありません。原稿内容によってセクション分けをする形になります。 逆にヘッダー部分に使う「header要素」、フッター部分に使う「footer要素」、主要ナビゲーションに使う「nav要素」要素などは使い方が明確でわかりやすいですよね。 仕様書やHTML5の書籍

Posted: 2011.12.13 / Category: HTML&CSS / Tag: LESS CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a:hove

今回は前回の使い方が変更になった要素の続きとして、HTML5になって新しく定義された新要素（タグ）も多くあります。その中からまずいままでのページ作成で使用している中で新しくなったタグをまとめていきます。video要素、audio要素など今までのプラグイン的な扱いの要素はいきなりでは難しいですし、ブラウザでの対応状況がまちまちで実際すぐにサイト制作に用いるということはまだあまりありませんので、まずは通常のページを作る際に使う要素をまとめてみたいと思います。 ただし、HTML5は仕様がまだ確定しておらず随時仕様変更などがありますので、現状は制作業務では無理に新要素を使わなければいけないということはありません。自分のサイトやブログなどで実験的に新要素で制作して変更があれば随時更新していくような形で勉強していく形がよいのではないかと思います。 今回はHTML5からの新要素をまとめていきますが、HT

ページの先頭です。 ヘッダコンテンツをとばして本文へジャンプします。 株式会社カプコンのWebサイトではスタイルシートとJavaScriptを使用しています。 ご使用中のブラウザでは、これらの機能が一時的に切になっているか対応しておりません。 スタイルシートとJavaScriptが適応された状態とは表示が異なりますが情報は閲覧していただけます。 お探しのファイルは存在しませんでした。 ・更新してもこの表示になる場合は、もう一度お探しのURLをご確認ください。 ・お探しのページは、削除されてしまったか、ネットワーク上の問題によりご覧頂けません。 ・このページをブックマーク登録されている方はお手数ですが変更をお願いいたします。 ・お探しのページがわからなくなってしまった場合は、下記より目的のページをお探しください。 ●コーポレートトップ ●ゲームトップ ●モバイル・アプリゲーム ●ショッピング

YouTube APIを使って動画を取得してみたのでそれの覚え書きです。PHPでの基本的な使い方はsimplexml関数を使用して取得したデータをforeach文で出力していきます。なんかパラメータとか色々あって頭が混乱してきたので整理してみました。といっても初歩的なことですが。 [ads_center] GETでリクエストしてデータを取得する まずは以下のURLを変数に代入します。 $feedURL = &quot;http://gdata.youtube.com/feeds/api/videos?vq=キーワード&quot; キーワードの部分は取得したい動画のキーワードを入れて下さい。もう少しパラメータを付け加えると色々と自分に合うデータを取得できます。例えば以下のようなパラメータを追加してみます。 $feedURL = &quot;http://gdata.youtube.com/f

Web サイト構築のためのトータルデザイン誌 Web Designing 2011年 12月号 に、jQuery × WordPress 活用事例ということで Croppy の作り方を掲載させて頂きました。 記事は2ページしかない関係でほんの一部の情報とソースしか掲載出来なかったため、こちらの記事で色々と補足させて頂きたいと思います。 ちなみに、この記事は WordPress Advent Calendar 2011 という「12月1日から12月25日のクリスマスまで一人一つずつ自分のブログにWordPressについて何かしら書いてくイベント」で昨日の @horike37 さんに続き、6番バッターとして執筆しています。 目次 なぜ WordPress で作ったのか 記事の追加はどうやっているのか 記事の削除はどうやっているのか Web Designing記事の補足 色彩分析などの情報はどう

こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた

We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる

enchant.js Developers Blog The Latest News on the HTML5 + JavaScript Game Engine enchant.js The enchant.js Developers Blog has been moved to a new domain. From now on, new information regarding the engine will be posted to the new site (link below). This site will no longer be updated. Thank you everyone for your support, and we’ll see you on the new site! New enchant.js Official Site & Blog: http

Inspired Design Resources for Creatives.Exclusive graphic, web and design assets club. Download free resources and get access to our Premium files from $9 a month

Sign up for a free IFTTT account to connect Google, Alexa, Twitter, Instagram, Fitbit, Slack, and hundreds more of your favorite apps and devices.

webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文

“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解！| UXデザイン基礎セミナー 第2回