リンク

CSS

2021/2/17

position: stickyが効かない、IE11対応

position: stickyが効かない、IE11対応 結論 ・親要素全てのoverflow属性値をvisibleに変更する ・IE11はそもそも「position: sticky」が効かないのでstickyfill.jsのライブラリを使用 position: stickyが効かない場合の解決方法【CSS】 - termina.ioを参照した。 親要素全てのoverflow属性値をvisibleに変更する。 この状態になっているかどうか?はディベロッパーツールのコンソールを開き $(".stickyをつ ...

CSS

2021/2/16

disabledにしたチェックボックスのデザインを変更する方法

disabledにしたチェックボックスのデザインを変更する方法 結論 ・disbaledを適応させたときのチェックボックスのデザインはブラウザに依存するため背景色を変えたりチェックマークを変えたりすることは不可能。 ・CSSの「appearance: none;」を使って チェックボックス自体を見えなくしてから before,after要素でチェックボックスのデザインを指定することは可能。 ・「appearance: none;」が効かないIE11ではこの手法は使えない。 「appearance: non ...

CSS

2021/2/13

右クリック禁止処理サイトでhtmlソースを確認する方法

右クリック禁止処理サイトでhtmlソースを確認する方法 WEBサイト修正依頼が来た時に,「右クリック禁止処理」がされているサイトほど嫌なものはないです。 手間が何重にも増えますしね。 右クリック禁止処理サイトでもhtmlソースを見ることはできます。 Google Chromeを使います。 結論 ・Google Chromeのディベロッパーツールを使用する ・URLの頭に「view-source:」をつけて確認する このどちらかを使います。 ・Google Chromeのディベロッパーツールを使用する 右ク ...

CSS

2021/3/25

ヘッダーが追尾するメニューのアンカーリンク用CSS

ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。 そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない… 飛ばした先が意図せず隠れてしまっている!! ということが起こります。 よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。 サンプルコード See the Pen ヘッダーが追尾するメニューのアンカーリン ...

© 2021 さくらいらぼWEB版 /個人ブログ