WEBサイト制作の技術シェア

今回伝えたいこと

今回私がシェアしたい技術は、サイトの主役（メインコンテンツ）としても使えて、ちょっとした自分用のメモ（おまけ要素）としても大活躍しそうな予感の万能なノートブック型デザインです。HTML、CSS、少しだけJavaScriptを組み合わせるだけで、触ってスクロールしたくなる楽しい仕掛けが作れる魅力をお伝えします。

テーマを決めた背景

今作っているポートフォリオサイトの参考サイトや、以前ご紹介したWEBサイトでも使用していた、このカードの中身だけが動くツールに目が留まりました。画面をすっきり見せつつ、触った時にちょっとした楽しさがあるデザインがとても気になり、自分のポートフォリオサイトにもぜひ取り入れて作って見たいと強く思ったことが、今回のテーマを選んだ背景です。

技術内容

良い１日を
お過ごし下さいませ。

Have a nice day!

お気に入りのカフェを紹介します。
川内町にあるAGRI CAFE COMODO（アグリカフェコモド）です。
ホットサンドが特に好きです。

2026年7月24日(金)

WEBサイト制作の技術シェア発表*^u^*

特に難しかった所

最後の罫線とノート幅の調整です。
英語が外枠から見えない所に隠れたり、罫線が途切れたり、スクロールが2重に出たり、お気に入りタブと連動していたので、直すとお気に入りタブの方がスクロールしなくなったりしました。最終的に専用クラス名をつけて、「!important」で修正したのですが、多用してしまった為、AIに聞いて使わないでいい方法に修正しました。
そして、ここにメモしたら流れて読みにくい事に気づき、ストップボタンを追加しました。

メモ帳

タブの切り替え用javascript

function switchTab(index) { // 1.「タブボタン」と「ノートの中身」 const buttons = document.querySelectorAll('.tab-button'); const contents = document.querySelectorAll('.tab-content'); // 2. すべてのボタンから「active」を消す buttons.forEach(button => button.classList.remove('active')); // 3. すべての中身を一度隠す contents.forEach(content => content.classList.remove('active')); // 4. クリックされた番号のボタンと中身だけに「active」をつける buttons[index].classList.add('active'); contents[index].classList.add('active'); }

このノートブック型デザインの最大のポイントは、CSSの「overflow」という機能を使って、外側の枠はそのままに、中身のノートだけスイスイとスクロールして読めるようにした点です。さらに、上のタブをクリックすると、javascriptが裏側で「active」という目印を瞬時に切り替え、1つのノートの中で3つの異なるページをパチパチとめくって読める楽しい仕掛けを実現しました。
AIに指示した流れとしては、
「枠の中にスクロールしてノートみたいにしたい」
→自動に流れるノートになる。
→「手動でスクロールするようにしたい」「ノートにタブを付けて広げたい」
と何度も試行錯誤を繰り返して完成しました。特に難しかった所は、最後の罫線とノート幅の調整です。英語が外枠から見えない所に隠れたり、罫線が途切れたり、スクロールが2重に出たり、お気に入りタブと連動していたので、直すとお気に入りタブの方がスクロールしなくなったりしました。
最終的に専用クラス名をつけて、「!important」で修正したのですが、多用してしまった為、AIに聞いて使わないでいい方法に修正しました。

style.css

/* ノートの外枠 */
.notebook-frame {
  width: 240px;
  height: 400px;
  background-color: #fffbf0;
  border: 2px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 一体化するアクティブタブ */
.tab-button.active {
  background-color: #fffbf0;
  color: #333;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

課題点

課題点ですが、AIのコードのコピペは出来るだけしないようにしたり、意味を教えてもらいながらするように心がけていますが、今回はAI（gemini）8：自分2くらいの割合で、ほぼ頼りっきりだったので、自分でAIに頼らずともコードを入力したらこうなると理解できるように努力が必要だと思いました。コードで動いた瞬間は楽しいので、その気持ちを大切にコードと向き合っていこうと思いました。