Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS Tailwind CSS HTML パーシャル Alt

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

Notion対抗リアルタイムコラボツール「Microsoft Loop」、要素のコンポーネント化も [てっぱんアプリ！]

2023/08/11 8 users Microsoft Loop 要素 アプリ

続きを読む

新規機能はどんどんコンポーネント化　Vue.js + TypeScriptで開発してよかったこと・つらかったこと - ログミーTech

2020/11/25 148 users React TypeScript フロントエン Vue.js

株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエン... 続きを読む

next.js の amp モードで tailwind.css を purgecss と合わせて使う - mizchi.dev

2020/05/10 6 users Tailwind.css tailwind リポジトリ 前提

このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly ... 続きを読む

JavaScript: フレームワーク React/Vue/Angularについて - DEV Community ?‍??‍?

2019/07/09 357 users React angular フレームワーク ライブラリ 役割

フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの... 続きを読む

CSS Subclassing

2019/05/06 116 users CSS アプリケーション 実装 UI要素 上野

上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるような... 続きを読む

[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ | コリス

2019/03/05 34 users レスポンシ コリス クエリ コンポーネント コンテナクエリ

最近ではデザインもJavaScriptもモジュール式のコンポーネント化が進んでおり、HTMLとCSSでも徐々に浸透している流れですが、完全に対応できているとは言えない状況です。例えば、メディア クエリはページレイアウトではうまく機能しますが、モジュール式のコンポーネントを実装するのは難しくなっています。 レスポンシ... 続きを読む

Sketch移行とUIコンポーネント化で、良いことしかなかった話 – VASILY Design – Medium

2017/03/31 227 users medium iQON VASILY Sketch 恩恵

アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデー... 続きを読む

早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita

2016/07/11 592 users Qiita React Bootstrap ライブラリ 既存

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CS... 続きを読む

Web Componentsで行うHTMLのコンポーネント化｜1 pixel｜サイバーエージェント公式クリエイターズブログ

2014/04/16 248 users Pixel サイバーエージェント ブログトップ 裏話 HTML

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 ブログトップ 記事一覧 画像一覧 JavaScrip･･･ » Web Componentsで行うHTMLのコンポーネント化 Wed, April 16, ... 続きを読む

あなたの知らない超絶便利なWeb開発を叶える仕様Web Componentsとは～Google I/O 2013まとめレポート (1/3) - ＠IT

2013/07/10 205 users 超絶 Web開発 本稿 Google I HTML

本稿では、Google I/O 2013の中から、「Web Components」に関するセッションをレポートする。 「Web Components」は、簡単にいうと、Web（HTML）をコンポーネント化するための仕組みで、再利用性やメンテナンス性、開発効率を上げるのに大きな効果があるといわれている。 今年のGoogle I/Oでは、次の2つのセッションでWeb Componentsについて解説が... 続きを読む

第45回　CSSのコンポーネント化がもたらすメリット｜gihyo.jp … 技術評論社

2013/02/25 65 users CSS gihyo.jp 技術評論社 メリット 第45回

続きを読む

高機能なJavascriptツリーグリッドコンポーネント:phpspot開発日誌

2006/05/24 69 users phpspot開発日誌 JavaScript セル 入出力

Editable JavaScript TreeGrid Editable JavaScript TreeGrid Javascriptで作成された高機能なJavascriptツリーグリッドコンポーネント。 セルの内容をその場で編集できたり、ドラッグ＆ドロップで移動できたりと、結構すごいです。 コンポーネント化されていてJavascriptのコードを書かずとも簡単に使えるようです。 データの入出力... 続きを読む

fladdict.net blog: コンポーネント指向Ajaxのサンプル　カラーピッカー

2005/06/08 39 users コンポーネント指向Ajax DOM スライダー Flash

コンポーネント指向Ajaxの実験として、FlashからDOMを操作してみた。。効果音やスライダーでは、AJAX構成要素をコンポーネント化する利点を説明しきれない気がしたので、もうちょっと凝ったものを作ってみました。ブログの背景色を直接コントロールできます（画面を広くしないとわからないかも）。 ここでは実装速度の関係上、JSをswf内にハードコードしているけど、動的にflashとDOMノードバリュー... 続きを読む