HTML/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の複数指定と重なり方と位置指定

当サイトの検索クエリを見てみると、書いていない「background-attachment」が入っており、どうやら「linear-gradientの基...
HTML/CSS

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

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

グラデーションを繰り返すrepeating-linear-gradient

「repeating-linear-gradient:グラデーションの繰り返し 」と聞くと、linear-gradientとbackground-repaet...
HTML/CSS

transformプロパティ(変形)で出来ること・まとめ

移動・回転・拡大など、要素を変形させられるtransformプロパティ。transitionやanimationプロパティと併用することで、アニメーシ...
HTML/CSS

flexレイアウト その3

flexレイアウトの第3回です。前回までが基本の内容でしたので、ここから少しずつ発展した内容になります。 前回、前々回は以下のリンクから。 とり...
HTML/CSS

テーマ要素はCSS変数(カスタムプロパティ)で一括指定する

実際にサイトを作る際、セクションごとにfont設定がバラバラということはまずないでしょうし、色についてもメインのテーマカラー、補色でサブカラー、反対色でアクセ...
HTML/CSS

CSSアニメーションを作る その1【基本編】

CSSで作るアニメーションには@keyframesを使います。一見すると難しそうにみえますが、transitionプロパティを知っている人なら至って簡...
HTML/CSS

変化する時間と量を指定するプロパティtransition

transitionで簡単なアニメーション効果を作る input:checked やマウスホバー、:focusなどで要素を変化させるとき、変化時間と変化...
タイトルとURLをコピーしました