Web制作 CSSでtableの空のセルに斜線を引く 空のセルに対して斜線を引きたい場合、table td:emptyセレクタとCSSのグラデーション機能(linear-gradient)を利用すると便利です。 2024.11.09 Web制作
Web制作 CSSでスクロールバーのデザインをカスタムする .scroll-areaをスクロールバーが出る要素とした場合の例です。 基本的には::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumbで設定できますが、Firefoxは対応していないためFirefox用のみ別で指定しています。 2024.11.03 Web制作
Web制作 【HTML・CSS・JavaScript】aタグのリンクを無効にする aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。 単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。 2024.10.26 Web制作
Web制作 【CSS】flexboxでflexコンテナからflexアイテムがはみ出る場合の対策 display; flex;を指定した際、flexコンテナ(親要素)からflexアイテム(子要素)がはみ出てしまうときは、flexアイテムに対してそれぞれ下記の指定をしてあげます。 2024.10.14 Web制作
Web制作 【CSS】クラス名やid名を前方一致・後方一致・部分一致で指定する CSSのセレクタの指定方法で、前方一致・後方一致・部分一致を使用したい場合の書き方です。 クラス名やid名、hrefなどの属性セレクタ―に使用できます。 2024.09.13 Web制作
Web制作 Yu Gothic UIで一部の記号が重なって見える ウェブサイトのフォントにYu Gothic UIが適用されてしまっている場合、Microsoft Edge環境では「」、【】、『』などの記号同士や、・と「」が組み合わさった場合に文字同士が重なって見えることがあります。 2024.07.18 Web制作フォント
Web制作 【Swiper】ズームしながらフェードで切り替わるスライダーを実装する JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。 2024.04.09 Web制作
Web制作 【SASS】文字列を置換する SASSで文字列の置換をしたい場合、SASSには文字列の置換に関する関数が存在しないため次のような関数を自分で定義して代用します。 2024.02.09 Web制作
Web制作 【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ (スクロール連鎖防止) モーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロールし始めてしまいます。 「overscroll-behavior」にcontainまたはnoneを指定することで、スクロール連鎖を止める事ができます。 2023.10.30 Web制作