カテゴリー: FRONTEND

とある案件で、iframeで読み込んで表示させるページにCSSを適用させる必要がありました。 読み込まれている方のページのHTMLを書き換えることが出来るのであれば、全く問題は無いのですが、今回のケースはGoogleカレンダーの埋め込み。読み込むHTMLを書き換えたり出来るはずがありません。 で、調べてみたら、どうやらjQueryをつかうことでiframeで …

新規サイトのコーディングをする度に、「今度こそはキレイなメンテナンス性の高いCSSを書こう、そのためには設計からしっかりと」と思い、その都度BEM等の設計手法を取り入れようと試みますが、結局は実践しないまま作業に入っています。 中途半端に導入して、途中で「やっぱりやめた」というのが一番面倒くさくなるのは感覚的にわかっているので、それであれば最初から従来通りの …

MicrosoftのブラウザEdgeでの表示時、ページ内に電話番号（と、電話番号っぽい数字の羅列）が記載されていると、勝手にリンクが貼られてしまいます。 今回はそのリンクを無効にする方法をご紹介します。 方法(1)番号を囲むタグで制御 1つ目の方法としては、下記のような記述でリンクを無効にすることが出来ます。 <p x-ms-format-detect …

WEBページやサイトでフォームをコーディングしていて、普通にCSSを書いていても、iPhone（iOS）環境ではinputボタンにCSSが反映されません。 そんなときの解決方法を紹介します。 iPhoneでのinputボタンにCSSを適用させるCSS -webkit-appearanceプロパティの値をnoneにすることで、iPhone独自のスタイルを無効化 …

レスポンシブ対応でサイトやページを制作するとき。問い合わせ先の電話番号を記載することがよくあると思います。 PCでの表示時は電話番号を記載するだけで良いですが、スマホ表示のときはその電話番号をタップすることで電話をかけられるようにしたい。 今回は、そんなときにつかえるCSSを紹介します。 実装方法 例えば、下記のようなコードがあるとします。 <a hr …

WordPressの私的チートシートに引き続き、今回はHTML/CSSのチートシートです。 基本的には個人的に最低限必要なものを記述したHTMLとCSSのテンプレートを用意しておいて、新規コーディング時にはそれを使い回しています。そして、気づいた点や追記したいものがあった時は忘れないようにすぐにアップデートするようにしています。 HTML 基本 宣言などの絶 …

<li>を横並びにして中央寄せにする方法は良く紹介されていますが、縦並びのまま中央寄せにする方法となるとどうでしょう。 使う場面は中々少ないかも知れませんが、覚えておいて損は無い方法かと思います。普段メモ代わりにしているドキュメントに残っていたのですが、僕自身どんな場面で調べたのか全く覚えていません。ただ久しぶりに見返してみると意外と「なるほど」 …

ちょっとしたアイコンなんかであれば画像よりも使い勝手の良いSVG。フリーでつかえるファイルも今や色々公開されていて、僕もサイト制作時にはよく使います。 一点だけ難点があるとすれば、hover時の色の変更でしょうか。javascriptをつかった方法や、HTMLに直接SVGコードを記述する方法等、色々な方法がありますがどれも一筋縄ではいかない感じです。 そんな …