SVGファイルの最適化 | CodeGridSVGOMGを使った、SVGファイルの最適化を紹介します。また、SVGのコードを知ることで、手動で軽量化するポイントも解説します。
touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
.on()と.off()を使いこなす 1 | CodeGrid
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
賢く使うBrowserify | 第1回 Browserifyとは
賢く使うBrowserify 第1回 Browserifyとは Browserifyを使うと、Node.jsのモジュールシステムをブラウザでも利用できるようになります。第1回目はBrowserifyがどのようにモジュールの依存を解決するのか、その方法と仕組みを解説します。 はじめに Browserify（ブラウザリファイ）はsubstack氏によって作られたNode.js製のツールです。 このツールはNode.jsのコアモジュールやnpmのモジュールをブラウザでも利用できるようにするというのが元々の目的でしたが、モジュール間の依存解決やファイルの結合を行うためのビルドツールとして使われることが多くなってきているようです。 本シリーズでは、Browserifyを使ったJavaScriptのモジュール管理について解説します。 JavaScriptでの依存関係の解決 まずは、なぜこのようなツール
こわくないAjax | 第1回 HTTPの仕組み
こわくないAjax 第1回 HTTPの仕組み Ajaxの仕組みを理解するためには、HTTPの理解が必要になります。ブラウザとサーバーとの間でどのような通信が行われているかをイメージできるように、今回はまずHTTPの仕組みを解説していきます。 はじめに Ajaxとは、Asynchronous JavaScript + XMLの略称で、JavaScriptを使って非同期*でサーバーとやり取りをする通信のことです。 *補足：非同期とは のちほど『同期と非同期』の項にて解説しますので、いまはわからなくても大丈夫です。まずは順を追って読み進めてください。 これまでHTMLとCSSだけを扱ってきたデザイナーやマークアップ・エンジニアが、jQueryを使った動きのあるUIを実装できるようになってきたころ、次のレベルに進む前に立ちはだかってくるのが『Ajaxの壁』ではないでしょうか。 このような人がAja
display: tableの活用 | 第1回 フレキシブルな段組みレイアウト
display: tableの活用 第1回 フレキシブルな段組みレイアウト 2014年4月にWindows XPのサポートが終了し、業務で対応すべきブラウザがIE8もしくは、IE9以上に変化してきます。この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。 はじめに 2014年4月9日にWindows XPのライフサイクルが終了し、普段の仕事でサポートをしなくてはいけないとされるブラウザは多くの場合、IE8以上、あるいはIE9以上へと前進したことでしょう。これにより、レイアウトの手法は大きく変わることになります。 本稿では、display: tableの挙動を解説し、あなたのCSSレイアウトテクニックを向上させることを目指します。 IE8はCSS2.1をフルサポートしています。CSS2.1の仕様内には、displayの値にtableがありますが、IE7までは利用することがで
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
HTMLでダイアログを表現する | 前編 dialog要素の基本
HTMLでダイアログを表現する 前編 dialog要素の基本 Webページで表示されるダイアログを、HTMLで簡単に表現できるようになるdialog要素。今回は基本的な使い方からフォームとの連携、showModal()の使用を学びます。 はじめに Web制作では、window.alert()やwindow.prompt()を使用したダイアログであったり、HTMLやCSS、そしてJavaScriptを用いて表示するダイアログを頻繁に扱います。そういったダイアログをHTMLで簡単に表現できるようになるのが、dialog要素です。 HTML 5.1 Nightly W3C Editor's Draft 23 March 2015 dialog要素はHTML5.1で導入が検討されている、ページの中でダイアログ機能を使えるようにする要素です。dialog要素はJavaScriptで使用するwindo
デザイナーの道具箱 | 第1回 Font Awesomeの概要
デザイナーの道具箱 第1回 Font Awesomeの概要 この記事では、さまざなアイコンをフォントファイル形式にまとめたFont Awesomeを紹介します。多端末対応、Webパフォーマンス向上に、アドバンテージを持つ技術です。 Font Awesomeとは Font Awesome*は、使い勝手のよいアイコンをフォントファイル形式にして公開しているアイコン集です。Webで使用する際は、CSSのclassで特定のフォント（アイコン）を指定し、それを元にフォントデータが表示されるという仕組みになっています。 *注：Font Awesomeの開発 Font Awesomeの開発はGitHub上で行われています。米ツイッター社が提供しているUIフレームワーク「Bootstrap」のために作られているので、すでにご存じの方も多いかと思います。 SIL OFL 1.1のライセンスで公開されています
マークアップ・エンジニアのためのSVG入門 | 第1回 SVGコードの基本
マークアップ・エンジニアのためのSVG入門 第1回 SVGコードの基本 この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。 はじめに SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。 画像でありテキストである 「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。 ラスタ形式は特に拡大に弱く、拡大するとドットが目立つ。一方、ベクター形式は拡大しても画像の劣化はない。 SVGにはソースコードが存在し、これにより画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
