サクッと

CSS

[CSSのみ]ページ内リンク(アンカーリンク)をスクロールさせる

CSSのみでスムーススクロールする方法を紹介します。JavaScriptを使った記事はこちら。 CSS html { scroll-behavior: smooth; } 「scroll-behavior...
CSS

[CSS]SVG画像を使って波線を表現する

CSSで波線を表現したい場合「text-decoration-style: wavy;」というプロパティが用意されていますが、波線の形などを調整することができません。 そこで今回は波線をSVG画像で作成し、CSSで表示する方法です。
HTML

[サクッと]ファイルアップロード(input type=”file”)にサイズ制限を設ける

ファイルアップロード(input type="file")にサイズ制限を設ける方法です。 サンプル 上記のサンプルでは実際にアップロードされることはありません。 HTML <input type=...
HTML

[サクッと]input type=checkboxに上限を設ける[JavaScript]

複数選択可能なチェックボックスに上限を設ける方法です。 サンプル 選択肢1 選択肢2 選択肢3 選択肢4 選択肢5 選択肢6 選択肢7 HTML <input type="checkbox" name="...
CSS

[サクッと]レスポンシブ対応Youtube埋め込み[CSS]

比率を保ったままレスポンシブで拡大・縮小できるYoutube埋め込み。 サンプル HTML <div class="youtube-wrapper"> <div clas...
CSS

[CSS]文字サイズに合わせた三角形を擬似要素でサクッと作る

文字サイズに合わせた三角形を擬似要素でサクッと簡単に作る方法です。 CSS &HTML .arrow::after { content: ""; margin-left: 0.5em; display: ...
タイトルとURLをコピーしました