Web制作 【CSSのみ】details要素とsummary要素でアコーディオンを作る よくある質問ページやQ&A等の詳細でよく使うアコーディオンを実装する際、JavaScript(jQueryを含む)をはじめ色々な実装方法がありますが、今回はdetails要素とsummary要素を使用してCSSのみで作る方法をご紹介します。 2023.05.12 Web制作
Web制作 【CSS/JavaScript】iOS(iPhone)でモーダルウインドウの背面をスクロール禁止にする モーダルウインドウなど全画面表示かつ背面を固定したい場合、PCだとbodyにoverflow:hidden;を指定することでスクロールしないようにすることができますが、iPhoneで確認するとスクロールができてしまっています。 なので別の方法で固定します。 2023.04.19 Web制作
Web制作 【CSS】長いテキストを三点リーダーで省略する テキストが1行を超えたら三点リーダー表示にしたい場合や、複数行のテキストを任意の行数で三点リーダー表示にしたい場合のCSSです。 2023.04.17 Web制作
Web制作 【CSS】色々なセレクタの指定方法まとめ よく使うものからちょっとマイナーなものまで、いざというときのためにセレクタの指定方法をまとめました。CSSはセレクタ(どの要素の)、プロパティ(何を)、値(どのように)の3つの要素で構成されています。 2023.02.16 Web制作
Web制作 最初、最後、○番目を指定するCSSまとめ 複数並んだ要素のうち一部だけスタイルを変えたいときは、-child系もしくは-of-type系の疑似クラスで条件を絞って指定することができます。 2023.01.28 Web制作
Web制作 背景だけ親コンテナをはみ出して幅いっぱいになるCSS 中身はコンテナ内に残しつつ、背景は画面幅いっぱいに伸ばしたい場合border-imageを使います。ショートハンドでも書けますが、とても分かりづらくなるため今回プロパティは別々に書いています。 2023.01.20 Web制作