旧gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

CSS

CSSで雨を表現する

せっかくの4連休ですが、なんの予定もありません。まだまだあちこち外出するのは怖いです。しかも連休初日は雨です。散歩くらいはしようと思ってましたが、この雨だとやる気が削がれますね。せっかく暇で、外は雨が降っているので、雨をCSSで表現できたら良…

Flexboxコンテナの左右の余白をいい感じにする

Flexboxコンテナの左右の余白をいい感じにしたい!でもできない!と悩んだので、それを共有します。最終的に、CSSだけで書くのは諦めてJavaScriptを書きました。悔しい!! なにを実現したいのか いくつかのアイテムを持つFlexboxコンテナで、左揃えで、画面…

CSSで■、●、▲を描く

CSSでいろいろ描けるようになっておきたいなという気持ちだけは以前からあったものの、これまでちゃんとキャッチアップできていませんでした。まずは簡単なものからということで、●と▲と■をCSSで描いて、その実装方法について書いておきたいと思います1。 ■ …

高さいっぱいのアコーディオンメニュー

See the Pen Full height accordion by gaaamii (@gaaamii-the-sasster) on CodePen. 高さいっぱいのアコーディオンメニューを書いてみた。calc()は幸福度が高い。 こういうの必要なことはちょいちょいありそう。

雑にはてなブログテーマ用意して公開もせず使ってる

ちょっと前に、はてなブログのテーマを作った。いや、作ったというか手元にテンプレートをおいていじくったやつを貼っ付けてるといったほうがいいかもしれない。 はてなブログは以下に素晴らしいテーマがたくさんある。 blog.hatena.ne.jp あるんだけど、せ…

overflow: visible scroll がうまいこといかなくてつらい

CSS

https://codepen.io/gaaamii/pen/VgrwMvcodepen.io overflow: visible scroll; と書いたらx方向ははみ出て見えて、y方向はスクロールになってほしいのだけどそうはいかなくてつらいという話。なんでx方向もscrollになるんだ。

styled-componentsの良さがよくわからない

CSS

と、煽ってるような記事タイトルだけど、 煽りたいわけではなく、単にわからないというつぶやきです。 自分はいまCSS Modulesでやっていて、特に困ることがない。 最近styled-componentsのほうがよく聞くのはなんでだろう。 あっちのほうがなにかいけてるポ…

Storybookを使って気付くCSSの粗さ

がっと作った大きなOrganismがあって、それを構成するMolelculeやらAtomやらのレベルのコンポーネントをすべてStorybookに置いた段階で、「あれ、なんかこれいい感じに表示できない...」ということに気付く。CSS Modulesを使ってスタイルのスコープをそのコ…

ごく普通に動作するフラッシュメッセージのサンプル

https://codepen.io/gaaamii/pen/VVaazvcodepen.io 練習。ごく普通なやつです。

【CSS3】リンクhover時の変化をふわっとさせるやつ(transition)簡単すぎわろた

CSS

「CSS3でアニメーション!」とかいうとなんだか難しいことを新たに勉強する必要があるような気がしてて目を反らしてたんだけど、ちょっと調べてみたらたった2行でいいことが判明。 .hoge a{ display:block; width: 200px; height: 50px; background: black;…

はじめて「レスポンシブウェブデザイン」なるものに挑戦しました

先日公開したアンテナサイト「ソフ速」。アクセス解析を見てみると、どうやらスマホユーザーが半数を超えてる。これはまずい、レスポンシブな感じにしないと...。 ということで昨日2-3時間ほどかけてどうにかしました。想像よりも簡単でした(そう思うのはひ…