nlog

とめどなく流れるよだれ

CSS 関連の記事を眺めて

ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック - コリス

つい最近考えることがあった。パスの入力ミスや影響範囲の確認漏れはないほうが良いけど、絶対ないとは言い切れない。そういったときにリンク切れ画像にスタイルを定義しておけば余計に慌てずに済む。

CSS のポイントとしてはブラウザが標準で出してくるリンク切れ画像を擬似要素で置換してる点かな。これだけで見栄えがどっと変わる。リンク切れ画像は置換要素で外部からリソースが読み込まれるため、疑似要素が通常使えないみたいなので、スタイルを当てるときは注意が必要。

 

CSS Grid — Responsive layouts and components - Medium

縦横比の違う画像を上から順に敷き詰めたグリッドのつくり方解説。各ステップにイメージが差し込まれていてわかりやすいから、時間のあるときに試してみる。

 

コーディングをするときに鼻血がでるほど便利なwebツールリスト(随時更新予定) - Qiita 

書いたコードをさっと確認したいとき、コードレビュー中にコンパイル結果が知りたいときがあるから、SassMeister はきっと役に立つ。

 

5000人に聞いた、2018年最先端のフロントエンドツールはこれだ - Qiita

いくつか新しく知ったデータがあった。

  • Stylus、PostCSS の使用経験がある開発者はそれなりにいるが、現在利用している CSSプロセッサーは Sass が断トツ多い。これは一回他のプリプロセッサーに心変わりしたけどやっぱり Sass に戻ってきたのか、これから試そうとして他のプリプロセッサーを見ているのかどっちだろう。多分前者だと思っている
  • フレームワークは Bootstrap が一番人気。ついでカスタム(自社フレームワーク?)。他には Foundation、Materialize、Bulma、Semantic UI、Pure CSS が使われている

CSS Gridベースのを作成できるジェネレーター・「CSS Grid Layout Interface Builder」 - kachibito

CSS グリッドのジェネレーター。あの難解なコードを書くのはつらいから、セルのサイズなどを決めて配置したい複雑なレイアウトをつくるのに重宝しそう。