タイル状に可変グリッドレイアウトを簡単に実装できる、今や定番のjqueryプラグインといえば「Masonry」。 しかし、このMasonryには配置したアイテムを指定したタグを持つもののみ表示するフィルター機能や、目的別に並べ替えるソート機能がありません。 「Masonry」プラグインのこれらの弱点を補ってくれる代替のプラグインとして有名なのが、「isotope」というjQueryプラグインがありますが、こちらは商用利用の場合はライセンス料の支払いが必要となってしまいます。 そこで今回紹介するのは、フィルター機能もソート機能も搭載した可変グリッドレイアウトを実現し、レスポンシブにも対応した、無料で商用利用も可能なJavascriptプラグイン「Muuri」(GitHubはこちら)。 MITライセンスで、IE9〜をサポートしています。 なお、Masonryは単体で利用可能で圧縮された状態のフ

Discover the new microsite and 3D film, featuring the Girard Perregaux Casquette watch. Discover the new microsite and 3D film, featuring the Girard Perregaux Casquette watch.

A collection of inspirational websites made by real Squarespace users. Stories and solutions for the modern entrepreneur. In-depth guides and videos about the platform, our services, and how to get started. An online community for Squarespace users and professionals to discuss best practices and seek advice. Free, online sessions where you’ll learn the basics and refine your Squarespace skills. Ea

【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き 更新日：2022/07/25 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。 keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。（slickとSwiperはアクセシビリティのサポートがされています。） … というような理由で、私はslick推しでした。 しかし、slickの操作感（いわゆるUX）があまり良くないと思って

国旗 と 地域の旗 絵文字 (national flag emoji) Unicode で定義されている国旗と地域の旗の絵文字は、合計257個です。 この国旗などの絵文字は、国際標準化機構が割り振った 2文字の国コードリスト(ISO 3166)を元に、REGIONAL INDICATOR SYMBOL LETTER とよばれる 🇦️(U+1F1E6) ～ 🇿️ (U+1F1FF)の文字を組合せて表現しています。 具体的には、以下のように組み合わせています。 🇯 + 🇵 = 🇯🇵 : 日本 🇺 + 🇸 = 🇺🇸 : アメリカ 🇬 + 🇧 = 🇬🇧 : イギリス 絵文字を日本語順（かな漢字順）で一覧にまとめましたので是非活用してください。 以下の一覧のテキスト部分をコピーすれば、TwitterやFacebookの投稿にペーストできます。 HTMLに埋め込む場合などは

世界の国旗、基本のシンボル 世界には197ヵ国（※）の国があり、同じ数だけ国旗があります。 でも、どれもどことなく似ている… なんて、思ったことはありませんか？ 旗を分割したようなデザインに、... 国旗のパターンと三色旗の歴史 国旗は、数種類の基本的な型（パターン）で作られています。 いちばん多くの国で使われているのが、三分割のパターンです。旗を横か縦に三等分にして、３つの色を塗り分...

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。

htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コンテンツが横方向に自動で流れ続けるスライドショー、と言われてイメージ湧きますでしょうか？ コンベアスライドショーともいいますが、今回はそちらをCSSのみで実装する方法をまとめました。 ECサイトなどで見かけることもありますし、iPhoneの方はApp Storeの中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。

個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

Twitter, Facebook, Instagram, TikTok, YouTubeなど、各ソーシャルメディアに最適なサイズで画像をトリミングしてくれる無料ツールを紹介します。 AIで自動化されているので、1枚の画像をアップロードするだけで各ソーシャルメディア用の画像102サイズに自動的にサイズが変更されます。もちろん、必要な画像のみでも全部まとめてもダウンロードできます。