SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

Category / css

コピペで導入 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 […]

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 […]

【CSS3】画像を白黒写真にする(グレースケール、モノクロ、セピア調…)

2015-06-16 問題 画像をCSSでモノクロ写真にできますか? 答え IEでfilterのサポートがなくなってうまくいかない。 FirefoxはurlでSVGを指定したらCSSで対応できる。Webkit系は簡単な記述で対応できる。 .g […]

【CSS3】くるくる回る星

2015-06-15 問題 くるくる回る星ください! 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。 <span […]

【CSS3】くるくる回る星(マウスオーバーで)

2015-06-14 問題 くるくる回る星ください!マウスオーバーで! 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。 […]

【CSS】背景だけ半透明にしたい

2015-06-06 問題 opacityで半透明にすると、半透明にした要素の中身全部が半透明になっちゃう。 文字などは半透明にしないで、背景だけ半透明にしたい。 答え background-colorをrgba指定するとこんな感じになる。 […]

twitter bootstrap 3 で横幅をめいっぱい広げたいとき

2014-01-05 問題 bootstrapって、Extra small devices Phones (

twitter bootstrap3 を とにかく手軽に始められる雛形

2013-12-25 問題 twitter bootstrap3 やってみたいんですけど。 twitter bootstrap3 都度都度ダウンロードしてくるのめんどくさい。 twitter bootstrap3 もうちょっとサクッと使えない […]