FRONTEND2020.01.16.FRONTENDiframeで読み込まれているHTMLにCSSを適用させるjQueryとある案件で、iframeで読み込んで表示させるページにCSSを適用させる必要がありました。読み込まれている方のページのHTMLを書き換えることが出来るのであれば、全く問題は無いのですが、今回のケースはGoogleカレンダーの埋め込み。読み込むHTMLを書き換えたり出来るはずがありません。...2020.01.2.FRONTENDCSSの設計についての個人的意見~実際にBEM等の設計手法はどうなのか?~新規サイトのコーディングをする度に、「今度こそはキレイなメンテナンス性の高いCSSを書こう、そのためには設計からしっかりと」と思い、その都度BEM等の設計手法を取り入れようと試みますが、結局は実践しないまま作業に入っています。...2019.05.14.FRONTENDEdgeで電話番号に自動的に貼られるリンクを無効にする方法MicrosoftのブラウザEdgeでの表示時、ページ内に電話番号(と、電話番号っぽい数字の羅列)が記載されていると、勝手にリンクが貼られてしまいます。今回はそのリンクを無効にする方法をご紹介します。1つ目の方法としては、下記のような記述でリンクを無効にすることが出来ます。html2019.05.9.FRONTENDiPhoneで表示したときのinputボタンにCSSを適用させる方法WEBページやサイトでフォームをコーディングしていて、普通にCSSを書いていても、iPhone(iOS)環境ではinputボタンにCSSが反映されません。そんなときの解決方法を紹介します。iPhone2019.05.8.FRONTEND電話番号のリンクをスマホのときだけ有効にするCSSレスポンシブ対応でサイトやページを制作するとき。問い合わせ先の電話番号を記載することがよくあると思います。PCでの表示時は電話番号を記載するだけで良いですが、スマホ表示のときはその電話番号をタップすることで電話をかけられるようにしたい。今回は、そんなときにつかえるCSSを紹介します。下記のようなコードがあるとします。...css2019.05.7.FRONTENDHTML/CSSの私的チートシートWordPressの私的チートシートに引き続き、今回はHTML/CSSのチートシートです。基本的には個人的に最低限必要なものを記述したHTMLとCSSのテンプレートを用意しておいて、新規コーディング時にはそれを使い回しています。気づいた点や追記したいものがあった時は忘れないようにすぐにアップデートするようにしています。html2019.05.4.FRONTEND<li></li>を縦並びのまま中央寄せにする方法<li>を横並びにして中央寄せにする方法は良く紹介されていますが、縦並びのまま中央寄せにする方法となるとどうでしょう。使う場面は中々少ないかも知れませんが、覚えておいて損は無い方法かと思います。普段メモ代わりにしているドキュメントに残っていたのですが、僕自身どんな場面で調べたのか全く覚えていません。...css2019.05.3.FRONTENDhoverしたときのSVGの色をCSSだけで変える方法ちょっとしたアイコンなんかであれば画像よりも使い勝手の良いSVG。フリーでつかえるファイルも今や色々公開されていて、僕もサイト制作時にはよく使います。一点だけ難点があるとすれば、hover時の色の変更でしょうか。javascriptをつかった方法や、HTMLに直接SVGコードを記述する方法等、色々な方法がありますがどれも一筋縄ではいかない感じです。