nakagawのブックマーク - はてなブックマーク

昨今のCSS設計事情からみるCSS設計のあり方とは

本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです

nakagaw 2015/04/16

BEM

リンク

Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう

Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう泉水翔吾この記事は、連載「基礎からわかる Web Components 徹底解説〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。 Web Componentsをより柔軟に、そして強力にするライブラリ Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。 Welcome

nakagaw 2015/03/09

WebComponents

リンク

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド）この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

nakagaw 2015/03/06

CSS

リンク

Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し