[HTML, CSS]wrapした要素を3 1ではなく2 2で並べる4つの方法(flex or grid?) display: flex とflex-wrap: wrapを使って単純に要素を複数行に並べようとすると、要素が偶数個なのにのときに1つ余ってしまう事がある ↓これを 1 2 3 4 .wrapperA { displa html-css 2023/03/13
HTML & CSS で作る 最も単純なshimmer(シマー)のサンプルコード コンテンツローディング時のストレスを軽減するとして使われているシマーのサンプルコードを掲載します。 InstagramやAmazon, Twitterなどでよく使われている、灰色背景に白いグラデーション線が動くやつです。 html-css 2022/12/09
[Webpack]ejsをhtmlに変換時、includeとsassと画像を利用する やりたいこと webpackでejsをhtmlに変換する フッターやヘッダーなどの共通部分をincludeで読み込む sassをcssに変換する 画像やフォントなどを使用する 想像以上にハマったのでテンプレートを公開する html-css 2022/07/21
inline-blockで、margin:0 auto;をしたい。 displayをblockにする代わりに、widthをfit-contentにする。 margin:0 auto; width:fit-content; display:block; 例 <div class= html-css 2021/08/18
tableの一部分の要素を引き伸ばさずに右寄せする。 例えば操作ボタンを表の右側に配置し、最小幅を保ったまま右寄せを行いたい。 普通に書いた場合 hoge.html <table> <tr> <td>KajindowsXP</td& html-css 2021/04/03
HTMLで、widthを基準に正方形を描写する方法 CSSを使い、calc(100% / 3);とすることで横幅を動的に設定することができるが、縦も連動して正方形を描くようにしたい。 方法 JavaScriptの[element].getBoundingClientRec html-css 2021/03/10