クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

CSS

スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

固定幅と可変幅の組み合わせにはflex-basisが まったく カン・タン・だ!

CSS

Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。 横に並べるのにフレックスボックス(display: flex)を使う人は多いと思う。 そんな中でも固定幅と可変幅の組み合わせに便利なプロパティflex-basisを…

【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ!

CSS

CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()ってのが素敵すぎでしょう!と感動したのでご紹介。

CSSのcolumns(段組)でPCとスマホの読みやすさを統一

CSS

Pocketの「デジタル積ん読」を消化する日々。状況によってスマホだったりPCだったり。 で、スマホ読書に慣れてくると、だんだんPC表示の一行が長く感じて辛みがある。。 そうだ、CSSのcolumns(段組)でPCとスマホの一行あたりの文字数を統一してみよう!と…

【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3

CSS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

list-styleが表示されない!原因はdisplayにあった!6年前の知恵袋に救われた話

CSS

ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ?表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた!という話。

リンクでよくある「>」アイコンを画像じゃなくてCSSだけで作る

CSS

リンクや更新一覧などでタイトルの右側に「>」アイコンをつけることがよくあると思う。 imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。 テキストの「>」を配置してもいいけど見た目はイマイチ…。あとシステム…

【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め

CSS

先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 ア…