つまみ食いが横行するCSSを正しく理解する――『はじめてのCSS設計』著者インタビュー
手軽で自由度の高いCSS、しかし、それゆえにチーム開発や中～大規模プロジェクトで思わぬ「事件」が起きるのもCSSです。翔泳社が3月13日に刊行した『はじめてのCSS設計』の著者の一人、田辺丈士（アイ・エム・ジェイ）さんは「CSSのつまみ食い」が横行していると危惧。CSSをきちんと設計するための本書についてうかがいました。 最初は大丈夫でものちのち大変なことになる ――『はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』は、CSSをかじったことがあってもゼロからは設計したことのない方のための解説書です。田辺さん始め著者陣の経験が詰め込まれた1冊だと思いますが、最初に田辺さんの経歴を教えてください。 田辺：僕は元々営業をやっていたんですが、Web 2.0と騒がれていたときに勉強し始め、海外でWebデザインの仕事をするようになりました。テーブルレイアウトだったも
CSSはメンテナブルこそ正義！ カオスになって破綻しないための『はじめてのCSS設計』
フロントエンドエンジニアだけでなくバックエンドエンジニア、Webデザイナーも触れるようになってきたCSSですが、その自由度の高さゆえにコードが肥大化して手をつけられなくなることもありえます。翔泳社では、そんなカオスを避け、整然とした保守・運用を実現するための『はじめてのCSS設計』を3月13日に刊行します。 『はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』は、CSSのコーディングで発生しがちな問題を事前に回避するための設計手法が学べる解説書です。 CSSは自由度が高く手軽に書くことができるため、つい思いつきで上書きや編集・修正を繰り返してしまうことがあるのではないでしょうか。その結果、思いもしないところでレイアウトが崩れたり、ファイルが肥大化してどこを編集すればいいのかわからなくなったりすることがあります。 本書はそんなカオスを避けるために、基本から実
デザインサンプルで学ぶCSSによるスタイリング～「テキスト（マルチカラム）」編
はじめに 前回の記事では、floatプロパティを使った段組みレイアウトを紹介しました。これは複数のボックスをfloatプロパティで横並びに配置し、段組みレイアウトを実現するものでした。今回紹介する方法は、CSS3のマルチカラムレイアウト（Multi-column Layout）機能を利用して、1つのボックス内に複数の段組みを生成するものです。floatレイアウトのように、段を区切るためのマークアップを追加したり、段の高さを意識したりする必要がなく、簡単に段組みレイアウトを実現できます。特にコンテンツの内容がどのくらいの分量になるのかわからない場合など、長い文章を段に流し込みたい時に大変便利です。 対象読者 （X）HTMLとCSSの基本を理解している方 デザインのコツを学びたい方 必要な環境 本連載で動作確認を行ったブラウザは次のとおりです。 Windows 7 Internet Explo
検証：レスポンシブのCSSはモバイル向けを先に書くと表示が早い？ | 初代編集長ブログ―安田英久
今日は、レスポンシブWebデザインでのスタイルシートを書く順番について。CSSを書く順番が、デバイスごとの表示速度に関係するのかを検証してみた話題です。 レスポンシブWebデザインでは、モバイル向けのCSSを先に書くほうが、モバイル端末で早く表示される 以前に、そんなことを耳にしました。「んー、どうなんだろう」と思ったので、実際に検証してみました。 仮説では、「ブラウザはDOM要素を構築してからレンダリングするだろうから、モバイル向けとPC向けでCSSを別にしてlink要素で読み込めば、たしかにそれも有り得る」でしたが、実際にはどうだったのでしょうか？ テスト用に、専用のスクリプトを用意しました。いろんなパターン（link要素とか、style要素とか、style要素で@importとか）のCSSを、head内・body上部・body下部に出力できるようにして、モバイル向けCSSを出力して数
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開 CSSはこれまで変数が使えなかったため、例えばページ内の複数箇所を同じ色で揃えようとしたときには、同じカラーコードをCSSの複数箇所に書き込む必要があり、色に変更があるたびにすべての箇所を確実に修正しなければなりませんでした。 CSS Variables Module Level 1は、CSSに変数を持ち込むことによって、変数の値を買い換えるだけで複数箇所のカラーコードが自動的に書き換わる、といったことを可能にします。 色のコードを簡単に使いまわせる 変数を記述するときには「data-変数名」と記述します。例えば変数名が「var」のときには、CSSファイル内で「data-var」と記述します。接頭辞が「data-」なのは、HTML5の「Custom Data Attribute」と
CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
Zen CodingでよりスマートにHTMLを書く | Zen Coding 3-4 | HTML+CSSコーディングが10倍速くなるZen Coding
同じタグをくり返し入力するZen Codingで複数の要素をグループ化するZen Codingでid属性を指定するZen Codingでclass属性を指定するZen Codingでid属性とclass属性を指定するZen Codingでid属性とclass属性を付与したdivタグで囲む同じタグをくり返し入力するHTMLタグで属性を指定したり、同じタグを続けて入力したりを手で入力していると、HTML文書が複雑になればなるほどコードも煩雑になり、思わぬうっかりミスもふえてしまいます。 Zen Codingを使ってくり返し指定をすれば、そのようなミスを防ぐことができます。 たとえば、表のデータのくり返しをZen Codingで指定して展開すると、表組みのHTMLが作成できます。 tableタグで表を作成するのはとても煩雑ですが、Zen Codingを使えばこのように、1行記述するだけで表組に必
Zen Codingの便利な機能 | Zen Coding 3-2 | HTML+CSSコーディングが10倍速くなるZen Coding
Zen Codingには、便利な機能がいろいろあります。 これらの便利な機能をタグ入力支援機能と組み合わせることで、快適な高速コーディングが実現できます。 コメントのオン・オフの切り替えHTML/CSSコーディングでは、ページやコードの中にブラウザーでは表示されないようにしてコメントを入れておきたいことがあります。その場合、HTMLでは「<!-- コメント部分 -->」、CSSでは「/* コメント部分 */」のように、それぞれタグで囲んだ範囲を非表示のコメントに指定する記述をします。 Zen Codingには、選択した範囲を非表示のコメントにしたり、逆に解除したりする機能があります。範囲を選択して［Toggle Comment］メニューを選択するか、＋＋キーを押す※と、コメントのオン・オフの切り替えがかんたんにできるようになっています。 ※秀丸エディタでは別マクロのインストールと設定が必要
Zen Codingの基本的な使い方 | Zen Coding 3-1 | HTML+CSSコーディングが10倍速くなるZen Coding
Zen Codingを使ってHTML/CSSコーディングするには、Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」（Abberiviation）といわれる略語を入力し、「展開」を実行（［Expand Abberiviation］メニューを選択、あるいは ＋キーを押す※）します。入力した省略形を「展開」（Expand）すると、統合開発環境のスニペット（統合開発環境から短いプログラムコードを呼び出す機能）のように、一連のコードが生成されるしくみになっています。 省略形を覚えるのはたいへんだと思うかもしれませんが、1章で述べたとおり、すべてを覚える必要はありません。自分がよく使うタグの省略形だけを覚えればじゅうぶんです。 また、Zen Codingの省略形は、HTMLの場合はHTMLタグの名前の、CSSの場合はスタイル指定のためのプロパティ名の頭文字などになっていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインサンプルで学ぶCSSによるスタイリング～「テーブル（セルのボーダーの表示形式によるスタイリング）」編
デザインサンプルで学ぶCSSによるスタイリング～「リスト」編
デザインサンプルで学ぶCSSによるスタイリング～「見出し」編
HTMLでよく使うタグをZen Codingで入力する | Zen Coding 3-3 | HTML+CSSコーディングが10倍速くなるZen Coding