WEB製作

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/2/3

IE11でテーブルの枠線が消えるバグの対処方法

IE11でテーブルの枠線が消える 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては ・tdタグに背景色をつけていた ・tdタグにposition:relativeをつけていた この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。 開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。 サンプルコード この場合、tdにposition:re ...

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.点線の下線をつけるテストな ...

no image

WEB製作

2020/11/19

保護中: ギャラリー

この投稿はパスワードで保護されているため抜粋文はありません。

CSS

2021/2/8

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

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

メディアクエリ(Media Queries)が効かないときに確認したいこと

CSS

2020/7/12

メディアクエリ(Media Queries)が効かないときに確認したいこと

メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため(イレギュ ...

スクロールしたらCSS3のグラフがアニメーションするようにする方法

CSS

2020/7/12

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...

WEB製作

2020/7/12

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

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

WEB製作

2020/7/12

【WordPress】使っているサーバーのPHP,MySQLのバージョンを確認する方法

「WordPress」を使っているときに、PHP,MySQLのバージョン情報を知りたいときがあります。 調べる方法は色々ありまして、一番カンタンなWordPressプラグインを使った方法からご紹介します。 プラグイン「SERVER INFORMATION」をインストールする メニュー >  プラグイン >新規追加を押します。 検索フォームに「server info」を入力して「サーバー情報」のプラグインをインストールして 「今すぐインストール」のボタンを押します。 ボタンの表示が「有効化」に変わったら 「 ...

WEB製作

2020/7/12

【WordPress】「AFFINGERタグ管理マネージャー2」を使っていてcrawl-66-249-79-112.googlebot.comでハマる。

クリック率計測でログのcrawl-66-249-79-112.googlebot.comでハマる WordPressテーマでAFFINGERを使っているのですが、AFFINGERの便利なプラグインに「AFFINGERタグ管理マネージャー2」というプラグインがあります。 「AFFINGERタグ管理マネージャー2」を使うと、WordPressショートコードで記事内容を一括管理できます。 アフィリエイト向けで記事作成をしている場合に、同じ内容の文章を10,20記事と書いているとき、緊急で修正しないといけなくなる ...

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