DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Masonry layout, on the web, is when items of an uneven size are laid out such that there aren’t uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScri

ページを読み込んだ初期状態ではボケボケ画像にしか見えないけど、マウスオーバーしたときだけクリアに表示される、という効果をCSSで作ります。 昆虫画像や怪我した患部の写真、ネタバレ画像など、多少見る人を選ぶような画像を表示させるときにどうぞ。 共通設定 【HTML】 <div class="wrapper"><img></div> まず画像の外側をDIVで囲います。 img に直接指定しても動くことは動くのですが、そのままだと ぼかした端っこがガタガタになります。トリミングすると仕上がりがキレイ。 【CSS】 .wrapper { display: inline-block; overflow: hidden; } フィルタ効果についてはブラウザ間の差異があります。動作環境は随時チェックして下さい。 blur : Can I use… ぼかし（ブラー）効果 画像をぼややんとさせます。作動時間

概要 長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」 「もっと見る」ボタン。 要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。 UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。 最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。 仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。 デモはこちら [jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。 もっといい方法あるで！！という方はコメントやらついったーやらで教えてくださいませ。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン