会社編
const kaishadata = [ { img: "img1", title: "従業員数", number: "32", unit: "名" }, { img: "img2", title: "女性従業員比率", number: "37.5", unit: "%" }, { img: "img3", title: "平均年齢", number: "35", unit: "歳" }, { img: "img4", title: "定着率", number: "100", unit: "%" }, { img: "img5", title: "年間休日", number: "124", unit: "日" }, { img: "img6", title: "月平均残業時間", number: "6.1", unit: "時間" }, { img: "img7", title: "有給取得率", number: "90", unit: "%" }, { img: "img8", title: "育休・産休からの復帰率", number: "100", unit: "%" },
{ img: "img9", title: "勤務開始時間", multi: true, rows: [ { txt: "8:00…", number: "2", unit: "人" }, { txt: "8:30…", number: "2", unit: "人" }, { txt: "9:00…", number: "6", unit: "人" }, { txt: "9:30…", number: "19", unit: "人" }, { txt: "10:00…", number: "3", unit: "人" } ] },
{ img: "img10", title: "住居地", multi: true, rows: [ { txt: "兵庫県…", number: "23", unit: "人" }, { txt: "神戸市内", number: "16", unit: "人" }, { txt: "神戸市外", number: "7", unit: "人" }, { txt: "大阪府…", number: "7", unit: "人" }, { txt: "滋賀県…", number: "2", unit: "人" } ] } ];
kaishadata.forEach(item => {
const box = document.createElement("div"); box.className = `sujidemiru-company-kaisha-box sujidemiru-company-kaisha-${item.img}`;
const title = document.createElement("div"); title.className = "sujidemiru-company-kaisha-title"; title.textContent = item.title; box.appendChild(title);
if (!item.multi) {
const number = document.createElement("div"); number.className = "sujidemiru-company-kaisha-number";
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.classList.add("sujidemiru-company-kaisha-val-svg");
const createText = (cls, text) => { const t = document.createElementNS("http://www.w3.org/2000/svg", "text"); t.setAttribute("class", cls); t.setAttribute("x", "100%"); t.setAttribute("y", "100%"); t.setAttribute("text-anchor", "end"); t.setAttribute("dominant-baseline", "ideographic");
t.textContent = text; return t; };
const createUnit = (cls, text) => { const t = document.createElementNS("http://www.w3.org/2000/svg", "text"); t.setAttribute("class", cls); t.setAttribute("x", "100%"); t.setAttribute("y", "100%"); t.setAttribute("text-anchor", "start"); // ← 左揃え t.setAttribute("dominant-baseline", "ideographic"); // ← 下揃え
t.setAttribute("dx", "8"); // ← 横だけ調整 t.setAttribute("dy", "8"); t.textContent = text; return t; };
svg.appendChild(createText("sujidemiru-company-kaisha-num-stroke", item.number)); svg.appendChild(createText("sujidemiru-company-kaisha-num-fill", item.number)); svg.appendChild(createUnit("sujidemiru-company-kaisha-unit-stroke", item.unit)); svg.appendChild(createUnit("sujidemiru-company-kaisha-unit-fill", item.unit));
number.appendChild(svg); box.appendChild(number);
} else {
const multi = document.createElement("div"); multi.className = "sujidemiru-company-kaisha-multi";
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "240"); svg.setAttribute("height", "140");
let baseY = 30;
item.rows.forEach((row, i) => {
let y = baseY + i * 26;
// デフォルト let scale = 1; let dx = 0; let dy = 0; let color = "#000";
// ===== img10専用調整 ===== if (item.img === "img10") {
// 2・3行目 if (i === 1 || i===2) { scale = 0.7; dx = 60; dy = 10+4*i; color = "#4e4e4e"; } }
// グループ(これが transform の代替) const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.setAttribute("transform", `translate(${dx},${dy}) scale(${scale})`);
const createText = (text, x, size, fillcolor = color) => { const t = document.createElementNS("http://www.w3.org/2000/svg", "text"); t.setAttribute("x", x); t.setAttribute("y", y); t.setAttribute("text-anchor", "end"); t.setAttribute("dominant-baseline", "ideographic");
t.setAttribute("font-size", size); t.setAttribute("fill", fillcolor); t.textContent = text; return t; };
const txtColor = item.img === "img10" && (i === 1 || i === 2) ? color // img10の2・3行目は元の色 : "#0062c1"; // それ以外は赤
// テキスト・数字・単位 g.appendChild(createText(row.txt, 160, "18", txtColor)); g.appendChild(createText(row.number, 210, "22"));
if (row.unit) { g.appendChild(createText(row.unit, 230, "14")); }
svg.appendChild(g); });
multi.appendChild(svg); box.appendChild(multi); } document.getElementById("sujidemiru-company-kaisha-grid").appendChild(box);
});
先輩に聞いてみた編
2026.7 更新