React Skeleton - Create Content Loader
Vue.js: SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法MEMO - Madogiwa Blog
Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を与えません。 SFC スタイルの機能 | Vue.js こういう場合にどういう方法があるのかメモ📝 SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法 ディープセレクタを使う :deepを使うとscoped cssで定義したスタイルを子要素にも伝搬させることができます。これはslotで挿入した要素にも反映されます。 scoped スタイルのセレクタを「深く」したい場合、例えば子コンポーネントに影響を与えたい場合は、:deep() 擬似クラスを使用できます。 <style scoped>
Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire
Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest と同様ですね Story をフレームワークそのままの書き方で作成できる Storybook の場合 Vue で SFC ファイル形式のコンポーネントを作成していたとしても、Story を作成する場合には .stories.ts のような拡張子でファイルを作成して Storybook 向けのコンポーネントの記述をする必要があります。一方 Histoire は Story を作成する際にも .vue や .svelte
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Webpacker 3.x -> 5.x-> jsbundling-rails - Qiita
はじめに ※この文章はベータ版です。 既存のプロジェクトで Rails5.2 + Webpacker 3.5.5 -> Rails6.1 + Webpacker5.2.1 -> Rails6.1 + jsbundling-rails (-> Rails7.0 + jsbundling-rails)したので、手順etc を メモしておきます。 (Rais6 -> Rails 7 する際には、Webpacker -> jsbundling-rails、 turbo-links -> turbo など、Rails7 からの正式採用なものの Rails6 でも動作する gem への移行、Rails6 では動作するものの Rails7 以降への対応が怪しい gem の Rails7対応済/対応中の gemへの移行、 例：Refile -> Shrine、をインクリメンタルに行なってから、 Rails
Rails & Webpacker環境でPostCSSを使う - Qiita
はじめに Rails & Webpackerの環境でPostCSSで書かれたCSSを取り込もうとした時に、そもそもPostCSSってRailsでどう扱うんだっけ？？となって少し詰まったのでその時の対応についてになります。 rails: 6.0.0 webpacker: 4.0.7 PostCSSって ぼちぼちPostCSSの勉強をやっちゃいますか から PostCSSはNode.js製のモジュールでCSSをコンパイルできるツールです。 そうなんです。LessやSassとは異なり、CSS拡張子をソースとして新しいCSSを生成してくれるんです。 またこちらの記事に詳しくまとめられています。ありがたい！ PostCSS まとめ - Qiita やりたいこと Webpackerで管理しているCSSをPostCSSで書いてコンパイルする 結論 先に結論から言うと、RailsでWebpackerをイン
webpacker3系からwebpacker4系へのアップグレードでハマったので手順とかMemo✍ - Madogiwa Blog
最近自分の個人サービスのRailsアプリケーションをWebpaker3系(3.5.5)から4系(4.0.7)にアップグレードしたのですが、割とハマったので手順をメモしておく✍ ちなみにVue.jsを使っている場合の手順になるので、ご注意ください⚠ とりあえず手順だけ package.jsonのwebpackerのバージョンを上げてyarn install bundle exec rails webpacker:install:vueを実行して関連ファイルを差し替える .babelrcは不要となったようなので削除する yarn add postcss-loader postcss-cssnextでCSS系のローダーをinstallする。でCSS系のローダーをinstallする。 bin/webpackで動作を確認して成功🎉 ちょっと各項目を詳しく package.jsonのwebpacke
Vue.jsでSPAサイトを作成するチュートリアル【4. CSS編】
Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。 今回はコーポレートサイトを想定して作成していきます。 ※記事が長くなったのでチュートリアルを分割しました。 目次 表示編 ルーター編 コンポーネント編 CSS編 ←イマココ JS編 ライブラリ編 メタ編 ビルド編 前提 タスクはnpm scriptsで一限管理 コマンドはyarnを使用 vue-cliのwebpack-simpleを使用 CSSはSCSSを使用し用途に合わせてPostCSSを使用 バージョン "vue": "^2.5.11" "webpack": "^3.6.0" "node-sass": "^4.7.2" "postcss": "^6.0.16" "stylelint": "^8.4.0" CSSの環境構築 SassとPostCSSを使用するので以下のコマンド
Scoped CSSにおけるCSS設計手法 - ICS MEDIA
Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、
なんとなく…改め、Vue.jsでCSSスタイルガイド作成に挑戦 | バシャログ。
一体型VRヘッドセット『Oculus Go』がそろそろ発売されるのではないかと、ドキドキしながら待っている kouraku です。おはこんばんちわ。199＄という低価格にも関わらず、スペックがそれなりにあるらしい・・・ので、ここから一気にVRユーザーが増えてくれるのではないか、と期待をしています。 さてさて、前回は Vue.js を使ってみたら、もしかしたらCSSのスタイルガイドが作れちゃうんじゃないの！？・・・ということで、marked.js と highlight.js を導入して見た目を整えたり、サンプルコードの下にサンプル表示を追加してみました。 なんとなく（今更ながら）Vue.jsを試してみた〜その２ これだけでもスタイルガイドの形に近づいて気がしますが、更にスタイルガイドとして機能させるために、色々と追加していこうと思います。 表示仕様を変更してみる 前回までの表示は、読み込ん
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Histoire
Buefy: lightweight UI components for Vue.js based on Bulma
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
Web制作者が備えておきたい最新版チートシートのまとめ | コリス