CSS

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

2018/09/11(Tue) 09:56

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。

https://coliss.com/articles/build-websites/operation/css/stretched-link-clickable.html

CSS GridとFlexboxでの実装で役立つ！各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート

2018/09/10(Mon) 09:57

CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ？ という時用にブックマークしておくと便利です。

https://coliss.com/articles/build-websites/operation/css/grid-and-flexbox-cheatsheets.html

【HTML】CSSで要素を横並びにする方法(floatとdisplayの使い方を解説)

2018/08/28(Tue) 09:54

「要素を横並びに配置したいんだけど、レイアウトが崩れてしまう。」「floatだけだと、使い勝手が悪い。他に横並びの方法はないのだろうか。」

https://creive.me/archives/13552/

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

2018/08/28(Tue) 09:54

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。

https://coliss.com/articles/build-websites/operation/css/css-techniques-responsive-images.html

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック

2018/08/23(Thu) 09:51

CSS Flexboxも、margin: auto;も、よく使用していると思います。しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。

https://coliss.com/articles/build-websites/operation/css/css-flexbox-and-auto-margins.html

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

2018/08/21(Tue) 09:59

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html

CSS Snippets #7

2018/08/17(Fri) 11:12

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。

https://www.nxworld.net/tips/css-snippets-7.html

CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin）

2018/08/16(Thu) 10:06

CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。

https://www.nxworld.net/tips/css-text-truncate.html

保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

2018/08/10(Fri) 09:51

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。

https://coliss.com/articles/build-websites/operation/css/alignment-in-css-with-flexbox.html

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

2018/08/09(Thu) 09:54

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？

https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html