SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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)のデザインの時などでは、ページ内リンクの移動位置を調整しないと、固定表示したヘッダに肝心の移動先が隠されてしまうのですが、回避する方法はないでしょうか。 答え(1) 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 […]