Web技術 【CSS・JS】モーダル：コンテンツ量が多い場合にスクロール
モーダル内のコンテンツが多く、スクロールしたい場合は以下のコードのようにコーディングすればOKHTMLの構造は同じなので運用面でも問題ない See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen...
css
Web技術 Web技術 【CSS】蛍光ペンのようなunderlineの実装方法
今回はcssで蛍光ペンのようなアンダーラインの実装方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術 【CSS】水平方向にスクロールするカードデザイン
flexとgridを使って実装するこのデザイン See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術 【CSS】CSSでテキストの上下余白を正しく計算する方法
今回は正確に上下の余白をCSSで計算する方法をメモしておく。正確ではないCSSも記載しておくので、ぜひ比較してほしい。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.また、以下のように...
Web技術 【CSS】videoタグをレスポンシブ化する方法
とあるあんけんでvideoタグをレスポンシブ化することがあったのでメモ。非常に簡単なので、是非参考にして欲しい。HTML<video controls id="video"> <source src="ファイルパス/ファイル名.mp4" t...
Web技術 【CSS】CSSのみで作るハンバーガーメニュー
ある案件でハンバーガーメニューを作成する機会があったので、メモしておく。 See the Pen RwpZLXx by 山崎毅 (@nbudjgzu) on CodePen.ベースとなる部分だけをメモしてあるので、このコードを基に色々と調整...
Web技術 【CSS】CSSのみで作るメガメニュー
ある案件でメガメニューを作成したので、メモしておく。今回はベースとなる部分のみのメモなので、好みにカスタマイズしてほしい。 See the Pen GRWvOJd by 山崎毅 (@nbudjgzu) on CodePen.
Web技術 【CSS】***行目でテキストを省略(…)にする方法
バックエンドエンジニアの方から「サーバでは文字数指定ならできるんだけど、CSSで***行目で指定できる？」という問い合わせがあったので、久しぶりに下記のCSSを使って対応した。注意して欲しいのは、必ず下記の記述を全て指定すること。対応するブ...
Web技術 【CSS】JS不要！チェックボックスを使って、モーダルを実装する方法
input typeのcheckboxを使って、モーダルを実装する方法を紹介する。JavaScriptのコーディングは不要なので、JSが苦手な人にもおすすめだ。簡単かつシンプルな、モーダルを実装したい場合は、検討しても良いだろう。表示結果 ...