CSS

Web制作

Yu Gothic UIで一部の記号が重なって見える

ウェブサイトのフォントにYu Gothic UIが適用されてしまっている場合、Microsoft Edge環境では「」、【】、『』などの記号同士や、・と「」が組み合わさった場合に文字同士が重なって見えることがあります。
Web制作

【Swiper】ズームしながらフェードで切り替わるスライダーを実装する

JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。
Web制作

【SASS】文字列を置換する

SASSで文字列の置換をしたい場合、SASSには文字列の置換に関する関数が存在しないため次のような関数を自分で定義して代用します。
Web制作

【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ (スクロール連鎖防止)

モーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロールし始めてしまいます。「overscroll-behavior」にcontainまたはnoneを指定することで、スクロール連鎖を止める事ができます。
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です。
Web制作

【CSS】色々なセレクタの指定方法まとめ

よく使うものからちょっとマイナーなものまで、いざというときのためにセレクタの指定方法をまとめました。CSSはセレクタ(どの要素の)、プロパティ(何を)、値(どのように)の3つの要素で構成されています。
Web制作

最初、最後、○番目を指定するCSSまとめ

複数並んだ要素のうち一部だけスタイルを変えたいときは、-child系もしくは-of-type系の疑似クラスで条件を絞って指定することができます。
Web制作

背景だけ親コンテナをはみ出して幅いっぱいになるCSS

中身はコンテナ内に残しつつ、背景は画面幅いっぱいに伸ばしたい場合border-imageを使います。ショートハンドでも書けますが、とても分かりづらくなるため今回プロパティは別々に書いています。