Category / css
Bootstrap5をカスタマイズしたい
2023-09-01 問題 Bootstrapの色を変えたり、行間を変えたりしたいです。 答え Bootstrapの見た目を変える方法。 CSSを書けば済むパターン CSS変数で対応できるものは以下でよい。 :root { --bs-font […]
Bootstrap5でフォームを横並びにしたい
2022-05-10 問題 Bootstrap4では .form-inline というのでフォームの要素を横並びにできたのですが、 Bootstrap5では .form-inline, .form-row, .form-group が廃止され […]
【CSS】フェードイン、フェードアウトが汚いとき
2022-04-04 問題 モーダルやダイアログ的なものをフェードイン、フェードアウトで表示させているとき、下にある要素が上に浮き出てくることがあります。 z-index的には下のはずなのに、どうして上に出てくるのでしょう？ 答え 重ね合わせ […]
テーブルのヘッダをCSSで固定する
2020-11-17 問題 CSSの position: sticky; で table の thead を固定したいんですけど、firefoxではうまくいくのですが、chromeではうまくいかないです。 tab […]
クリックしたら選択状態にしたい
2020-03-20 問題 <span>なんとかかんとか</span> などある要素をクリックしたら、要素内のテキストを選択状態にしたいです。 答え IEを無視してよければ、CSSのみで可能。 インラインで style […]
コピペで導入 Material Icons
2020-01-06 問題 Material Icons を使いたいです。 答え 素直な方向け 通常は、素直に以下を追記でOK。 <link href="https://fonts.googleapis.com/icon?family= […]
【CSS】ページ内リンクのジャンプ先の位置を調整する
2020-01-05 問題 ヘッダ固定（position:fixed）のデザインの時などでは、ページ内リンクの移動位置を調整しないと、固定表示したヘッダに肝心の移動先が隠されてしまうのですが、回避する方法はないでしょうか。 答え（１） CSS […]
【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに…
2020-01-03 問題 特定のブラウザのみにスタイルシートを適用したいです。 IE10、IE11では条件付きコメントが効かないので別な方法が必要なのですが。 答え それぞれ以下のようにすると可能。 IEのみに適用 @media all a […]
【JavaScript】animate しないで スムーススクロール
2019-12-06 問題 jQueryのanimateなどを使わないでにゅるっとスクロールしたいです。 答え これでできる。 window.scrollTo({top: 0, behavior: 'smooth'}) IEだけ対応していない […]
Font Awesome のCSS版とJS版は何が違うの？
2019-11-11 問題 Font Awesome に、CSS版（Using Web Fonts with CSS ）とJS版（Using SVG with JavaScript、SVG版）があるけど、何が違うの？ 答え CSS版は、CSS […]
点滅させるCSS
2019-07-27 問題 CSSでアイコンなどを点滅させたいです。 答え CSSを自作すると以下のような感じ。 @keyframes Tenmetsu{ 50%{opacity: 0;}}.c-tenmetsu { animation: T […]
回転させるCSS
2019-07-21 問題 CSSでローディング用アイコンなどをくるくる回したいです。 答え CSSを自作すると以下のような感じ。 @keyframes spin { 0% {transform: rotate(0deg);} 100% {t […]
子要素にhoverやclickがあったときに親要素に反応させたい
2019-07-20 問題 ・子要素にマウスが乗ったら、親要素の色を変えたい。 ・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。 やっぱりJavaS […]
Bootstrap3からBootstrap4に移行する
2018-11-01 問題 Bootstrap3のシステムがあるのですが、Bootstrap4へはすんなり移行できますか？ 答え あるシステムでBootstrap3から4に移行したときのメモ。 変更点は多いのでやや面倒。 Bootstrapの […]
【JavaScript】jQueryの.fadeIn()をCSSで実装する
2017-12-28 問題 アニメーションはCSSにお任せしたい。 .fadeIn()とかをCSSでできませんか。 答え アニメーションはCSSにお任せすると、JavaScript側ではCSSを変更したり、classの追加、削除で済むようにな […]
【JavaScript】上にスクロールするとにゅっと出てくるメニューを作る
2017-12-27 問題 長い画面で、メニューや検索フォームなどが、近くにいて欲しいんだけど、いつも見えると邪魔。 下へ下へスクロールしてみているときは隠れていて、 上にスクロールすると出てくるメニューを作りたい。 答え stickyな動き […]
メイリオはCSSでイタリック（斜体）が効かない
2017-02-20 問題 CSSで文字が斜体になりません！ 答え メイリオではならないそうです。 https://www.microsoft.com/typography/fonts/family.aspx?FID=323 font-sty […]
【CSS】背景だけ斜めにする
2015-12-13 問題 スタイルシートで、背景だけ斜めにできますか？ 斜めに2色で区切ったりできますか？ 答え スタイルシートで回転させたりゆがめたりは可能。 transform の skew や rotate を使う。 要素全体を10度 […]
【CSS】Google+のボタンだけ位置がずれる
2015-12-08 問題 他のSNSボタンと一緒に並べると、Google Plus（G+）のボタンだけ上下位置がずれるのですが、なぜ？ 答え Google Plus のボタンは、以下のようなHTMLになっており、「vertical-alig […]
【CSS3】疑似否定クラス E:not(s)
2015-11-10 問題 諸事情で、.hogeのpre要素 <pre class="hoge">...</pre> はあるスタイルシートを適用して、class属性のない素のpre要素 <pre>...&l […]