Tailwindの色指定 がわからないので色見本を作る。 Gridの勉強を兼ねて。 See the Pen colorSample by kalz2q (@kalz2q) on CodePen.

tailwindcss grid 入門 で検索したらあまりヒットしないのでgridのサンプルを移植してみる。 See the Pen gridHeader by kalz2q (@kalz2q) on CodePen. See the Pen gridColumn by kalz2q (@kalz2q) on CodePen. See the Pen gridNavi2 by kalz2q (@kalz2q) …

wikipedia wikipediaによると 1999年（平成11年）に公布・施行された「国旗及び国歌に関する法律」（通称：国旗・国歌法）の規定によれば、 「旗の形は縦が横の3分の2の長方形。日章の直径は縦の5分の3で中心は旗の中心。地色は白色、日章は紅色」 このデー…

カードを裏返すのに裏がある場合と裏がなくて表の裏返しの場合がある。 あ、ややこしいね。 これは hover すると裏返ります。 See the Pen flipCardUranashi by kalz2q (@kalz2q) on CodePen. 解説 プログラムを見てもよくわからない。 考えよう。

都内から千葉の花見川サイクリングコースまでのアプローチをロードバイクで主に歩道を走って往復してみた。 橋が全て小山のように上り下りになってるのでまるでヒルクライム。 主な橋とか： 荒川河口橋 荒川 舞浜大橋 旧江戸川 弁天橋 見明川 境川橋 浦安ジ…

アイデア 課題の段階で書く。 今まで、何か思いついてやってみて、出来上がったらブログに書いていたが、それはそれで良いのだけれど、思いついて、やってみての試行錯誤が大切なので、実際には試行錯誤しながら思いついた事が勘違いだったり、別の方法を思…

Next と React はどこが違うか codepen の環境とnext の環境。 codepen の環境は react なので 名前が App だが、next は Home である。 それだけか? next の初期画面で試して見よう。 const App = () => { に直す。 ImageタグはNextのものなので使えないの…

webプログラミングの学習マップとして HTML, CSS, JavaScript を学ぶ事になっているが、思うに今どきなのだから Next(React) + TypeScript + Tailwind から入ってよいのではないか。 その方が効率的に学べると思う。 しかし、Next(React) + TypeScript + Tai…

水平回転 くるくる回転するのには animate-spin と言うとても便利なコマンドがあるのですが、水平回転がありませんでした。 前回の例を見て試行錯誤してみたところ出来たので掲載します。 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. プログラム…

tailwind flip card ネットに落ちていた例をcodepenにコピペしたら動きました。 これの何がすごいかと言うと、tailwind に animate で用意されているアニメーションは animate-spin, ping, bounce, pulse があって出来合いの限られた物しかない。 この例のよ…

tailwind nav の配置 container で一気に配置出来た。 See the Pen nav sample by kalz2q (@kalz2q) on CodePen.

Tailwind ChitChat Example See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

Tailwind input form See the Pen inputform by kalz2q (@kalz2q) on CodePen.

border で丸を描く See the Pen temp by kalz2q (@kalz2q) on CodePen.

h-screen の 入れ子 と Padding 実験 See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

前回まででとりあえず Tailwind が行き詰まったので一歩退いて今後の計画を考える。 Next(React) + TypeScript + Tailwind で学びたい。 npx create-next-app projectname でデフォルトでこの環境が出来た。 この環境でhtml と css と JavaScript が統一的に…

tailwind 勉強中。 See the Pen tailwind-interactive-button by kalz2q (@kalz2q) on CodePen. flexbox See the Pen flexbox by kalz2q (@kalz2q) on CodePen. 幅に応じて変化 See the Pen flexbox-viewport by kalz2q (@kalz2q) on CodePen.

冷蔵庫の氷をひとかけふたかけビニール袋に入れて金槌で二、三回たたくのが一番簡単。 アンビル（かなどこ）があると便利。小さいのをアマゾンで1500円くらいで売っている。 アイスピックで割ったり、プライヤーで潰すのも手軽で良いと思う。 いろんな飲み物…

tailwind 勉強中。 テキストの右寄せ。 See the Pen text-right by kalz2q (@kalz2q) on CodePen. ブラウザーが用意している <h1></h1> の設定がオフになっているらしい。 margin と padding See the Pen tailwind-margine-padding by kalz2q (@kalz2q) on CodePen. b…

CodepenでTaillwind が使えるか と思って検索したら 使えるみたい。 dns で tailwind を入れるだけ。 See the Pen React & Tailwind Codepen by kalz2q (@kalz2q) on CodePen. ボタンと見出しが重なってるね!!!!

面白かったけど。 大変だった。 まあいいか。 面白かったけど、心が豊かにならなかった。 これを読むならシェークスピアやドストエフスキーなど古典を読みたい。 アイデア: 文庫で揃える世界文学全集 でもまあ知識として面白かったことがたくさんあったし、…