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