見出し画像

なんとしても楽をしたいフロントエンドエンジニア ズボラコーディング#2

エンジニア のん｜COMMA Inc.

こんにちは。
株式会社COMMA のんです。

ズボラシリーズ第2弾
今回は、Webサイト制作の時に
・よく使うのに！
・わかってるのに！
・つい調べてしまうもの！

そんなコードについて紹介していきます。

ズボラシリーズ第一弾　前回の記事はこちら

【 過去記事紹介 】
初心者でもなんとかなる
Shopifyのテーマ「Dawn」を使ったカスタマイズ



hover処理の小技

hoverの処理、ただ単に@hover って書いたらいいんでしょ
と、思っていた時期もありました。

スマホなど、タッチスクリーンの画面ではこの処理はいらないので
オフにしないといけないですよね。

ちょっと面倒で、手間なので以下のコードで対応しています。

a {
    transition: 0.5s;

    @media (hover: hover) {
        &:hover {
            opacity: 0.5;
        }
    }
}

※こちらはSCSSの記述になります。

この書き方をすると、PCなどのマウスやポインターなどのホバーできる環境でのみ処理がされ、
スマホなどのタッチスクリーンでは、ホバー処理がされない
というのが簡単にできます。

画像のレスポンシブ対応

imgタグを二つ用意して、クラスで出しわけする方法もあるのですが、
最近はこの方法をもっとも多く使用しています。

今回はPC表示で750*500、SP表示で330*330の画像を
HTMLだけで、ブレイクポイントで画像を切り替えてみました。

<picture>
 <!-- SP時：〜768px -->
 <source srcset="/img/sample_330-330.jpg" media="(max-width: 768px)">
 <!-- PC時：769px〜 -->
 <img src="/img/sample_750-500.jpg" alt="PCの画像">
</picture>

768px以下と769px以上で、画像を出し分けしています。
iPad miniのサイズが768pxなのと、タブレットのシェア率が最小768pxらしいので、768pxからはSP表示になるようにしました。

また、サイトを軽量化したい時に手っ取り早い方法としては画像の軽量化です。Webpの画像を使用すると、1枚の画像が軽くなるので最近はWebp形式の画像を使うサイトも多いと思いますが、ブラウザによっては表示されないらしい…。（まだ、表示されないブラウザに出会ったことがない）
ほとんどのブラウザでは、表示されるみたいなのですが、
稀に古いブラウザだと、表示されないことがあるようです。

 <picture>
  <!-- 【PC】ブラウザ幅 769px～から最大幅まで sampleの画像が表示 -->
 <source srcset="/img/sample_330-330.webp" media="(min-width: 769px)" type="image/webp">
 <!-- 【SP】ブラウザ幅 最小〜768pxまで sample2の画像が表示 -->
 <source srcset="/img/sample_330-330.jpg" media="(max-width: 768px)" type="image/jpg">
 <!-- 上2枚が表示されなかった場合に表示される画像 -->
 <img src="/img/sample_330-330.jpg" alt="代替テキスト">
</picture>

その時は上記のようにして対応できます。
PCのみwebpを使用する想定で、webpが表示されない場合はjpgの画像を表示させるようになっています。
SPはjpg画像のみの指定です。

sourceタグは複数書くことも可能で、
PC→タブレット→SPで３種類画像を変えたい場合なんかも、
上から順番に同じ要領で書いていけばそれぞれのブレイクポイントで画像の出しわけが可能になります。


それぞれ、制作するWebサイトによって、適宜ブレイクポイントを変えてみてくださいね。

無料相談を受け付けています

私の所属する株式会社COMMAでは、大手企業の制作案件から、スモールブランドの広報のお手伝いまで、業種にこだわらず多様なクライアント様とお付き合いしています。
また、代理店や制作会社との協業も多く、企画・デザインのみ、サイト構築のみといった部分的な対応も柔軟にお受けいたします。

Webサイトからは過去の制作実績を掲載した会社案内をダウンロードすることが出来ます。
弊社に興味をお持ちになりましたら、下記Webサイトをご覧ください。

また、Webサイトでは、弊社代表タムラによる無料相談を受け付けています。
・サイトをリニューアルしたいけれど、何から手をつければいいのか分からない
・SEO対策はどうすればいいのか
・SNSを始めてみたが、運用の方法が分からない

など、制作に関するお悩みをお持ちの方はお気軽にご相談ください。


いいなと思ったら応援しよう！