CSSの記事一覧

CSS ModulesでCSSを書く時に実務で必要になる書き方まとめ

このサイトのCSSはこれまでstyled-jsxだったのですが、Gatsbyを2から3にアップグレードしたのを機に、CSS Modulesに置き換えました。置き換える過程で、実務で必要になりような要件をどのようにクリアしていくのか体感できたので、まとめてみます。以下、GatsbyでSCSSを利用したCSS Modulesのサンプルになります。
開発
  • #CSS
  • #React
  • #Gatsby
に公開

CSS:tableのセル内文字が長くなったときに省略をする方法

テキストを1行に収めたいとき、収まりきらない文字を三点リーダー(…)で省略することがあると思います。次のようなCSSです。div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。
開発
  • #CSS
に公開

レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法

レスポンシブデザインを採用したWebサイトでは、文章の改行位置をあらゆる画面幅で完璧にコントロールするのは至難の技です。とはいっても見出しやキャッチコピーなど印象的に見せたい箇所の文章は、その意味にあわせてなるべく綺麗に改行してあげたいもの。ある程度狙った位置での改行を実現する方法です。
開発
  • #CSS
  • #HTML
に公開

どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS

画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。
開発
  • #CSS
  • #画像
に公開