CSS
/* 全体設定 */
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
color: #333;
background-color: #f8f8f8;
line-height: 1.6;
margin: 0;
padding: 0;
}
.ns-container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
/* ヘッダー */
.ns-header {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 1rem 0;
}
.ns-brand {
font-size: 1.5rem;
font-weight: bold;
color: #e1306c;
}
.ns-nav__link {
color: #555;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.ns-nav__link:hover {
color: #e1306c;
}
/* ヒーローセクション */
.ns-hero {
background: url(‘https://placehold.co/1200×600/e0e0e0/000?text=Cat+Art’) no-repeat center center/cover;
color: #fff;
text-align: center;
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.ns-hero__overlay {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.ns-hero__content {
position: relative;
z-index: 1;
}
/* セクション */
.ns-section {
padding: 80px 0;
}
.ns-section–soft {
background-color: #fefefe;
}
.ns-heading {
font-size: 2.5rem;
text-align: center;
margin-bottom: 10px;
}
.ns-lead {
text-align: center;
max-width: 600px;
margin: 0 auto 40px;
font-size: 1.1rem;
}
/* カード */
.ns-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
padding: 30px;
transition: transform 0.3s, box-shadow 0.3s;
}
.ns-card–hover:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* カウンター */
.ns-counter {
font-size: 3rem;
font-weight: bold;
color: #e1306c;
}
/* 構成要素ダイアグラム */
.ns-diagram {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 40px;
}
.ns-diagram__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
font-weight: bold;
}
.ns-emoji {
font-size: 3rem;
width: 80px;
height: 80px;
line-height: 80px;
background-color: #ffe4e1;
border-radius: 50%;
}
/* CTA */
.ns-cta {
background-color: #fff;
padding: 50px 20px;
text-align: center;
}
.ns-btn {
display: inline-block;
background-color: #e1306c;
color: #fff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 1.1rem;
transition: background-color 0.3s;
}
.ns-btn:hover {
background-color: #b82a56;
}
💻 機能追加（JavaScript）
次に、サイトに動きを加えるJavaScriptです。カウンターのアニメーションとモーダルウィンドウの表示・非表示を実装します。
JavaScript
document.addEventListener(‘DOMContentLoaded’, () => {
// 1. カウンターアニメーション
const counterElement = document.getElementById(‘ns-counter’);
const targetCount = 10000;
const duration = 2000; // 2秒
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp – startTimestamp) / duration, 1);
counterElement.textContent = Math.floor(progress * targetCount).toLocaleString();
if (progress {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
document.querySelector(this.getAttribute(‘href’)).scrollIntoView({
behavior: ‘smooth’
});
});
});
// 3. モーダルウィンドウ
const modal = document.getElementById(‘ns-modal’);
const modalCloseBtn = document.getElementById(‘ns-modal-close’);
const modalBody = document.getElementById(‘ns-modal-body’);
const accountCards = document.querySelectorAll(‘.ns-account’);
// カードクリックでモーダル表示
accountCards.forEach(card => {
card.addEventListener(‘click’, () => {
const account = card.getAttribute(‘data-account’);
let content = ”;
if (account === ‘shige’) {
content = `
shige_cat_sinng
「しげちゃん」は、穏やかな表情と、ときにみせるユーモラスな仕草で多くのファンを魅了しています。飼い主さんとの深い絆が感じられる写真の数々は、見る人の心に安らぎを与えてくれます。
Instagramを見る
`;
} else if (account === ‘milktea’) {
content = `
ミルクティー色の猫物語（架空）
ミルクティーのような優しい毛色を持つこの猫は、まるで物語の主人公。日々の生活の中にある小さな冒険や、愛らしいドジっぷりが、美しい写真とともに綴られています。独特の世界観に、あなたもきっと引き込まれるはず。
アカウントは架空です
`;
}
modalBody.innerHTML = content;
modal.classList.remove(‘is-hidden’);
modal.setAttribute(‘aria-hidden’, ‘false’);
});
});
// モーダルを閉じる
modalCloseBtn.addEventListener(‘click’, () => {
modal.classList.add(‘is-hidden’);
modal.setAttribute(‘aria-hidden’, ‘true’);
});
// モーダル外のクリックで閉じる
modal.addEventListener(‘click’, (e) => {
if (e.target.id === ‘ns-modal’) {
modal.classList.add(‘is-hidden’);
modal.setAttribute(‘aria-hidden’, ‘true’);
}
});
});
これらのコードを組み込むことで、静的なHTMLが猫愛あふれるインタラクティブなサイトに生まれ変わります。特に、カウンター機能やモーダルウィンドウは、ユーザーのエンゲージメントを高めるのに効果的です。
このお手本を参考に、ご自身のサイト作りを進めてみてください。
この作成されたコードをどのようにアップしたコードに挿入していくんですか？
はい、作成されたCSSとJavaScriptを、既存のHTMLコードに挿入する方法をご説明します。
1. スタイリング（CSS）の挿入方法
CSSは、HTMLファイルの
コメント