それ、もうWeb標準APIでできるんです
みなさんも日々身にしみて感じていらっしゃるとは思いますが、Webの技術の変革の速度は目を見張るものがあります。数ヶ月前の常識が時代遅れになってしまうというネガティブな面もあれば、以前は困難だったものが今ではものすごく簡単に出来てしまうといったポジティブな側面もあります。 本記事で扱うのは後者で、以前はライブラリに頼って実装していたものが、最近ではWebのスタンダードなAPIで出来るようになったという例をいくつかご紹介したいと思います。 ユニークなIDの発行まずはUUIDの発行です。従来は uuid や nanoid をインストールして生成していましたが、 Web Crypto API がどの環境でも使えるようになり、簡単にユニークなIDを生成できるようになりました。 const uuid = crypto.randomUUID(); // => ex) '71b9eb20-39c4-48f
実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜
こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみるではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダルまずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="popover">シンプルモーダル表示</button> <div id="popove
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい
こんにちは森田です。 Sass(SCSS) でスタイリングする場合、弊社では必ず stylelint を使いコードの一貫性を保ちます。 弊社には長年継ぎ足しで使われた秘伝のルールがあるのですが、Stylelintは更新性が高く使えなくなるルールが出てきたりとまれにメンテナンスが必要になります。 なので、今後は基本的なルールと更新性は stylelint-config-sass-guidelines に任せて使っていこうと考えています。 インストール方法npm インストールインストールは npm から stylelint 本体、postcss、stylelint-config-sass-guidelines を dev-dependency にインストールします。 postcss も必要になるみたいなのでインストールしましょう。
2022年から使ってゆくCSS 〜疑似クラス :is() 〜
こんにちは、森田です。 2022年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし今年から新しいことを始めたいと思います。 今年はまず疑似クラス :is() を使っていきたいと思います。 疑似クラス :is() とは /* 今まで */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* 疑似クラス :is() を使うと */ :is(section, article, aside, nav) h1 { font-size: 25px; } :is() は、複数のセレクタを1つにまとめて指定できる疑似クラスです。 上記のように、今までカンマで子孫セレクタまで何度も書かなければいけなかったものを1つにスッキリした記述にすることができま
型安全な CSS Modules？「vanilla-extract」
はじめに絶賛、CSS Modules を使ったプロジェクトで作業している kimizuy です。最近、vanilla-extract という良さげな CSS フレームワークの 1.0.0 がリリースされたので、本記事では CSS modules と vanilla-extract を比較して、この新しいフレームワークの利点について書きたいと思います。 CSS Modules で作業するときの辛さCSS Modules はローカルスコープがデフォルトの CSS フレームワークです。CSS の名前衝突の問題を回避できて、これ自体はとても強力な機能です。 ただ問題なのは、作業する際に CSS ファイルでクラスネームを追加したり変えたりしてもコンポーネント側でエラーが出ないので気づけないこと、これに尽きます。 つまり、コンポーネント側でクラスネームが間違っていてもエラーが出ないため、実行するまでス
知ってると役立つかもしれない min-height の話
はじめに今さらですが min-height ですこしハマってしまったので、その経験から得た知見を共有します。 tldrコンテナに min-height を指定し、その内部のコンテンツ（つまり子要素）に height をパーセント指定してもコンテンツにはコンテナの高さが継承されません。 具体例コンテナ（青）を min-height: 300px、コンテンツ（黄）を height: 100% にしました。この場合、直感的にはコンテンツの高さも 300px になりそうですが、以下のようにコンテンツの高さ分しか確保できません。 これは、height が明示的に指定されておらず実際のコンテナは height: auto になっているため、コンテンツがコンテナから高さを取得できないのです。 結局 min-height って以下の引用では height や width が auto なら min-hei
CSSの治安を取り戻す – 最初の30分
Gaji-Labo では稼働中のウェブサービスやウェブアプリケーションの CSS の改善するお仕事をいただくことがちょいちょいあります。 その際「CSSのリファクタリングなんて請けてくれる会社聞いたことない」というような趣旨のお話をぽろっといただきます。（実際にはほかにもやってる会社さん沢山あると思いますが、たしかにあまり聞かないですね） 今回は初めて入るプロジェクトで CSS の改善をする際、最初に CSS のどこを見るかまとめてみました。 CSS の得意な方が参加していないチーム向けの軽い内容です。ここに上げているような箇所に思い当たりがある場合、少しずつ CSS の実装にストレスを感じはじめているかもしれません。 真っ先に見極めることプロジェクトに参加して CSS が見られるようになり、手元の開発環境も無事整ったとき、僕が最初に気にする点です。 CSS はこうなってると大変というポイ
マークアップをより良くするためにGaji-Laboがやっていること
こんにちはマークアップエンジニアの森田です。 今回は弊社メンバーが HTML マークアップをより良くするためにやっていることを紹介します。 昨今のマークアップはただ html を書くだけではなく、文書構造、アクセシビリティ、レンダリングの高速化、最適なクラスの命名（CSS設計）などなど配慮することが沢山あります。 また、React や Vue を使ったコンポーネント化が当たり前になっていきてる現在において、正しいマークアップはより重要なファクターだと考えています。 弊社ではマークアップの向上を常に考え、以下の様なことに取り組んでいます。 レビュー弊社は基本的にどの案件も PullRequest ベースで開発を行っており、レビューが必ずされます。 その際にマークアップについてもやり取りが活発にされています。 誰かの目が入ることでマークアップのより良い方法や変えるべき箇所など気付かされることが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gaji-Labo式、CSS の class 命名について