【超便利！】コーディングが捗る、今すぐ使いたい！HTMLタグやCSSプロパティ

2022年5月25日2023年10月26日

※本ページは、アフィリエイト広告を利用しています。

6月にIE（internet explorer）のサポート終了に伴って、これまで便利なのに使えなかったHTMLタグやcssプロパティを使える様になります！
Web制作に携わる人（特にコーダーにとっては）大変嬉しいです！

そこで今回は、これからメインで使っていけるであろうHTMLタグやcssプロパティ、個人的に便利！！と感じているものをご紹介していきます！（IE終了関係ないものもご紹介します！）

この記事書いているひと↓

ちい

ちい（@tsrupiyooo）です。
未経験から独学でWeb制作を学び現在コーダーとしてWebサイト制作をしている主婦です！

画面幅によって表示する画像を切り替える！<picture>タグ

ちい

<picutre>タグを使うと、HTMLだけで画像の表示切り分けができます！

<picture>タグでできる事！

・ブラウザの幅に応じて表示させる画像を切り替える
・ブラウザが対応していない画像形式の場合、違う画像を出すことができる（Webpなど）
・IEは非対応

↓デモページを見てもらうと、ブラウザ幅を切り替えることで画像の色が変わります。
800px以上の場合は水色、ブラウザ幅が800px以下になると赤になります。

デモを見る

■コード例

<picture>
  <source srcset="ここにウィンドウサイズ８００px以上の時に表示したい画像URL" media="(min-width: 800px)"/>
  <img src="上記以外の時に表示したい画像URL（今回の場合はウィンドウサイズ８００px以下）" alt=""/>
<picture>

*media=”(min-widht:〇〇)”の〇〇部分は適時変更して使用できます。

<picture></picture>で複数の<source>タグと <img>タグを囲んで使用します。
例えば次のような場合も便利です！

Webpを使いたいけど対応していないブラウザの時はpngで表示したい‥

<picture>
  <source srcset="/demo.webp" type="image/webp"/>
  <img src="/demo.png" /><!-- ブラウザがwebpに対応していない場合に表示 -->
<picture>

<source>に指定した画像が最優先されます。
<source>は１つだけでなく複数設定ができ、１番上に書いたものが最優先されます！

JavaScript使わない！アコーディオンが実装できる。details/summaryタグ

ちい

HTMLだけでアコーディオンを実装することができます！

<ditails>と<summary>タグでできる事！

・アコーディオンや折りたたみメニューが作れる
・JavaScriptは使わずできる
・IEは非対応

See the Pen <ditails>と<summary>タグ by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

■コード例

基本これだけでOKです！

<details>
    <summary>アコーディオン見出し</summary>
    <p>中身のコンテンツ</p>
</details>

三角の矢印は元からついているのでcssで外すことができます！
最初からアコーディオンを開いておきたい時は<details>に「open」属性を指定してください！

→<details open>

もうちょっと装飾したり、動きをフワッとさせたい

そんな時も調整ができます！以下例です。

See the Pen <summary>css装飾 by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

■少し解説

・▼を消す
この場合は以下のようにブラウザごとに指定が必要です

/* Chrome、Safari以外 */
summary {
  display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

・アコーディオンが開いている時のスタイルだけ変える
details[open]としてあげると、アコーディオンが開いてる時だけ背景色を変えたり、矢印の向きを変えたりすることができます。今回はアコーディオンが開いてる時だけ色を青にしています。

/* オープン時のスタイル */
details[open] summary {
  background-color:　blue;
}
details[open] summary:before {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

最大値と最小値を設定できる！clamp関数

ちい

clamp関数を使うと1行で最大値と最小値を設定できます！

clamp関数の特徴

・clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中で1つが採用される。
・最小値に指定した数値よりも推奨値が大きい場合は推奨値を採用する
・最大値に指定した数値よりも推奨値が小さい場合は推奨値を採用する
・IEは非対応

■コード例

font-size: clamp(最小値, 推奨値, 最大値,);

どんな時に使うの？

ちい

私はよくfont-sizeに指定して使っています！そうするとPCからSPに移行するときに極端に文字が小さくなったり大きくなたりせずスムーズになります！

See the Pen clamp関数 by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

■少し解説

font-size: clamp(20px, 3vw, 40px)

上記のコード部分が重要で、今回のデモでは最小フォントサイズが20px、最大が40px、その間は推奨値がのサイズが最小値よりも大きく、最大値よりも小さければ採用されます。

デモページはこちらです↓

デモページ

アスペクト比率を設定できるaspect-ratio

ちい

これまで「padding-top」などで指定していたところを「aspect-ratio」で代用できるようになります！

aspect-ratioでできる事！

・レスポンシブしても画像や要素の比率を保つことができる
・aspect-ratio: widht / height ; と書くだけ！
・IEは非対応

■コード例

aspect-ratio: 　16 / 9 ;

上記のように書くと16:9のアスペクト比が保たれます。

See the Pen aspect-ratio by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

デモページはこちらです↓

デモページ

簡単にモーダル作れる？<dialog>タグ（番外編）

ちい

<dialog>タグと簡単なJavaScriptでモーダルウィンドウを作れます

<dialog>タグでできる事！

・モーダルウィンドウが作れる
・JavaScriptはほぼ定型文なので簡単
・IE・Firefox・Safariはまだ非対応、実務ではまだ使えなさそう

See the Pen ダイアログタグ by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

■コード例

<dialog><!--ダイアログで囲んでいるところがモーダルの中身です-->
 <p>こんな感じでモーダルが出てきます</p>
  <button id="close">閉じる</button>
</dialog><!--ダイアログで囲んでいるところがモーダルの中身です-->
<button id="open">開く</button>

let dialog = document.querySelector('dialog'); // dialog（モーダルダイアログ）の宣言
let btn_open = document.getElementById('open'); // open（開く）ボタンの宣言
let btn_close = document.getElementById('close'); // close（閉じる）ボタンの宣言
btn_open.addEventListener('click', function() { 
  // 開くボタンをクリックした場合の処理
  dialog.showModal();
}, false);
btn_close.addEventListener('click', function() {
  // 閉じるボタンをクリックした場合の処理
  dialog.close();
}, false);

モーダルには画像も入れられます！

See the Pen dialog画像バージョン by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.

もう少しWebサイトで使用しても違和感ないようにしたい！

See the Pen Untitled by ちい🐥継続力×Web制作 (@tsurupiyoo) on CodePen.