CSS

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を使います。ショートハンドでも書けますが、とても分かりづらくなるため今回プロパティは別々に書いています。
Web制作

YouTube動画の埋め込みの際、比率を保ったまま伸縮するCSS

YouTube動画を埋め込む際、縦横比を固定したまま幅を可変にできるCSSです。