Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か
Atomic DesignとCSS設計 第1回 Atomic Designとは何か 「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。 はじめに Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。 Atomic Design by Brad Frost 著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。 Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコ
Babelの手ほどき | 前編 Babelとは
Babelの手ほどき 前編 Babelとは BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラです。Babelがどのような働きをするか解説します。 Babelとは 今回紹介するBabel（バベル）*は、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換（トランスパイル）します。 「次世代のJavaScriptの標準機能」というのはECMAScript（以降、ESと呼びます）のバージョン6や7で追加された（る）機能、そしてさらにその先の標準機能です。 *注：元々は6to5という名前 Babelはもともと6to5という名
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の考え方を役立てるこ
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
いまどきの配列操作 | 第1回 配列要素のすべてに処理を行う
いまどきの配列操作 第1回 配列要素のすべてに処理を行う これまでライブラリに頼ることが多かった配列操作も、IE9以降の主要ブラウザがECMAScript5をサポートした現在、ネイティブのJavaScriptの機能で多くに対応できます。この記事では配列要素のすべてに処理を行うメソッドを解説します。 はじめに 最近の制作案件ではマイクロソフトのIEのライフサイクルに合わせ、IE8をサポート対象外とするケースがほとんどを占めるようになってきました。 IE9以降のすべての主要ブラウザでは、ECMAScript5が標準実装されています。そのため、これまでjQueryやUnderscore.jsなどのライブラリを使って実装していたさまざまな機能が、ネイティブのJavaScriptでも苦労なく実装できるようになりました。 このシリーズでは、主にjQueryユーザー向けに、ES5の機能の中でも使う頻度の
これからのグリッドレイアウト | 第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;を使ったサンプルを作り遊んでいました。 グリッド・カラムレイア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブデザインにおけるテキストのコントロール | 前編 テキストの折り返しを制御する