タグ

ブックマーク / www.codegrid.net (7)

  • おすすめライブラリつまみ食い | 第1回 Moment.js

    ISO 8601のパースにも対応 また、ISO 8601*という日時の形式があるのですが、IE8やiOS4、Android2.2などはこの日時の形式のパースに対応していません。ISO 8601は2012-10-20T15:30:50+09:00のような形式です。この文字列をDateの引数に指定してパースしようとすると、対応していないブラウザではInvalid DateやNaNとなってしまいます。 // Android2.2などでInvalid Dateとなる var d = new Date('2012-10-20T15:30:50+09:00'); *注:ISO 8601 ISO 8601は日時の表記に関する国際規格。最新は2004年版ISO 8601:2004です。 この形式が採用されていることは少なくなく、APIのデータがこの形式で返す場合などは、一度Dateオブジェクトに渡す前に置

    おすすめライブラリつまみ食い | 第1回 Moment.js
  • .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

    .on()と.off()を使いこなす 1 | CodeGrid
  • SMACSSによるCSSの設計 | 前編 ベースとレイアウト

    はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース:要素そのもののデフォルトスタイル レイアウト:ページをエリアごとに分割 モジュール:再利用可能なパーツ 状態(ステート):レイアウトやモジュールの特定の状態を示す テーマ:サイトのルック&フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS(日

    SMACSSによるCSSの設計 | 前編 ベースとレイアウト
  • CSSの設計 | 第1回 枠とモジュールで考える

    CSSの設計 第1回 枠とモジュールで考える このシリーズでは、なるべくメンテナンスしやすい、可読性の高いCSSを設計する考え方を解説します。第1回目は、現状のCSSの問題点と、枠とモジュールで設計する考え方を紹介します。(監修:フロントエンドエンジニア高津戸 壮) はじめに 初出 この文章は『CSS Nite LP, Disk 26「CSS Preprocessor Shootout」』で高津戸が行った講演「CSSの設計」を元に、テキストとして再構成しています。 CSSはとてもシンプル 今「CSSの設計」を改めて考えるのは、なぜでしょうか。CSSの基はとてもシンプルです。例えば、次のようにHTMLにクラスを付け、そのクラスに対してのスタイル指定をCSSで行うだけです。 <div class="box"> hoge </div> .box { color: red; } HTMLの要素

    CSSの設計 | 第1回 枠とモジュールで考える
  • Compassで簡単、CSSスプライト作成 | 第1回 CSSスプライト作成の基礎

    Compassで簡単、CSSスプライト作成 第1回 CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか? この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com

    Compassで簡単、CSSスプライト作成 | 第1回 CSSスプライト作成の基礎
  • アイコンフォント 自由自在 | 第1回 Webアプリの利用

    アイコンフォント 自由自在 第1回 Webアプリの利用 Web Fontsファイルにはアイコンなどのベクターデータを登録できます。Web FontsにするとCSSでの装飾などが簡単に行えます。記事では簡単なWebアプリを利用したファイル生成方法を紹介します。 はじめに このシリーズでは、任意のWeb Fontsのファイルを生成する方法を解説します。今回はエンジニアでない方にも、プロジェクトでの必要に応じて、手軽にアイコンセットを作成することができるようになることをゴールとします。また、gulpを用いた自動化についても、次回解説します。 アイコンフォントとは アイコンフォントはその使いやすさから、WebのUIには欠かせないものとなりました。アイコンフォントには、次のような特徴があります。 メリット 1つのファイルに複数のアイコンを格納できる ベクター画像の一種なので解像度を気にする必要がない

    アイコンフォント 自由自在 | 第1回 Webアプリの利用
  • BEMによるフロントエンドの設計 | 第1回 基本概念とルール

    BEMによるフロントエンドの設計 第1回 基概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLCSSを使うことでしか、Webサイトを作ることができませんが、HTMLCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような

    BEMによるフロントエンドの設計 | 第1回 基本概念とルール
  • 1