
ウェブ制作の記事一覧
ウェブ制作のカテゴリーは、ウェブサイト制作の現場で直面するちょっと面倒なケースを解決したり、初心者向けCSSのティップスにフォーカスしています。
【CSS】input[type=”number”]の矢印を消す方法
input[type="number"] の矢印をCSSで非表示にする方法を解説。appearance: none; ではなく、ブラウザごとにベンダープレフィックスの指定が必要です。主要ブラウザ(Chrome、Edge、Safari、Firefox)での対応方法を紹介します。
ウェブ制作
2025/02/06
あのMagnific Popupに、昨年最新版がリリースされたって知ってた?
jQueryモーダルプラグインの老舗「Magnific Popup」が、実は昨年、8年ぶりにバージョンアップしていたようです。今後の保守方針や、公式が推奨するdialogタグへの移行について解説します。
ウェブ制作
2025/01/16
CSS Gridの1frでカラムがはみ出す!? 横スクロール問題をminmax()で解決
CSS Gridの1fr指定でカラムが画面外にはみ出し、横スクロールバーが表示される問題の原因と解決方法を解説。minmax()を使った対処法で、レスポンシブやウィンドウ縮小時のレイアウト崩れを防ぎます。
ウェブ制作
2025/01/15
2024年の御礼とブログ運用実績のご報告
新年あけましておめでとうございます。昨年2024年のブログ運用実績のご報告と、今年の方針についてのご案内です。
お知らせ
2025/01/01
CSSのネストの書き方:子要素以外にもこんなに幅広く使える
CSSのネストは、子要素に限らず、要素自身の擬似要素(::before / ::after)や擬似クラス(:hover)、さらにはメディアクエリまで幅広く活用できます。これらのCSSネストの書き方を、サンプルコードを交えて解説します。
ウェブ制作
2024/12/17
Grid(Flex)配下のslick.jsが、バグって横幅が異常に伸びる時の解決方法
「slick.js」でスライダーを実装した際、display: grid;やdisplay: flex;要素の配下だと、slickの横幅が異常に伸びるバグに遭遇しました。デモコードを交えつつ、その解決方法を解説します。
ウェブ制作
2024/12/02
【CSS】tableの見出しセルを文字幅に合わせる。文字の両端も揃える(スペースは使わない)
tableのセル幅を自動で文字幅に合わせ、さらに行ごとの文字の両端も揃える方法を解説します。見出しセルの幅が文字数ピッタリ、かつ文字の両端揃えが求められるテーブルデザインの場合、実際の本番データではセル内に何文字入るのか分からないため、コーディングで調整が難しいケースに汎用的に対応します。
ウェブ制作
2024/11/26
【Windows】絵文字(顔文字)の一覧を表示する方法
Windowsにはテキスト入力中に絵文字や顔文字を一覧できる「絵文字パネル」機能があります。ショートカットキーは[Windows] + [.](ピリオド)キーです。「かお」変換に代わる便利な方法です。
ウェブ制作
2024/10/16
【CSS】テキスト(文字)にグラデーションをつける方法と注意点
テキスト(文字)にCSSでグラデーションを適用する方法を紹介。background-clipとcolor: transparentプロパティを組み合わせる手法や、グラデーションが反映されない際の確認ポイントも解説します。
ウェブ制作
2024/10/09
CSSのみで作る無限ループスライダー(横方向・縦方向)。仕組みとポイントも併せて解説
JavaScript不要。カルーセルのスライダーはHTMLとCSSだけで簡単に実装できます。CSSだけで無限ループを実現する仕組みや、上手くいかない(途切れる、空白が出来る、ループ時にズレる)場合の原因を、デモを交えながら詳しく解説します。
ウェブ制作
2024/09/25
【VSCode】アクティブなタブが、毎回あちこちに飛んで混乱するので調整してみた
VSCodeのタブ制御を調整しました。タブを開いた時は常に右端に、閉じた時は直前のタブではなく右隣のタブにフォーカスが移るように変更。併せて、背景色も調整しました。今回はその方法を解説します。
ウェブ制作
2024/09/11
【Illustrator】いっつも忘れる角丸の解除方法
Adobe Illustratorで、「コーナーウィジェット」や「スタイライズ」が使われていない場合の、角丸・正円の解除方法を毎回忘れるので、いい加減に備忘録として書き留めておく事にしました。結論から言うと、「グリッドに分割(旧:段落設定)」から角丸を解除します。
ウェブ制作
2024/09/10