css – ページ 2 – モノグサにお灸

【CSS】FlexboxとPositon:Fixedを使って要素を中央固定表示する方法

開発bootstrap,css2018.8.23（2018.8.27）

CSSである要素を中央に固定して表示するには、表示したい要素の高さ分をtopから差し引く、という方法が良く用いられます。しかし、これは要素の高さを予め決定しておく必要があります。もし高さが可変する場合はjQueryを…

開発bootstrap,css2018.7.31（2018.8.21）

bootstrap等のボタンの色をインラインスタイルで指定しようとした場合、ホバー時（:hover）の色指定は出来ません。数個であれば直接CSSを更新すれば良いのですが、数が多いと面倒です。そのような際は、 <…

開発css2018.7.22（2018.7.22）

aタグの中にFont Awesomeのアイコンフォントと文字列を入れると、標準状態で、こんな感じになります。でも、見た目としてはやっぱりアイコンの下に下線が入るのは不格好。で、そういうときは、 .fa:before{…

Flexでレイアウトを作るのが便利なので、多様しているのですが一点不可解な現象を確認しました。それは、「Flexで作成したボックスの中にGoogleアドセンスのレスポンシブ広告を配置しても表示されない」ことです。 …

開発css2018.2.10（2018.2.10）

CSSのcontentプロパティはこれまで、beforeやafter等の疑似要素を扱う際に .box:before{ content: ''; position: absolute; top: 5px…

CSScombは、予め設定したルールに従ってスタイルシートを整形・プロパティ毎にソートしてくれるツールです。 http://csscomb.com/ 例えば .style{margin-left:0px; backgro…

開発css2017.10.4（2017.10.4）

幅広くてデザイン的にちょっと頂けないブラウザのスクロールバー。これをカスタマイズするにはjQueryのプラグインjQuery custom content scrollerをよく使うのですが、 http://manos…

開発css2015.4.7（2015.4.7）

https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/ ウィンドウサイズを縮小すると行ごとに1つのカラムにまとめて…

開発chrome,css2014.4.24（2014.4.24）

メモ：特定のエリア内でマウススクロールを停止したいのだけど（埋め込んだGoogle Map上でスクロールした際に、ページスクロールせずにGoogle Mapのズームのみ有効になる）、下記のようにしてもうまくいったりいか…

開発css,js,WordPress2014.1.15（2014.1.15）

Foundationフレームワークがver.5になって実装されたOff Canvas機能を使いたいな、と思いまして、何気なく.jsと.cssを置き換えました。（cssもver.4ではボタンのデザインが少々野暮ったい感じ…