CSSのみでクリックで画像を拡大する(Lightboxもどき)
画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。 この記事で紹介する内容に実...
HTMLだけでコンテンツを開閉できるdetailsタグを試してみる
<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。 概要<details> <summary&g...
Apr 30th 2019
【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる
Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。 このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ対応のスライドをつくる方法のメモ。 ...
Mar 16th 2019
Netlify Managed DNSでGoogle Search Consoleの認証をする
Google Search Consoleではドメイン単位でサイトを追加する際にDNSにTXTレコードを追加して、ドメインの所有権を確認する必要があります。 このとき、Netlifyが提供し...
CSSアニメーションだけでタイマーを作ってみた
CSSの限界に挑戦ということで、CSS3のアニメーションとCSS変数(カスタムプロパティ)を駆使して、キッチンタイマーを作ってみました。 デモ デベロッパーツールで.timer_displa...
Mar 3rd 2017
【簡単】ドクターグリップで痛シャーペンを作ろう!
今回はドクターグリップで痛シャーペンを作る方法を紹介します。みんなで痛シャーペンを作って、新学期に自分のアイデンティティをアピールしよう!! 必要なもの 上半分が透明になっているDr.GRI...