HTML/CSS

HTML/CSS

Gridレイアウトのアイテム配置

.demo{ display: grid; text-align:center; } .grid1{ grid-template-columns:rep...
HTML/CSS

gridレイアウト 基本の作り方

.flex{ display: flex; flex-wrap: wrap; justify-content: space-betw...
HTML/CSS

画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
HTML/CSS

position:stickyが効かない原因

最初は通常のレイアウト配置(static)、スクロールすると指定の絶対位置に固定され(fixed)、次のsticky要素が来ると相対位置に固定(abs...
HTML/CSS

backgroundをショートハンドで指定する

関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。 今回は背景に関するbackgroudのショートハンド指定につい...
HTML/CSS

vertical-alignが効かない人は多分勘違いしている

知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。 私がcss独学を初め...
HTML/CSS

○○以外を指定する :notセレクタ

久しぶりにセレクタの話です。 「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる ...
HTML/CSS

ホバーボタンの作り方とサンプル集

マウスホバー(マウスが対象の上にのったとき)時に変化をつけるホバーボタン。キーボードアクセシビリティを考えると:focusも同様に書いておくべきです...
HTML/CSS

flexアイテムのサイズを決める grow shrink basis

「flexの超基本レイアウト」・「flexの基本レイアウト」・「flexレイアウト その3」 と続いてきたflexレイアウトの話も今回が最後です...
HTML/CSS

Smartyでpreg_replaceを使うときはregex_replace【備忘録】

2020年にsmartyの記事を書くとは思いませんでしたが、ネットショップASPではsmartyを使っているところもあるから仕方ないのです。SEO+テン...
HTML/CSS

backgroundの複数指定と重なり方と位置指定

.demo{ display:flex; width: 100%; text-align:center; flex-wrap:wrap; justif...
HTML/CSS

表示領域に合わせたスクロールが簡単に実装できるscroll-snap

scroll-snap-typeは、指定の位置でスクロールをぴたっと止める働きをするプロパティです。縦横どちらの方向にも使えるので、モバイルのUIやスライド作成などに応用できる便利なプロパティです。mandatory(強制)、proximity(近接)いずれかの指定したスクロール挙動になります。
タイトルとURLをコピーしました