タグ

開発とcssに関するshion214のブックマーク (6)

  • JavaScriptビルドツールの整理 各ツールの機能と依存関係

    フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと

    JavaScriptビルドツールの整理 各ツールの機能と依存関係
  • kintoneでTailwindCSSを利用するための勘所 - Qiita

    この記事は kintone アドベントカレンダー 2022 の 11 日目の記事です。 はじめに TailwindCSS、いいですよね。 学習コストは大した事ないくせにけっこう劇的な効果があって、これまで CSS の命名ルールとか運用ルールとかで汲々としていた現場にそこそこドラスティックな変化をもたらしてくれていると感じています。 TailwindCSS 自体をあまり詳しく知らないと言う方は、ちょっと調べれば参考になるサイトはたくさん見つかるでしょう。 特に以下の記事はメリット・デメリット双方に言及しておりかなり有用です。 tailwindcss を導入して感じたメリット・デメリットについて この激オススメの CSS フレームワーク・TailwindCSSkintone で利用するための勘所をお話ししようと言うのが今回の趣旨です。 早速作りましょう 仕上がりイメージはこんな感じ。 例

    kintoneでTailwindCSSを利用するための勘所 - Qiita
  • CSS Stock|Web制作を楽にするCSSコピペサイト

    HTMLCSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTMLCSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している

  • デベロッパーツールの新機能が便利!CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ

    先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました! 1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作CSS Gridを使用する時に大活躍すること間違いなしです。 参考: New CSS Grid debugging tools 機能は簡単に言うと、先日当ブログで紹介したCSS FlexboxのCSS Grid版です。 参考: 先日の記事 CSS Gridの新機能は非常に便利で、使い方も簡単です。 まずは、Chrome 92にアップデート済みか確認します。

    デベロッパーツールの新機能が便利!CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
  • ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】

    短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。 今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。 ウェブサイト開発を爆速に!人気オススメCSSフレームワーク厳選まとめ【2018年保存版】 Bulma Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。 URL: https://bulma.io/ CDN:

    ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】
  • 【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|基礎編 | DevelopersIO

    はじめに 早速ですがみなさん、黒い画面(コンソールやターミナル)はお好きですか? ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。(今では好きですよ、黒い画面) 今回は、すぐに使えるSCSS入門|基礎編ということで、「黒い画面など見たくない!」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って? 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS(Sass) Mixin(自作)」からの

  • 1