フレックスボックスとバックグラウンドイメージ・発展問題

JavaScriptを学習する際、全くのプログラミング未経験者なら、
四則演算から挑戦すると良いかも知れません。
四則演算はプログラミングの基本であり、
JavaScriptという言語を覚えるには、手っ取り早い手段であると言えるからです。

JavaScriptは主に、
条件に応じてCSS(要素のスタイル属性)を書き換える為に用いられます。
スムーズにJavaScriptを編集するには、CSSのプロパティの性質を、
一通り把握しておく必要があります。

JavaScriptのメソッドと呼ばれる機能を使い、
CSSのプロパティの値を自由に書き換えられるようになれば、
JavaScript中級者です。

CSSは、CSS単体で学習するよりも、JavaScriptと並行して学習した方が、
効率的ですが、個人的にCSSはプロパティの種類の膨大さから、
「終わりのない学習」だと実感させられます。

単純に比較は出来ない
(そもそもCSSとJavaScriptはオーバーラップしている)ものの、
CSSの方が格段に難しく感じます。
また、CSSとJavaScriptでは、得意不得意な面もあります。

今回は①フレックスボックス②バックグラウンドイメージを応用して、
何が出来るか解説したいと思います。

作ったもの
HTML
CSS
1. フレックスボックス
2. バックグラウンドイメージ
JavaScript

作ったもの

HTML


<div class="pupil">
    <div class="inner"></div>
</div>

CSS


.pupil{
	background-color:palegreen;
	display:flex;
	justify-content: space-around;
	align-items: center;
}

.pupil .inner{
	background-size: cover;
	background-position: center center;
	background-image:url("https://mf-ken.com/note/wp-content/uploads/2023/09/dd75c2621eaa927891bfb80b14858a1d.png");
	clip-path:circle(50% at 50% 50%);
	/* 'border-radius: 50%;'でもOK */
}

フレックスボックス

‘justify-content’および’align-items’は、
フレックスボックス(‘display:flex;’)に付属するプロパティで、
‘justify-content’は水平方向の要素の揃え方を、
‘align-items’は垂直方向の要素の揃え方を設定しています。

バックグラウンドイメージ

今回はimgタグを直接使わず、div要素に対し、
‘background-size: cover;’を設定しています。
‘background-size: cover;’は、要素の右上を基点に、
要素の短辺の方を画像に合わせます。
要素からはみ出た部分は切り取られます。

‘background-position’は、それぞれ横方向(x軸)、
縦方向(y軸)の位置を指定しています。
ただし、数学の関数とは、y軸の正負が逆になっています。

値が’center center’であれば、難しい計算をせずとも、
画像の左右または上下の中央をトリミングしてくれます。

JavaScript


const pupil = document.querySelector(".pupil");
const inner = pupil.querySelector(".inner");

function ReSizing(a){
  const screen_w = window.innerWidth || document.documentElement.clientWidth;
  const mag = 0.3;
  /* ウィンドウの横幅に対する比率 */
  
  const size = screen_w * mag;
  /* ".inner"要素の最大値 */
  
  pupil.style.height = size + "px";
  inner.style.height = size * (1 - a/300) + "px";
  inner.style.width = size * (1 - a/300) + "px";
  /* ".inner"要素の縦横比は1:1に揃えられる */
  /* 値aが0に近づくほど、".inner"要素が拡大される */
}

function Detection(target){
  const top = target.getBoundingClientRect().top;
  const screen_h = window.innerHeight || document.documentElement.clientHeight;
  const pupil_h = pupil.offsetHeight;
  const point = top - (screen_h / 2) + (pupil_h / 2);
  /* ".inner"要素の垂直方向の中点を基準とした距離を計算 */

  return Math.abs(point);
  /* 絶対値で返す */
}

function Scroll(){
  const a = Detection(pupil);
  if(a < 300){ReSizing(a);}
  else{ReSizing(300);}
  /* 引数は0～300の間にする */
}

const img = new Image();
img.src = "https://mf-ken.com/note/wp-content/uploads/2023/09/dd75c2621eaa927891bfb80b14858a1d.png";
img.onload = function() {Scroll();}

window.addEventListener("scroll",Scroll);
window.addEventListener("resize",Scroll);