CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法

CSS Gridで2カラムのレイアウト(メインとサイドバー)を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか?

CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。

CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法

Using Position Sticky With CSS Grid
by Ahmad Shadeed

続きを読む

WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI

WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。

フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。

WebサイトのUIにさまざまなフローティング要素を実装するJavaScriptのライブラリ -Floating UI

Floating UI
Floating UI -GitHub

続きを読む

今まで間違っていたこともこれでよく分かる! 書き出しで心をつかむ執筆術を学べる解説書 -「書き出し」で釣りあげろ

「感情類語辞典」「性格類語辞典」「場面設定類語辞典」でお馴染みのフィルムアート社から、創作系の新しい解説書が発売です!

最初のページを開いて、5秒くらい読んでみて、ストーリーに引き込まれなければ、本を戻してしまう人も多いと思います。本書ではその時に大切な書き出しの例を示し、ダメなポイントを警鐘し、最高の効果を得る方法を教えてくれます。

「書き出し」で釣りあげろ

続きを読む

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。

白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

CSS Tricks to Create that Dark Futuristic Web3 Look
by Trisha Lim

続きを読む

新作の日本語フォント「藍と白のゆきぐに」がリリース! 無料版もあるのが嬉しい、ロゴタイプみたいなかわいいフォント

「はんなり明朝」「こころ明朝体」「こども丸ゴシック」などのフリーフォント、そして「森と湖の丸明朝」「海と山のろごごち」をリリースしているTyping Artさんから、新作の日本語フォント「藍と白のゆきぐに」がリリースされました!

無料版と有料版があり、無料版はひらがな・カタカナ・漢字6文字、有料版はさらに常用漢字(2136文字)が収録されています。

藍と白のゆきぐに

藍と白のゆきぐに -BOOTH

続きを読む

この実装方法は巧い! コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。

フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。

コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

A Clever Sticky Footer Technique
by Chris Coyier

続きを読む

良書がたくさん安い! ビー・エヌ・エヌ社の年に一度の貴重なセールが開催、Web制作・デザイン・イラスト関連のKindle本がお買い得です

当ブログでも人気が高く、良書揃いのビー・エヌ・エヌ社のKindle本セールが開催しています!

ビー・エヌ・エヌ社のKindleセールは、年に一度あるかないかの非常に貴重なセールです。絶対にこの機会を逃してはいけません。
セール期間は、12/9まで。

セール対象のKindle本

続きを読む

なんとなく色を決めてない?「けっきょく、よはく。」から続くシリーズ待望の第4弾がついに発売! 配色に着目したデザイン書「いろいろな、いろ。」

けっきょく、よはく。」「ほんとに、フォント。」「あたらしい、あしらい。」(リンクは当ブログでの紹介記事)に続く、第4弾がついに発売です!
シリーズすべてが大好評なので、待ちわびていた人も多いと思います。

「いろいろな、いろ。」 第4弾となる本書は、配色に着目したデザイン書。
デザインですぐに使いたくなる配色のテクニックが満載です!

いろいろな、いろ。

続きを読む

top of page

©2021 coliss