HTML/CSS Mac・Safariでファイルアップロードができない問題
Macにて、以下条件の際に、ウェブサイト上でファイルアップロードを行う際に、ファイル選択ができない場合があるようです。どうもSafariのバグみたいですね。 macOS10.14.6（Mojave） Safariが14.0.1ユーザー側解決...
HTML/CSS
HTML/CSS 
HTML/CSS Google日本語フォントがIEで反映されない時に確認する事
Googleフォント、非常に便利ですよね。特に明朝を使用する際に「さわらび明朝」を使用することがあります。ただ、IEのサポートがどうもされなくなったようです。GoogleフォントIEでサイトを見ると真っ白になっています。対応していない旨の表...
HTML/CSS Sassで@forを使って繰り返し処理を行う
恥ずかしながらSassで最近@forを使いました。forといえばJavaScriptやPHPで使うもんだと思ってましたが、Sassでも使えるようで、やってみました。例として、<li>が10個あって、before要素に1～10の番号を振ってい...
HTML/CSS [SnapWidget]InstagramGraphAPIを使わずに簡単に埋め込む方法
※2020/08/01更新 最新InstagramGraphAPI7.0対応版上記記事のように正式な手順を踏んでやる場合、Facebookページ作って、インスタと連動してビジネスアカウントにして、個人アカウントを管理者アカウントにして、Fa...
HTML/CSS ウェブサイト更新時にキャッシュのせいで更新されない問題を解決
「更新致しました。ご確認のほどよろしくお願いいたします。」と、お客様に報告したあと、「表示が変わってないんですが」とか言われてないでしょうか。出来る限り上記のやり取りをなくすため、キャッシュを残さないようにしましょう。パラメータをつけるCS...
HTML/CSS iPhoneでinputにテキスト入力しようとするとズームする件を解決
iPhoneで例えばお問い合わせフォームなどの入力を行おうとして、テキストボックスをタップしたときに、ズームされる場合があります。これは、iOSで入力フォームのフォントサイズのデフォルト値が16pxに設定されているためです。そのため、inp...
HTML/CSS 古いウェブサイトに手を加える際はまずmetaタグを見る
リニューアルするような予算もやる気もないサイト、よくあります。そんな古ーいウェブサイトを更新する際には注意が必要な時があります。IEでflexが効かない！ググって解決方法試しても全然ダメ！metaタグでIEのレンダリングモードを指定している...
HTML/CSS 親要素から子要素をはみ出して画面幅いっぱいにする方法
下の画像の【A】を親要素からはみ出して横幅を画面幅いっぱいにしたい、というときには、以下CSSを適用します。<div class="c-box--1"> <div class="c-box--1__child">はみ出したい子要素</div...
HTML/CSS SVG画像を背景指定した際にサイズ指定が反映されない場合の解決方法
SVG画像を背景に設定し、CSSでbackground-sizeを指定しても反映されない場合は、以下コードをSVGファイルの<svg>タグに追記すると解決します。preserveAspectRatio="none"SVG画像、超便利ですよね...
HTML/CSS Google Material Iconsの使い方と疑似要素で使う方法（IE11対応）
Googleが提供しているアイコンフォトで、Google Material Iconsというものがあります。Fontawesomeが登録制となってしまったので、登録とかの手間が面倒だという方は、ちょっと数が少なめですがこちらを使うのもよいか...