4K対応ホームページの制作メモ Part1

はじめに

あくまでメモです。

この通りやっても作れないかもしれませんがご参考までに

10年後にも普通に使えるホームページ（厳密にはWordpressテーマ）を目指して、絶賛作成中です。

制作中で公開できない素材が大量にありますので、文書のみで理解してみてください。

4Kホームページを作る上で絶対に必要なもの

ただ表示させるだけなら、メモ帳だけでも作れないわけではありませんが

sass がないと、作業量が多すぎて死にます。

画像は可能な限り高解像度で入稿する

ケースバイケースにもよりますが、

PC、タブレッド向けに 横3840px

スマホ用に、縦1920px 以上 (3840pxでもよい）

で、必要な画像を作ります。

イラレみたいなツールがあるとよいかもしれません。

4Kレベルでどの端末でも快適に閲覧するには、それぞれの解像度にフォールバックできるようにしないといけません。

あいにく、サイトロゴは残念ながら ビットマップとベクトルの混合画像で入稿されました。

ベクトルだけなら、SVGにベクトルで出力して

<img src="image.svg">

ってやればいいことになりますが、

どちらでも快適に見れるように、下記のようにフォールバックせざる得ない状態でありました。

<div class="image">
	<picture>
		<source media="(min-width:2601px)" srcset="image/index/3840.png">
		<source media="(min-width:2161px)" srcset="image/index/2600.png">
		<source media="(min-width:1921px)" srcset="image/index/2160.png">
		<source media="(min-width:1681px)" srcset="image/index/1920.png">
		<source media="(min-width: 992px)" srcset="image/index/1680.png">
		<source media="(min-width: 414px)" srcset="image/index/1284.png">
		<source media="(min-width: 375px)" srcset="image/index/828.png">
		<img loading="lazy" src="image/index/750.png">
	</picture>
</div>

管理上の問題で従来の形式でURLを貼り付けますが、実際には、webpに変換してあり、.htaccessで強制的にwebpで表示されます。

解像度ありすぎのような気がしますが、適切なサイズを最小限でロードできるための配慮です。ギガ使い放題とかのスマホもありますが、超大手では完全使い放題にはなりませんので。。。

これを、以下のCSSで調整します。

.image img {
    width: 100vw;
}

残念ながら、width: 100% では動きません。
フォールバック用に設置しようかと思いますが。。。

sassで使えるふたつのCSS変数

ひとつは、sass独自の変数

ひとつは、CSS3で実装の変数です。

実はまだどうやって使い分けようかまだわかっていませんが、
ためしに、bootstrap5を見習って、以下のブレークポイントを使えるようにしてみました。

$xs: 0px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;

$sp: 0px;
$pc: 992px;
$hd2k: 1401px;
$wqhd: 1921px;
$hd4k: 2561px;
$hd8x: 3841px;

$breakpoints_min: (
	"xs": "screen and (min-width: 0px)",	/* Extra small ～575px */
	"sm": "screen and (min-width: 576px)",	/* Small 576px～767px */
	"md": "screen and (min-width: 768px)",	/* Medium 768px～991px */
	"lg": "screen and (min-width: 992px)",	/* Large 992px～1199px */
	"xl": "screen and (min-width: 1200px)",	/* Extra large 1200px～1399px */
	"xxl":"screen and (min-width: 1400px)",	/* Extra extra large 1400px～ */

	"sp": "screen and (min-width: 0px)",	/* スマホ */
	"pc": "screen and (min-width: 992px)",	/* PC */
	"hd2k": "screen and (min-width: 1401px)",	/* HD */
	"wqhd": "screen and (min-width: 1921px)",/* WQHD */
	"hd4k": "screen and (min-width: 2561px)",	/* 4K */
	"hd8k": "screen and (min-width: 3841px)",	/* 8K以上 */
);

$breakpoints_max: (
	"xs": "screen and (max-width: 576px)",	/* Extra small ～575px */
	"sm": "screen and (max-width: 767px)",	/* Small 576px～767px */
	"md": "screen and (max-width: 991px)",	/* Medium 768px～991px */
	"lg": "screen and (max-width: 1199px)",/* Large 992px～1199px */
	"xl": "screen and (max-width: 1399px)",/* Extra large 1200px～1399px */
	"xxl":"screen and (max-width: 3840px)",/* Extra extra large 1400px～ */

	"sp": "screen and (max-width: 991px)",	/* スマホ */
	"pc": "screen and (max-width: 1399px)",	/* PC */
	"hd2k": "screen and (max-width: 1920px)",	/* HD */
	"wqhd": "screen and (max-width: 2560px)",/* WQHD */
	"hd4k": "screen and (max-width: 3840px)",	/* 4K */
	"hd8k": "screen and (max-width: 9999px)",	/* 8K以上 */
);


/* media query functions */
@mixin mq($breakpoint) {
	@media #{map-get($breakpoints_min, $breakpoint)} {
		@content;
	}
}

@mixin maq($breakpoint) {
	@media #{map-get($breakpoints_max, $breakpoint)} {
		@content;
	}
}

/* Font sizes */

:root {
	--base-pixel: 16px;
	--header-font-size: 16px;
	--header-body-height: 60px;
	--header-border-size: 5px;
}

@include maq(hd4k) {
	:root {
		--base-pixel: 32px;
		--header-font-size: 32px;
		--header-body-size: 96px;
		--header-border-size: 8px;
	}
}

@include maq(wqhd) {
	:root {
		--base-pixel: 24px;
		--header-font-size: 24px;
		--header-body-size: 96px;
		--header-border-size: 8px;
	}
}

@include maq(hd2k) {
	:root {
		--base-pixel: 16px;
		--header-font-size: 16px;
		--header-body-size: 60px;
		--header-border-size: 5px;
	}
}

4Kホームページでは、要素の大きさや文字フォントの大きさに注意してみる

一般的に4Kディスプレイを使う方は、より多くの作業エリアを確保するために小さなウインドウをたくさん置くかとは思うのですが、

実際には4Kノートパソコンや4K超小型モバイルディスプレイ等の存在もあります。

それなので、おおむねフルHDと同等に表示できるよう、
画面拡張をするだけではなく、下記のようないろいろなものの調整が必要になるはずです。

・要素の大きさ
・ボーダーの太さ
・文字フォントの大きさ

ここに、sassやCSSの変数と、上記のmixinが活躍します。

晒してみる。今日の成果物

単純に容量だけを晒してみます。

FILES.txt

index.html - 19,699
script.js - 86,867
script.min.js - 29,003
script.min.js.gz - 13,075
style.css - 63,501
style.min.css - 38,649
style.min.css.gz - 8,048

※jsにはjQuery以外のライブラリをすべて結合
※CSSにはすべてのライブラリを結合