CSS

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 ヘッダーが追尾するメニューのアンカーリン ...

CSS

2020/12/27

【CSS】リストタグに点下線を敷く実践的な使い方

久しぶりにつまずいたのでメモ。 before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。 下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるので。 【CSS】リストタグに点下線を敷く実践的な使い方 spanタグからはじめることで、リストの頭につける「リスト項目要素のマーカー(list-style-type)」には下線が付きません。 html A.点線の下線をつけるテストな ...

CSS

2021/2/8

フローティングバナーをCSS作る【Web制作】

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては ・position: fixed,bottom:0;の指定 ・z-indexの指定 の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。 z-indexは大きい値が上に表示されます。 ...

WordPress初心者講座

2019/9/4

WordPressの自作ショートコードに引数をわたす方法を攻略!

管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法

WordPress

2021/2/7

WordPressにstyle.css以外の自作cssを追加したいときに試す方法を攻略!

管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法

WEB製作

2020/7/12

【Web制作】IE11でFlexboxが横並びにならなくてハマる

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ...

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