リンクをコピーしました

HTML・CSSの意外と知らないテクニックとは?

Suite WEB 編集部

Suite WEB 編集部

  • Facebook
  • Twitter
  • LINE
  • はてなブックマーク
  • Pinterest
  • LinkedIn
  • note
  • クリップボードにコピー

HTMLとCSSのテクニックをご紹介

HTMLやCSS、エンジニアなら使用するのが当たり前のスキルですが、意外とまだまだ知らない小技やテクニックが存在します。ちょっとしたテクニックを知っているだけで開発を効率化できたり、より簡単に機能を実装できるようになります。Javascriptでなければ実装できないと思っていたことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行っていきましょう。

今回は、HTMLとCSSの小技やテクニックをご紹介します。

スマートフォンでのタップした時の「aタグのハイライト」を無効にする

スマートフォンでボタンやリンクをタップした時、デフォルトだとその要素が押された感をユーザーにフィードバックするためのハイライト表示が行われませんか?これはブラウザが自動的に表示させているものであり、サイトデザインによってはこのハイライトがかえって邪魔だったりします。
そこで、-webkit-tap-highlight-colorプロパティを使用すれば、ハイライトを無効にすることができます。

.class {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

スマートフォンでのスクロールを滑らかにする「惰性スクロール」

iOS ではページ全体のスクロールはなめらかですが、要素内のスクロールはカクカクします。そこで、対処方法として-webkit-overflow-scrolling: touchを指定するというのがあります。-webkit-overflow-scrollingのCSSプロパティは、指定された要素で惰性付きのスクロールを使用するかどうかを制御することが可能です。

.class {
  -webkit-overflow-scrolling: touch;
}

ダークモード(Dark Mode)に対応する

実はWebページもダークモードに対応できます。最近、様々なOSが次々とダークモードに対応していますよね。ダークモードへの対応には、レスポンシブデザインでおなじみの@mediaメディアクエリを使います。prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: #fff;
  }
}
  • Facebook
  • Twitter
  • LINE
  • はてなブックマーク
  • Pinterest
  • LinkedIn
  • note
  • クリップボードにコピー