BLOG

カテゴリー: FRONTEND

2019.05.14.

Edgeで電話番号に自動的に貼られるリンクを無効にする方法

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

2019.05.9.

iPhoneで表示したときのinputボタンにCSSを適用させる方法

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

2019.05.8.

電話番号のリンクをスマホのときだけ有効にするCSS

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

2019.05.7.

HTML/CSSの私的チートシート

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

2019.05.4.

<li></li>を縦並びのまま中央寄せにする方法

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

2019.05.3.

hoverしたときのSVGの色をCSSだけで変える方法

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

2019.05.1.

どのくらいページを読み進んだかがわかるトップへ戻るボタン

CODEPENを漁っていたら面白いものを見つけました。動作的にはページのトップへスクロールしながら戻るボタンなのですが、そのページをどのくらい読み進めたかがわかるようになっています。サイトやページにちょっとしたアクセントを付けたいときに良いのではないでしょうか。あくまでトップへ戻るボタンなので、デザインの邪魔にもなりにくいと思います。 サンプル 上の説明を読 …

2019.04.29.

bootstrap4のチートシートを使って簡単にサイト制作

サイト制作において恐らく一番有名なフレームワークであろうbootstrap。これを使うことで、サイト制作にかかる時間を大幅に短縮できますし、デザイナーではなくても、ある程度のHTML、CSSの知識があれば誰でも簡単にサイトを作ることができます。 さらに、このbootstrapにはチートシートというものがあります。チートシートとはプログラマのカンニングペーパー …