Tailwind

現在作成しているlaravelアプリにチェックボックスを組み込んだですが、デザインをボタンぽくしたかったのでtailwindで実装してみました。 同様のことを生のCSSで書いて解説しているブログはけっこう見つかったのですが、tailwindで実装しているのは見つからなかったので、自分自身の備忘録も兼ねて完成したソースを残しておきます。 完成画面 完成版ソース checkboxをボタンデザインで表現する為のクラスをtailwindで書く マウスホバー時・チェック時に色を変える 完成画面 最終的に下図のような感じで、ボタンっぽいデザインにしました。 選択済み・マウスホバー時には色が濃くなるようにな…

Laravelで新規アプリを作成しており、いったんherokuでデプロイし、画面を確認したところcssが崩れていました。 原因はtailwind.cssのバージョンが上がった事。 ローカルで作成している段階では $ npm run dev もしくは $ npm run watch すれば解決するのですが、herokuでも同様に解決しようと $ heroku run npm run dev とすると、npmコマンドがそもそも使えない。という事態だったので、npmを使えるようにするところから、$ npm run devをするまでの流れをまとめました。 そもそも、npmとは npm runコマンド …

概要 参考情報 概要 Tailwindのチートシートを公開してくれているページを見つけたので、忘れないうちにメモメモ。。 flowbite.com 参考情報 tailwindcss.com 日本語のサイトがあった。 tailwindcss.jp 過去の記事については、以下のページからご参照下さい。 いろいろ備忘録日記まとめ devlights.github.io サンプルコードは、以下の場所で公開しています。 いろいろ備忘録日記サンプルソース置き場 github.com github.com github.com

概要 参考情報 概要 Tailwind CSS の v3.0 がリリースされましたね。新機能盛りだくさん。 tailwindcss.com youtu.be 参考情報 tailwindcss.com 過去の記事については、以下のページからご参照下さい。 いろいろ備忘録日記まとめ devlights.github.io サンプルコードは、以下の場所で公開しています。 いろいろ備忘録日記サンプルソース置き場 github.com github.com github.com

剣乙女ノア⑥ 終わりが見えん… ※ネタバレあり 延々とどうでもいいような話しかされないから、気がついたら寝てるってのが続いてる… 昨日も結構な時間の記憶がない… しかもこのゲーム、シナリオが一本道で分岐なし、しかも選択肢すら一つしかない（しかも3Pでどっちに出すかっていう、クソほどの意味もないやつ）もんだから、今どのぐらいまで進んでるのかが全然わからなくて、俄然グダってくる原因になってると思うんよね… でも、途中で投げ出すことはしたくない… もしかしたらエンディングがむちゃくちゃ感動する出来かもしれないし… そんな可能性は万に一つどころか、億に一つもないってことは十二分にわかった上で、それでも…

剣乙女ノア⑤ ぐだぐらライフと三本目の魔剣 ※ネタバレあり おかしいな… 予定ではとっくにコンプリートして、次のゲームに取り掛かってるはずだったのに… 未だにノアちゃんの心の闇がどうたらこうたらと、亀の歩みより遅いスピードでシナリオが進行しているんだけど… もうこの話は聞き飽きたよ…！ 何回似たようなやり取り続けてんだよ…！ 「生きるためにエッチしなくちゃいけない間柄」ってのを前提にした上で、惚れた腫れたの話をするのはズルいって感覚はなんとなくわからなくもないけど、そもそも嫌いな相手のために義務感オンリーで処女を捧げるような奇特な女の子は、エロゲ界隈でもそうそういないと思うわけで、つまりはさっ…

剣乙女ノア④ 勇者と聖女の心の闇 ※ネタバレあり なんか盛り上がってきてるっぽいんだけど、相変わらずぬるくて緊張感に欠けるっていうか… 単純に話にのめりこめないっていうか… 何を言われても「アッハイ」以外の感想が浮かばねえからチクショウ！ でもここにきておセックスの頻度が増えてきたことは評価する 変化球のプレイもいいぞ～ なんでフィリアちゃんだけ時々レイプ目になるんだろう…？？ レイプ目は興奮するから、ちゃんとヒロイン全員分用意して？？ とまあ、他に感想がないので、ついでの近況報告も 母が出張ついでにジャンプショップでガラスコップをいろいろ買ってきてくれた 呪術、チェンソー、マッシュル、ゴルカ…

2023/1/21, DrupalCamp DEN 2023 Iwakuni に参加してきました。 ハイブリッド開催イベントでしたが、私は懇親会含め現地での参加です。 自分が見たセッションを中心に振り返ります。 DrupalCamp DEN 2023 Iwakuni とは 参照 セッション動画・スライド 振り返り記事 セッション振り返り 挨拶 Dries ビデオメッセージ スペシャルセッション A-1, 国際農研Webサイトの構築と運用 B-2, DrupalとFastly！～究極の柔軟性と高速性を手に入れよう～ A-3, Drupalを始めるあなたへ、豊田支部発刊書籍の紹介 B-4, エンジ…

1: 以下、5ちゃんねるからVIPがお送りします 2022/03/19(土) 12:32:05.988 id:mhEh8YSj0 web系であればフロントエンド、バックエンド、インフラなんでもござれ わからなきゃ調べて適当に答える 仕事の息抜き

こんにちは。エンジニアの中島です。 現在はアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 以前同組織の紹介記事をいくつかあげましたが、その通り弊社は自社の運営するサービスをアクセシブルにするため日々奮闘しています。 www.lifull.blog www.lifull.blog 以前の記事ではどういったマインドで同組織ができたか、どのように推進しているかについて話ました。 今回は、そういった活動の中でいくつか技術的な副産物が生まれたのでその話をしようと思います。

TailwindCSSを最近使い始めてます。 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. TailwindCSSは通常利用ではビルドが必要ですが、ちょっとした検証とか、デモのレベルではビルド環境一式を用意するのが面倒です。 オフィシャルにCDN版が用意されていて開発、検証用に利用可能とのことで試していました。 Try Tailwind CSS using the Play CDN - Tailwind CSS 試したバージョンは TailwindCSS 3.2.4 試したコード scr…

前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3は…

Nuxt v3はcomposablesにstateと処理をまとめると便利なので、よく使うフラッシュメッセージ（数秒表示されて勝手に消えるやつ）を作ってみました。 ソースコード github.com Nuxtのドキュメントでも使われてるStackblitzを試してみたけどこういうときに便利 stackblitz.com 呼び出す側はこんな感じでテキスト、色タイプ、表示するマイクロ秒を渡す関数に。 const { showFlashMessage } = useFlashMessage() showFlashMessage('this is Flash Message!', 'info', 400…

learning.oreilly.com Tailwindは公式ドキュメントが充実していることもあって、そちらを熟読できていれば本書から得られるものはあまりないように感じる。 とはいえ逆に言えば、初見には多すぎる情報量に圧倒されない程度に、全体の概要や勘所をつかむための入門書としてちょうどよいか。 100ページ程度とかなり薄めの方なので短時間でサクッと読めた。 Tailwindに関して個人的には、自前のデザインシステム組むとかでガッツリ使うんでなければDaisyUIとかでいいかなとは思ってるけど、どんなものなのかくらいはざっくり把握しておきたいお気持ちはある。

Image Credits: CSS-tricks.com Jamstack 事始めシリーズ第1回では、Jamstack とは何かで終わってしまいましたので、今回は Astro とは何かを記載した後に、実際に Astro を使ったコンテンツの作成とその動作確認までを行ってみます。 Astro とは？ astro.build Build faster websites. Pull content from anywhere and serve it fast with Astro's next-gen island architecture. Static Site Generator ツールの…

多機能・レスポンシブ対応・スライダーが作れるjavascriptライブラリ swiperjs.com このようなスライダーを作成する セットアップ resources/js/swiper.jsを作成しjsを記入していく app.jsは全ページで読み込まれるので、Swiper.jsとして個別で読み込む事で app.jsを軽くしつつ他ページ表示も遅くならない 中身は公式からコピペ // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/swiper-bundle.c…

CSSでスタイリングするときってidentifierの付け方とか、ファイルの分け方とか、同じ結果を達成するにしてもやり方は一通りではなく自由度が高い だけど、何の指針もなくidentifierをなんとなくな気持ちでつけ続けると、将来的にいろんな不都合が生じてしまう可能性がある ファイルの分け方とか、identifierの付け方とか、スタイルのモジュールの分け方や粒度とか、細かいけどひとつひとつ戦略的に決定することで保守性の高い、再利用性の高い、いけてるCSS設計ができて開発体験も開発効率も上がることができると思う CSSを適当に書くとよく見る問題: 特定のスタイルを変更しようとした時の影響範囲…

長いタイトルですが、、、 調べてもなかなか日本語の情報が無かったり完全でなかったりしたので、他に困っている人に少しでも検索にひっかかりやすいようにするためにこうしました。 手順は自分向けのメモの体裁を取っていますが、必要となる手順は書いたつもりです。 お役に立てればうれしいです。 Docker関連の設定 docker-compose.yml" の appサーバーの設定で 5173番ポートを開放する。 appサーバーの "Dockerfile" にも 5173番ポート開放の設定を記載する。 docker で Lalavel を起動する。 各種インストール Laravelをインストールする。 vi…

※English follows. みなさん、こんにちは 2023年、新たな1年が始まった。 2023START‼︎ pic.twitter.com/DRsWdIuDhE— さくま@勝田全国マラソン2023/1/29 (@ksakuma1) 2022年12月31日 今年も素晴らしい1年にしていこう。 さて、前回のブログで2022年を振り返ってみたのだが、1年の最後の最後で思い出が増えた。 sakumichael-local-runner.hatenablog.com そう、2022年の集大成のフルマラソンを走ってきたのだ。今回はそのレースの総括をしたい。結論を先に言うと、目標であったフルマラソ…