画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する方法を紹介します。どんな時にそのようなUIを採用したくなるかというと、画面が読み込まれた直後はヘッダーとコンテンツの境界をシームレスに表現したいが、スクロールをしたらヘッダーが重なるので境界をはっきりさせたい。そんなときです。開発#CSS#UI2021年10月26日に公開
CSSで文字を省略 表示する方法まとめ一覧画面で一覧しているアイテムの説明をちょっと出したい、ということがよくあります。テンプレートエンジンやJavaScriptでの切り詰めではなく、CSSでの切り詰めも当たり前になってきました。経験的にはこの記事にある1行テキストの省略、複数行テキストの省略、表の省略の3つがあれば、たいていのケースはカバーできるでしょう。開発#CSS2021年9月19日に公開
CSSのスクロールスナップを利用して横スクロールする一覧リストをつくる方法昨今のWebやアプリのUIでよく見る、横スクロールする一覧リストのつくり方です。scroll-snapを利用してCSSのみで実現できます。開発#CSS2021年6月9日に公開
CSS ModulesでCSSを書く時に実務で必要になる書き方まとめこのサイトのCSSはこれまでstyled-jsxだったのですが、Gatsbyを2から3にアップグレードしたのを機に、CSS Modulesに置き換えました。置き換える過程で、実務で必要になりような要件をどのようにクリアしていくのか体感できたので、まとめてみます。以下、GatsbyでSCSSを利用したCSS Modulesのサンプルになります。開発#CSS#React#Gatsby2021年4月27日に公開
CSS：tableのセル内文字が長くなったときに省略をする方法テキストを1行に収めたいとき、収まりきらない文字を三点リーダー（…）で省略することがあると思います。次のようなCSSです。div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。開発#CSS2021年2月20日に公開
iOS Safariのinput要素によく使う3つのCSSプロパティ普段PCのブラウザで開発をしていているWebサイトをiOSの実機端末で確認してみたら、input要素が思った通りの見た目になっていなかった。そんなことがよくあります。僕がよく遭遇する3つの問題の解決方法をそれぞれ紹介します。開発#iOS#Safari#CSS2021年1月13日に公開
CSSのcurrentColorを使ってもっと簡単に色を指定するこんなことがしたいことはないでしょうか。SVGの色を文字の色に合わせたい背景色を文字の色に合わせたい愚直にやると、SVGと文字や、背景色と文字に同じ色を指定すると思います。div { color: #ff0000; background: #ff0000;}もしかしたらそれ currentColor を使ったら簡単になるかもしれません。開発#CSS#色#SVG2020年12月19日に公開
レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法レスポンシブデザインを採用したWebサイトでは、文章の改行位置をあらゆる画面幅で完璧にコントロールするのは至難の技です。とはいっても見出しやキャッチコピーなど印象的に見せたい箇所の文章は、その意味にあわせてなるべく綺麗に改行してあげたいもの。ある程度狙った位置での改行を実現する方法です。開発#CSS#HTML2020年9月9日に公開
どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS画像の内容によって枠線をつけたほうがきれいに見える場合と 見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。開発#CSS#画像2019年8月12日に公開