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の設計思想がコ
そこが知りたい、Flexbox | 第1回 仕様を知る 1
Flexible Box Layoutでカラムレイアウト たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。 過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。 *注：これまでに紹介した記事 「display: tableの活用：フレキシブルな段組みレイアウト」 「display: tableの活用：フィットする特性と均等配置」 「display: tableの活用：流し込む方向の制御」 「inline layoutを使いこなす：カラムレイアウト」 方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module（以下、Flexbox）に
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ページを開く
