論理プロパティを使いこなす | 第1回 物理的、論理的とは大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。
ライブラリなしで実装する定番UI | 第9回 カルーセルUI：要件決定とアニメーション動作の作成
ライブラリなしで実装する定番UI 第9回 カルーセルUI：要件決定とアニメーション動作の作成 ECサイトやコーポレートサイトでよく見かける、カルーセルUIの実装を解説していきます。ライブラリやプラグインは数多くありますが、基本的な作り方を学ぶことでさまざまな要件に対応できるようになりましょう。 カルーセルUIについて カルーセルUIは、ウェブサイトを巡っているとかなりの頻度で見かけるものではないでしょうか。特に、ECサイトやコーポレートサイトでは、タブUIと並んでよく使われている印象があります。そのUIの呼び方も多様ですが*、このシリーズでは「カルーセルUI」として扱います。 *注：カルーセルUIの呼び方 カルーセルUIのその他の呼び方としては、単に「スライダー」、特に画像のものについては「イメージスライダー」などがあります。アニメーションによっては「クロスフェードのギャラリー」のような呼
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回 Grid Layout Moduleの概要
これからのグリッドレイアウト 第1回 Grid Layout Moduleの概要 まずはdisplay:grid;を核とするGrid Layout Moduleがどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。 はじめに 筆者とdisplay:grid;の出会いは、この記事が書かれる4年前の2012年3月頃になります。2011年6月末にIE10PP（Platform Preview）が登場した時に、IE10PPがプリフィックス付きでdisplay:-ms-grid;を実装していました。 いろいろとCSSに関する調べ物をしていた際に、「IE10PPではGrid Layout Moduleが使えるらしい。」ということで、display:-ms-grid;を使ったサンプルを作り遊んでいました。 グリッド・カラムレイア
WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識
WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識 Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。 はじめに 情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。 あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニア、フロントエンド・エンジニアだったとしても、HTMLとSVGの追加仕様であるWAI-ARIA（ウェイ・アリア）を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てるこ
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までは利用することがで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
