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

  • スタイル自由でアクセシブルなHeadless UI | 第1回 Headless UIの特徴と利用準備

    スタイル自由でアクセシブルなHeadless UI 第1回 Headless UIの特徴と利用準備 自由に好きな方法でスタイルを当てることができ、なおかつアクセシブルなUIライブラリである、Headless UIを紹介します。まずはその特徴をつかんでみましょう。 はじめに この連載ではHeadless UIについて紹介します。 Headless UI – Unstyled, fully accessible UI components Headless UIというのは、OSSのUIライブラリです。CodeGridでも過去に紹介したTailwind CSSを開発しているTailwind Labsが中心となって開発しています。 Tailwind CSS Tailwind Labs Headless UIのトップページを見ると、Menu、Listbox、Switch、Disclosure、Dia

    スタイル自由でアクセシブルなHeadless UI | 第1回 Headless UIの特徴と利用準備
    kinushu
    kinushu 2023/01/03
  • 現場で使えるgulp入門 | 第1回 gulpとは何か

    現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か? 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp(ガルプ)について、導入から使い方など、基的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ

    現場で使えるgulp入門 | 第1回 gulpとは何か
    kinushu
    kinushu 2015/11/09
  • z-index再入門 | 第1回 z-indexの仕組み

    次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈(stacking contexts)、スタックレベル(stack level)という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造(文脈)のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整

    z-index再入門 | 第1回 z-indexの仕組み
    kinushu
    kinushu 2015/05/01
  • 1