Web制作 Yu Gothic UIで一部の記号が重なって見える
ウェブサイトのフォントにYu Gothic UIが適用されてしまっている場合、Microsoft Edge環境では「」、【】、『』などの記号同士や、・と「」が組み合わさった場合に文字同士が重なって見えることがあります。CSSのfont-fa...
CSS
Web制作 
Web制作 【Swiper】ズームしながらフェードで切り替わるスライダーを実装する
JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。Swiperの読み込み通常通りSwiperのCSSとJavaScriptを読み込みます。<link rel="styleshe...
Web制作 【SASS】文字列を置換する
SASSで文字列の置換をしたい場合、SASSには文字列の置換に関する関数が存在しないため次のような関数を自分で定義して代用します。関数（SCSS）@function str-replace($substr, $newsubstr, $str...
Web制作 【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ （スクロール連鎖防止）
position: fixedで配置した要素の後ろの要素がスクロールしてしまうモーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロー...
Web制作 【CSSのみ】details要素とsummary要素でアコーディオンを作る
よくある質問ページやQ&A等の詳細でよく使うアコーディオンを実装する際、JavaScript（jQueryを含む）をはじめ色々な実装方法がありますが、今回はdetails要素とsummary要素を使用してCSSのみで作る方法をご紹介します。...
Web制作 【CSS/JavaScript】iOS（iPhone）でモーダルウインドウの背面をスクロール禁止にする
モーダルウインドウなど全画面表示かつ背面を固定したい場合、PCだとbodyにoverflow:hidden;を指定することでスクロールしないようにすることができますが、iPhoneで確認するとスクロールができてしまっています。なので別の方法...
Web制作 【CSS】長いテキストを三点リーダーで省略する
テキストが1行を超えたら三点リーダー表示にしたい場合や、複数行のテキストを任意の行数で三点リーダー表示にしたい場合のCSSです。テキストが1行の場合テキストが1行の場合は、text-overflow: ellipsis;を使用します。tex...
Web制作 【CSS】色々なセレクタの指定方法まとめ
よく使うものからちょっとマイナーなものまで、いざというときのための色々なセレクタの指定方法です。CSSの記述は3つの要素でできている念の為おさらいです。CSSはセレクタ（どの要素の）、プロパティ（何を）、値（どのように）の3つの要素で構成さ...
Web制作 最初、最後、○番目を指定するCSSまとめ
複数並んだ要素のうち一部だけスタイルを変えたいときは、-child系もしくは-of-type系の疑似クラスで条件を絞って指定することができます。-child系と-of-type系の違い-child系と-of-type系の疑似クラスはどちらも...
Web制作 背景だけ親コンテナをはみ出して幅いっぱいになるCSS
中身はコンテナ内に残しつつ、背景は画面幅いっぱいに伸ばしたい場合はborder-imageを使います。ショートハンドでも書けますが、とても分かりづらくなるため今回プロパティは別々に書いています。border-image-sourceで背景や...