サイト構築
CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
Post on:2018年9月25日
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどの […]
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Post on:2018年9月20日
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており […]
[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック
Post on:2018年9月19日
フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビ […]
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
Post on:2018年9月18日
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQ […]
イヌをネコに変形！映画やテレビでよく見かけるモーフィングを作成できるオンラインツール -HyperMorph 3000™
Post on:2018年9月18日
映画やテレビなどでよく見かけるモーフィングを簡単に作成できるオンラインツールを紹介します。 イヌからネコに、のように似たような形状だけでなく、全く異なる形状でもある物体から別の物体に変形させることができ、いろいろ楽しめる […]
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
Post on:2018年9月14日
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装 […]
[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js
Post on:2018年9月13日
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -G […]
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
Post on:2018年9月12日
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単 […]
Photoshop CC 2019の新機能「コンテンツに応じた塗りつぶし」の使い方
Post on:2018年9月11日
「コンテンツに応じる」は、Photoshopの機能の中でもかなりの頻度で利用する人が多いと思います。そんな「コンテンツに応じる」の塗りつぶし機能が大幅に進化し、「コンテンツに応じた塗りつぶし」としてPhotoshopの次 […]
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に
Post on:2018年9月11日
a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク […]
sponsors
