スクロール量に応じて、要素を特定の位置に固定表示する方法をご紹介します。 数年前は、Javascriptを利用して、スクロールの量に応じてCSSのposition fixedを付け外しするような事をやっていましたが、position stickyを利用すると簡単に実装することが出来ます。 こちらにPosition Stickyのデモを作成しました。 メディアなどでよく見かけるような、スクロールしてもサイドバーが固定表示されるUIです。 position stickyとはMDN Web Docs によると、下記のように説明されています。 包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱

WordPressなどのCMSでクライアント側がアップロードした縦長、横長、どんな画像サイズでも、枠内に納めて対応させたい時があります。 そんな時に便利なのが「object-fit」プロパティです。 「object-fit」プロパティを使うと画像を中央で切り取る取ることができ、任意の枠内に縦横比を保ったまま納めることができる大変便利なプロパティです。 しかしこのobject-fitプロパティは、IEやEageには対応してないみたいです。Internet Explorerなんてどうでもいいなんて言わずにIEくんにもちゃんと対応させてあげましょう IEにobject-fitを対応させる方法 まずやり方ですが二通りあります 1.object-fit-imagesを使う ①ofi.jsの読み込み ②CSSの書き換え ③objectFitImages();関数の起動 2.fitie.jsを使う ①f

CSSのメディアクエリーで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。 概要 CSSで Internet Explorer 10, Internet Explorer 11 の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリーを利用することで、CSSの記述のみで Internet Explorer 10, Internet Explorer 11 でのスタイルを指定できます。 書式 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { ...(IEで適用する スタイル) }

なんてことでしょう！ 自分がインターネットエクスプローラーを使わないとはいえ、仕事だったらこんなミスは・・・っていうか、手抜きはしないと思うけど。 IE（インターネットエクスプローラー）でのアイコンフォント（合字）の対応が抜けてたーーー！ ふと、何の気なしに立ち上げたIE・・・ きっと、虫の知らせだね。 アイコンフォントでページの重さを解消！ソーシャルバー作成 なんだか巷で話題のアイコンフォントを使ってみました。 きっかけは、いつも参考にさせていただいているウェブシュフさんの以下の記事。 【WordPress高速化日記】アイコン画像を全てアイコンフォントにした 【WordPr more... ただし、IE9以下では（WindowsXPの方はほとんどIE9以下でしょう）、下図の様に表示されてしまいます。 もし、IE10以上なのに、ご覧のページでページ上に「home」とか「twitter」とか

みなさん、こんにちは。どんぶラッコです。 HTML/CSSでページを作成している時の最大の敵。それは Internet Explorer です。 ＼こんにちは／ 私も直近の案件で苦しみました。。 こんな悲劇を繰り返さないためにも、IE対応をする中で特に注意するべきポイントをまとめておこうと思います！ まさに苦しんでいる方、一緒に頑張りましょう！！

いまどきIEだけ崩れてるなんてないだろ〜 ... ＿人人人人人人人人人人人人人人人人人人＿ ＞　 IEはGoogle Fonts 非対応　 ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣ CSS hack を使用する 弊社はほとんどの案件でブラウザ対応は最新版というありがたい環境だが、 それでもIEは崩れたりすることがある。 一番致命的なのがGoogle Fontsによる Webフォントが使用できないことだ。 条件付きコメントはIE9までしか対応できないため、 最新ブラウザなのにcss hackという古い手法に頼るというよく分からない状態になる。

ブラウザごとに切り替える方法〇〇〇〇〇の所に指定したブラウザの変数を入れる。 <?php if (○○○○○) : ?> // ○○○○○のブラウザのみ表示 <?php else: ?> // その他のブラウザに表示 <?php endif; ?>chromeの場合は <?php if ($is_chrome) : ?> // ○○○○○のブラウザのみ表示 <?php else: ?> // その他のブラウザに表示 <?php endif; ?>各ブラウザの変数chrome$is_chromeFirefox$is_geckoIE$is_IEIE(mac)$is_macIEIE(windows)$is_winIEsafari$is_safariopera$is_operaiPhone safari$is_iphone 大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

2020.07.18 2020.12.05 IEでも使いたい！polyfillを使えばIE11でも使える便利CSS 4選 + 1 CSS JavaScript

前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対

先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge

まずはIEユーザーの方へ 万が一、IEユーザーがこのページにアクセスされたときのために。 Googleが開発した世界で一番使用率が高いChromeをオススメします（Edgeでも構わないんですけど）。軽いし、表示崩れなんて起きませんよ？ この機会にブラウザの乗り換えなんてどうでしょうか？ 下記サイトからタダでダウンロードできます。

Windows7を使用している自分のパソコンを使用しているが、Internet Explorer11をイジリ過ぎて訳が分からなくなったので、再インストールする事にいたしました。 アンインストールは、コントロールパネル→プログラムと機能→インストールされた更新プログラムを表示→ Internet Explorer 11を選びアンインストールすれば、問題無くアンインストール出来ました。 さて、今度はスタート→すべてのプログラム→Windows Update→利用可能なすべてのプログラムを表示　ここで「Windows7向け Internet Explorer 11」を選択し、ダウンロードまでは順調でしたが、エラーが出てしまいインストール出来なくなってしまいました。 タイミングの問題かな？と思い、再度インストールを実行しても結果は一緒で更新失敗・・・・。 詳細を表示させると、エラーの詳細 エラーコ

ちょいとテストマシンをIE8にする必要があったので一度IE9〜11をアンインストールし、テスト完了後に改めてIE11をインストールしたらエラーが発生。 あれこれ調べて試して失敗して・・・というのを延々繰り返していたら、解決するまで数時間もかかった。。。orz ということで今後のために備忘録としてまとめておこうかと。 何せ、この手のトラブルは毎回微妙に原因が異なるというか、同じエラーコードでも原因と対応が多すぎて非常に厄介で、今回無駄になった対応も今後は役に立つかもしれないので。 ■環境 Windows 7 64bit SP1（MacのParallels環境下） ■発生したエラー ・IE11をWindows Updateから実行したら「9C59」エラーが発生 ・C:\Windows\IE1_main.logに書かれていたエラーコード Neutral package installation

PC初心者が有名なマルウェアであるhao123を入れてしまうメカニズムがちょっと分かったので書き留めておく。 サンプルはセットアップしたばかりのWindows7パソコン。CPUはCore i5だがそれでもIEは重い。ブラウザをGoogle Chromeに入れ替えようとしてスタートページのMSN（検索エンジンはbing）から「chrome」を検索。 すると広告のトップに出てくるのは「www.download786.com」。いかにもなサイトだ。 ダウンロードのリンクは fastdownloadsoftw.areserver18.s3-eu-west-1.amazonaws.com/softwares/binary/504405/810823cbb5f742196e7fa1a65d5853b4d2580195/google-chrome_setup.exe 一応chromeのセットアップexe

インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる