NetPaper
mie
コメントはまだありません
編集: 承認: 削除: 迷惑: 返信:
コメントを残す
コメントするにはログインしてください。
ときどきコーディングを担当しているWeb制作会社から相談を受けるのですが、例えば2009年と2011年の幅を揃えたいといったときの小技です。
このやり方がすごく良い方法とは思っていないのですが、見た目にこだわる場合はやらないよりは良いかなと。
（個人的にはこんな悩みを相談する前に、Web制作会社を名乗るのであれば、fontの選択をよく考えた方が良いと思います。）
HTMLのコード概略です。細かなところは省略しています。すみません。
私がコーディングする際は下記のようなリストにはしないような気もしますが、先日制作会社からいただいたコードは下記のようなものでした。
:
<head>
:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<style>
ol { width: 500px; margin: 10px; padding: 10px; border: 1px solid currentColor; display; inline-block; font-size: 300%; font-weight: 500; font-family: Outfit; }
li, dl { width: 500px; display: block; }
dt { width: 110px; float: left; }
dd { width: 400px; margin-left: 120px; }
</style>
:
</head>
<body>
:
<ol>
<li><dl><dt>1967</dt><dd>xxxxxxxxxxxxxxxx</dd></dl></li>
<li><dl><dt>1984</dt><dd>xxxxxxxxxxxxxxxx</dd></dl></li>
<li><dl><dt>2005</dt><dd>xxxxxxxxxxxxxxxx</dd></dl></li>
<li><dl><dt>2009</dt><dd>xxxxxxxxxxxxxxxx</dd></dl></li>
<li><dl><dt>2011</dt><dd>xxxxxxxxxxxxxxxx</dd></dl></li>
</ol>
:
</body>
:
</html>Javascriptのコードです。この例ではページ読み込み完了のタイミングとwindowのリサイズイベントのタイミングで処理を行っていますが、
幅のサイズやタイマーのタイミング（duration）、実行タイミングはサイトに合うように調整してください。
<script>
(() => {
let timer;
const nodeList = document.querySelectorAll('dt');
if (!nodeList.length) return;
const fixYearWidth = (event) => {
const duration = (event.type === 'resize') ? 100 : 0;
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
document.querySelectorAll('dt').forEach((elm, i) => {
elm.removeAttribute('style');
elm.style.minWidth = '70px';
const width = elm.offsetWidth;
const yearElm = [];
elm.textContent.split('').map((num) => {
const span = document.createElement('span');
span.textContent = num;
yearElm.push(span);
});
elm.textContent = '';
yearElm.map((e) => {
elm.append(e);
});
elm.style.display = 'flex';
elm.style.justifyContent = 'space-around';
elm.style.letterSpacing = 'normal';
elm.style.flexBasis = width + 'px';
});
timer = null;
}, duration);
};
window.addEventListener('load', fixYearWidth)
window.addEventListener('resize', fixYearWidth)
})();
</script>