CSS [CSSのみ]ページ内リンク（アンカーリンク）をスクロールさせる
CSSのみでスムーススクロールする方法を紹介します。JavaScriptを使った記事はこちら。
CSS
html {
scroll-behavior: smooth;
}
「scroll-behavior...
CSS
CSS CSS [CSS]SVG画像を使って波線を表現する
CSSで波線を表現したい場合「text-decoration-style: wavy;」というプロパティが用意されていますが、波線の形などを調整することができません。
そこで今回は波線をSVG画像で作成し、CSSで表示する方法です。
CSS [サクッと]レスポンシブ対応Youtube埋め込み[CSS]
比率を保ったままレスポンシブで拡大・縮小できるYoutube埋め込み。
サンプル
HTML
<div class="youtube-wrapper">
<div clas...
CSS [CSS]文字サイズに合わせた三角形を擬似要素でサクッと作る
文字サイズに合わせた三角形を擬似要素でサクッと簡単に作る方法です。
CSS &HTML
.arrow::after {
content: "";
margin-left: 0.5em;
display: ...
CSS [CSS]サイズが違う画像を並べ、縦横比を変えずに高さを合わせる[レスポンシブ]
サイズが違う画像を並べた時に、レスポンシブ対応で縦横比をそのままに、高さを合わせる方法に地味に躓いてしまった。いろいろ試してみた結果、不完全ながらシンプルにできる方法がありました。
サンプル
.flex {
widt...
CSS [コピペでOK!]CSSのみで作るアコーディオンメニュー[サンプル3種]
CSSのみで作るアコーディオンメニューの様々なサンプル集です。気が向いた時に追加していきます。
コード自体の詳細や解説は以下の元記事をご覧ください。
シンプル
...
CSS [CSSのみ]簡単に作れるアコーディオンメニュー
CSSのみでアコーディオンメニューを作成します。要素の高さを固定せず、レスポンシブ対応です。
サンプル集も作りました。
サンプル
この...
CSS [雑記]CSS:borderの太さをhoverで変更する時のアレコレ
borderの太さをhoverでアニメーションさせる場合に癖が強かったので、色々と試した雑記。
border要素のみ
まずはシンプルにborder要素のみ。
シンプル
...
CSS [コピペでOK!]CSSのみで作るカルーセルスライダー[2〜8枚サンプル]
CSSのみで動くカルーセルスライダーをコピペで使える様、画像枚数2〜8枚で使えるコードを用意しました！前回の記事「オートループするカルーセルスライダー」は以下の記事からどうぞ。
使い...
CSS [jQuery再現]JavaScriptとCSSで作るSlideToggleメソッドっぽいもの
素のJavaScriptでjQueryのトグルメソッドを再現します。アニメーションはCSSで行うので処理も軽いかも…？
サンプル
toggle-btn1
target1
スライドトグル実装！
...