もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

CSS masonryレイアウトで、Pinterest風のレイアウトがCSSのみで実現可能に

従来のPinterest風のレイアウトを実現するには、JavaScriptライブラリ（例：Masonry.js）や複雑なCSSハックが必要でした。しかし、CSS Grid Level 3で導入される`masonry`値に […]

ちょうど実装の案件があったので、忘備録としてTipsに転載します。グローバルメニューを含んだヘッダーがページ上部に常に表示されているのは便利ですが、コンテンツの閲覧時には不要ですよね。特にコンテンツに集中しているときには […]

最近、グラデーションを背景にするサイトが増えていますが、グラデーションは「背景」から「体験（インタラクション要素）」へ進化したとも言えます。単なる見た目の話ではなく、「色をどう“振る舞わせるか”」という設計の話に進化して […]

以前は、要素の大きさが不明の要素を天地左右で中央寄せする方法は、transform:が一般的でしたが、レイアウトモジュールが増えて、ブラウザーが対応したことで、もっとシンプルに中央寄せすることが可能になりました。ここでは […]

デザインとして検索窓のsubmitボタンを装飾するためにボタンを「ルーペアイコン」にしようと次のコードを記述しました。しかし、これが全く思い通りの表示にならない。疑似要素が表示されないのです。このエラーの原因と解決方法 […]

margin: 0 auto;が効かない場合、原因はほぼ「中央に寄せられる前提条件を満たしていない」ことです。margin: 0 auto;は、「親要素から子要素の横幅を引いた、左右の残りスペースを自動分配する」という挙 […]