Pixelog
Jun 6th 2019
CSSだけで文章を折りたたむ(続きを読む)その1

今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。 CSSだけでクリックイベントを扱うには、主にtargetを使う方法とチェックボックスを使う方法がありま...

May 20th 2019
CSSのみでクリックで画像を拡大する(Lightboxもどき)

画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。 この記事で紹介する内容に実...

May 5th 2019
HTMLだけでコンテンツを開閉できるdetailsタグを試してみる

<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。 概要<details> <summary&g...

【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる

Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。 このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ対応のスライドをつくる方法のメモ。 ...

Mar 14th 2019
CSSアニメーションだけでタイマーを作ってみた

CSSの限界に挑戦ということで、CSS3のアニメーションとCSS変数(カスタムプロパティ)を駆使して、キッチンタイマーを作ってみました。 デモ デベロッパーツールで.timer_displa...

12