画像の縦横比をいい感じにする object-fit【css】

CSS

経緯デザインで特定の枠に画像を収めたいというときはよくあるであろう。縦固定でwidth100%にするのか、はたまたその逆か。どちらにせよ、どちらかに大きな値が来た場合くしゃってひしゃげてしまう。大きいほうを基準に小さいほうをそろえる何かの枠に収…

#CSS #object-fit #レターボックス

2022-06-12

CSSの設計ってどうやって？【CSS】

CSS

ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎｜note 経緯 CSSの設計ってどうやってるんだろうと触ってみると思う。もともと、WindowsアプリケーションのエンジニアだとCSSとか触らない。前回の記事でU…

#CSS

2022-06-12

CSSの設計その1【CSS】

CSS

UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita 経緯 BlazorStrapというUIフレームワークにCSSを充てる方法を探していて、見つけた記事。CSSの初心者には、とても参考になる記事だった。 UIコンポーネントにはマージンをつけないというか可…

#CSS

2022-05-24

Blazorでjsを呼び出してclassを追加【C#/Blazor】

C# Blazor CSS JavaScript

経緯前回の続きで、jsっぽいことをblazorでやるんだが、あえてjsを呼び出して、blazorの意味ねーっていうことをしてみた。コード js window.jsFunctions = { test: function (xxx) { const x = document.getElementById(xxx); x.classList.add('table'); …

#C# #Blazor WebAssembly #Blazor #CSS #JavaScript

2022-05-23

classへバインドcss【C#/Blazor】

C# Blazor CSS

経緯 C#/Blazorを使ってJsっぽいことがしたい。いやいや、Jsですればいいやんって？そういう理不尽さが社会にはあるんや。コード以外と簡単やな。 <table class=@Table> <thead> <tr> <th>Date</th> <th>Temp. (C)</th> <th>Temp. (F)</th> <th>Summary</th> </tr> </thead> <tbody> @foreach (var forecast in forecasts) { <tr> <td>@forecast.Date.ToSh</td></tr></tbody></table>…

#C# #Blazor WebAssembly #Blazor