Tailwind CSS

概要 みなさまは Web アプリを作成したことはありますでしょうか？ Web アプリを作成というと、最近では HTML、JavaScript、CSS を駆使して作成したものや、PHP、Ruby、Node.js などで作成される方多いかもしれません。 私自身、Node.js を使用して Web アプリを作成していますがその中でも React.js や Next.js を使用して Web アプリを使用しています。 ja.react.dev nextjs.org React.js や Next.js はとても便利ですが、初めて使用する方にとってはやや敷居が高いかもしれません。 そんな敷居を取り払い、…

はじめに 早速ですが... :deep 機能について :deep 機能のつらいところ そんなあなたに PrimeVue PrimeVue の Pass Through 機能 Pass Through の利用方法 最後に 出典 はじめに こんにちは！ContractS株式会社の北原です。 フロントエンドのリードとして、プロジェクトの技術選定や品質保守等を担当しています。 早速ですが... みなさまは Vue 3 をお使いになられていますか？ これには、以前の Vue 2 と比較して多種多様な改善がふんだんに盛り込まれています。 2020/09/18 にリリースされてから暫く経っているので、実際の…

Carbon phpのDateTimeの拡張ライブラリ。 Tailwind CSSが反映されない 色々いじって、地道に CSSを自分で当て込めてましたが、Laravel 10 において、 Tailwind CSS を反映させるには、$ npm run devを実行している状態で $ php artisan serveを実行しないと反映されないらしい。。。 調べるのがいいですね。。。時間を溶かしてしまった。。。。が、しかし！これも初心者あるある！さっさと抜け出したい！ 入力値を維持する方法 バリデーションエラーの後、デフォルトでは、入力値が空にリセットされる それを防ぐ方法として、<input …

Tailwind CSSとは Tailwind CSSの書き方の例 Tailwind CSSのバージョン Tailwind CSSとは Tailwind CSSは、CSSフレームワークの一種で、効率的で柔軟なスタイリングのためのユーティリティ駆動のアプローチを提供します。 このフレームワークは、HTML要素に直接クラスを適用してスタイルを設定することを重視しています。以下は、Tailwind CSSの特徴やコンセプトのいくつかです：1. ユーティリティ駆動のスタイリング: Tailwind CSSでは、頻繁に使用されるスタイルに対してユーティリティクラスを提供します。 これにより、スタイルをク…

"The logo for the React open source JavaScript library" © Facebook (Licensed under CC BY 1.0) "Tailwind CSS Logo" © Tailwind CSS (Licensed under CC BY 4.0) この記事はReact Advent Calendar 2023 23日目の記事です。 はじめに Semantic UI ReactベースのUIコンポーネントライブラリについて DIGGLEでの使い方にマッチするよう薄くラップ Dropdownのpropsのデフォルト値を調整 TextAr…

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング 【05 | deviceの利用】 ホーム】 >> 【07 | ログイン機能の実装】 Bootstrap5.3を利用して、ナビゲーションバーを設置します。 デザインはレスポンシブルデザインを意識して調整します。レスポンシブデザイン（Responsive Design）は、ウェブデザインやウェブ開発の手法の一つで、異なるデバイスや画面サイズに対応するための設計アプローチです。 これは、パソコン、タブレット、スマートフォンなど、さまざまなデバイスでウェブサイトやウェブアプリケーションが適切に表示されるようにするための技術です。 …

Tailwindcssで試しにちょっとしたサイトを書いている。 その作業中に役に立ったサイトを貼り付けておく。 Flowbite - Tailwind CSS component library デザインが完成されているので，貼り付けるだけでそれなりにサイトが出来ていくのが楽しい。 Installation - Tailwind CSS 本家サイトのcomponentの説明は非常に充実している。ただし，細かすぎて初学者には向かないかも。 Tailwind CSS Cheat Sheet チートシートはいろいろあるようだ。カスタマイズの時に参考になる。 これ以外にも，VSCodeのおかげでスタイ…

さよなら9月。

こんにちは！今回は、アプリやWebサイトのUIデザインとコードを生成できるAIサービス「v0」をご紹介します。 v0はVercel社のアプリやWebサイト等のUIデザインとReactベースのコードを生成してくれるチャット形式の生成AIサービスです。 今回は、v0の概要や使い方、生成できるものをご紹介します。 1. v0概要 1.1. 概要 1.2. 料金プラン 2. 新規登録 3. 使い方 3.1. 生成 3.2. 修正 3.3. コードの確認 3.4. デザインの公開 4. 生成できる範囲の確認 4.1. LP 4.2. フロントエンドの処理 4.3. API・データベースとの連携 5. ま…

「選挙後に倒閣運動が起きる」 首相、押し込まれ「裏金議員」公認へ：朝日新聞デジタル 「砂川闘争」再び？～共産党福岡、秋の除籍まつり。 - INVISIBLE Dojo. ーQUIET & COLORFUL PLACE- ブラジル「Xなき日常」1カ月 3割がメンタル改善 - 日本経済新聞 「ご祝儀袋が薄い」石破効果不発で与党に危機感 勢いづく野党 | 毎日新聞 絵が上手いヤマシタさん - あやき | 少年ジャンプ＋ ドカ食いダイスキ！ もちづきさん・第7話 【超時空要塞マクロス 愛・おぼえていますか】＜4K ULTRA HD ver.＞ 全国40の映画館にて2025年1月25日（土）より公開！映…

Responsive design is easy with Fluid Tailwind Plugin. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Fluid Tailwind Pluginとは？ Fluid Tailwind Pluginは、Tailwind CSSで流動的なタイポグラフィーとスペーシングユーティリティを作成することができます。CSSのClamp関数を使用して、ブレークポイント間でユーティリティクラスをスムーズにスケーリングします。 CSS Clampの仕組み clamp()関数は、3つのパラメータを取るCSS関数で…

近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みで…

以前Rails7でTailwind CSSの導入をしましたが、今回はBootstrapを導入してみます。 esbuildを使用します。 プロジェクト作成時に導入する場合 1. rails new mofmof -j esbuild --css bootstrap でプロジェクトを作成する 2. 以下を package.json に追加する "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/ass…

連休よ永遠なれ。

今回もWINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。 WINGSプロジェクトの皆様、著者の山田様ありがとうございます。 今回は表題の書籍を献本していただきましたので、こちらのレビューをさせていただきます。速習 Astro 速習シリーズ作者:山田祥寛WINGSプロジェクトAmazon 経緯 役割がマネジメントに移行して1年弱が経ち、以前と変わらずに技術をキャッチアップしていきたい想いがありつつ、手を動かせていない期間が続いていました。 その中で、特にWebフロントエンドにおいては、Vue.jsやReactの経験はあるものの、その急速な変化についていけてい…

フロントエンドエンジニアの嶌田です。 アイコンは、UIデザインにおいて欠かせないパーツです。弊社が提供する不動産情報サイトであるLIFULL HOME'Sでも、多数のアイコンが使われています。 ウェブページにアイコンを埋め込む手段は無数にあります。あなたはいくつ言えますか？ それぞれのメリットとデメリットについて説明できるでしょうか？ この記事では、LIFULL HOME'Sのフロントエンドで選ばれているアイコン表示方法およびその理由を説明します。その後、アイコンの管理や実装にまつわる不便な点をサービス横断的に解消するために作られた社内ツールと配信システムである、LIFULL Icon CDN…

はじめに おはようございます torihaziです 現在、朝の7時24分です。 リリースまであと1週間ちょいしかないので実務と並行してやるしかありません 今日はテーブル構造とDocker立ち上げ、認証までをやりたいと思います 途中で技術選定も入れていきます。 技術選定 ここに追加していく感じです frontend Nextjs backend Rails 7 ディレクトリ構成 このプロジェクトのディレクトリ構成についてです top/ ├─ table/ │ ├─ Dockerfile │ ├─ table.pdf ├─ back/ │ ├─ rails_project/ ├─ front/ │…

初めまして、テックドクターでフロントエンド開発を担当している大瀧です。ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerの…

こちらの続きになります。 blog.logicky.com 上記で、daisyUIを入れましたので、これを使って、navbarとfooterを作ったりしてみましょう！ navbarはここにあります。 footerはここにあります。 まずは、appにcomponentsというディレクトリを作りましょう。 そして、その中に、navbar.tsxとfooter.tsxを作りましょう。 navbar.tsxを下記のようにします。 import { Link } from '@remix-run/react'; export default function Navbar() { return ( <d…