【HTML/CSS】Worksセクション（制作実績）の作成｜簡単なポートフォリオサイトの作成
HTMLとCSSで、ポートフォリオサイトに欠かせない制作実績セクションの作り方を学びます。CSS Gridで画像をカード状に並べる方法や、box-shadowで影をつけ立体感を出すデザインを解説。マウスホバーで動くインタラクティブな表現も実装し、魅力的な実績一覧を作成します。
開発環境
- OS: Windows10
- Editor: Visual Studio Code
- HTML: 5
- CSS: 3
- JavaScript: ES6以降
サンプルコード
/assets/css/style.css
/assets/css/style.css1 font-size: 14px; 2 color: #666; 3 line-height: 1.6; 4+} 5+ 6+/* Worksセクション */ 7+#works { 8+ padding: 80px 20px; 9+ background-color: #fff; 10+} 11+ 12+.works-grid { 13+ max-width: 960px; 14+ margin: 0 auto; 15+ display: grid; 16+ grid-template-columns: repeat(3, 1fr); 17+ gap: 30px; 18+} 19+ 20+.work-card { 21+ display: block; 22+ border-radius: 8px; 23+ overflow: hidden; 24+ box-shadow: 0 4px 12px rgba(0,0,0,0.1); 25+ text-decoration: none; 26+ color: inherit; 27+ transition: transform 0.3s ease, box-shadow 0.3s ease; 28+} 29+ 30+.work-card:hover { 31+ transform: translateY(-5px); 32+ box-shadow: 0 8px 20px rgba(0,0,0,0.15); 33+} 34+ 35+.work-card img { 36+ width: 100%; 37+ height: 180px; 38+ object-fit: cover; 39+ display: block; 40+} 41+ 42+.work-info { 43+ padding: 15px 20px; 44+} 45+ 46+.work-info h3 { 47+ font-size: 18px; 48+ margin-bottom: 8px; 49+ color: #333; 50+} 51+ 52+.work-info p { 53+ font-size: 14px; 54+ color: #666; 55+ line-height: 1.5; 56 } 57
/assets/img/work1.jpg
/assets/img/work1.jpg1Binary files /dev/null and b/assets/img/work1.jpg differ 2
/assets/img/work2.jpg
/assets/img/work2.jpg1Binary files /dev/null and b/assets/img/work2.jpg differ 2
/assets/img/work3.jpg
/assets/img/work3.jpg1Binary files /dev/null and b/assets/img/work3.jpg differ 2
/index.html
/index.html1 </section> 2 3 <section id="works"> 4- <h2>Works</h2> 5- <p>これまでの制作実績を紹介します。</p> 6+ <div class="container"> 7+ <h2 class="section-title">Works</h2> 8+ <div class="works-grid"> 9+ <a href="https://example.com/project1" class="work-card" target="_blank" rel="noopener noreferrer"> 10+ <img src="assets/img/work1.jpg" alt="Project 1"> 11+ <div class="work-info"> 12+ <h3>Project 1</h3> 13+ <p>コーポレートサイトのリニューアル制作</p> 14+ </div> 15+ </a> 16+ <a href="https://example.com/project2" class="work-card" target="_blank" rel="noopener noreferrer"> 17+ <img src="assets/img/work2.jpg" alt="Project 2"> 18+ <div class="work-info"> 19+ <h3>Project 2</h3> 20+ <p>ECサイト構築およびカスタマイズ</p> 21+ </div> 22+ </a> 23+ <a href="https://example.com/project3" class="work-card" target="_blank" rel="noopener noreferrer"> 24+ <img src="assets/img/work3.jpg" alt="Project 3"> 25+ <div class="work-info"> 26+ <h3>Project 3</h3> 27+ <p>ポートフォリオサイトのデザイン・コーディング</p> 28+ </div> 29+ </a> 30+ </div> 31+ </div> 32 </section> 33 34 <section id="contact"> 35
コード解説
変更点: Worksセクションの基本的な構造を追加
/index.html1 </section> 2 3 <section id="works"> 4- <h2>Works</h2> 5- <p>これまでの制作実績を紹介します。</p> 6+ <div class="container"> 7+ <h2 class="section-title">Works</h2> 8+ <div class="works-grid"> 9+ <!-- この中に制作実績カードが入ります --> 10+ </div> 11+ </div> 12 </section> 13 14 <section id="contact">
Webページに「Works（制作実績）」セクションを追加します。まず、<section>タグでセクション全体を囲み、id="works"という名前を付けています。このidは、後でCSSからデザインを適用したり、ページ内リンクで移動したりする際の目印になります。
内部には、コンテンツを中央揃えにするための<div class="container">と、セクションのタイトルである<h2 class="section-title">Works</h2>を配置しています。さらにその中に、これから作成する制作実績カードを並べるための親要素として<div class="works-grid">を用意しました。この要素にCSSでGridレイアウトを適用することで、カードをきれいに整列させます。
変更点: 制作実績をカード形式で追加
/index.html1 <h2 class="section-title">Works</h2> 2 <div class="works-grid"> 3+ <a href="https://example.com/project1" class="work-card" target="_blank" rel="noopener noreferrer"> 4+ <img src="assets/img/work1.jpg" alt="Project 1"> 5+ <div class="work-info"> 6+ <h3>Project 1</h3> 7+ <p>コーポレートサイトのリニューアル制作</p> 8+ </div> 9+ </a> 10+ <a href="https://example.com/project2" class="work-card" target="_blank" rel="noopener noreferrer"> 11+ <img src="assets/img/work2.jpg" alt="Project 2"> 12+ <div class="work-info"> 13+ <h3>Project 2</h3> 14+ <p>ECサイト構築およびカスタマイズ</p> 15+ </div> 16+ </a> 17+ <a href="https://example.com/project3" class="work-card" target="_blank" rel="noopener noreferrer"> 18+ <img src="assets/img/work3.jpg" alt="Project 3"> 19+ <div class="work-info"> 20+ <h3>Project 3</h3> 21+ <p>ポートフォリオサイトのデザイン・コーディング</p> 22+ </div> 23+ </a> 24 </div> 25 </div> 26 </section>
3つの制作実績をカードとして追加しました。各カードは<a>タグで全体が囲まれており、クリックすると実績の詳細ページへ移動できます。target="_blank"はリンクを新しいタブで開くための属性で、rel="noopener noreferrer"はセキュリティ対策として推奨される設定です。
カードの中は、<img>タグで実績の画像を表示し、<div class="work-info">の中にプロジェクト名(<h3>)と説明文(<p>)を配置しています。alt属性は、画像が表示されない場合に代わりに表示されるテキストで、アクセシビリティの観点からも重要です。
変更点: 表示用の画像ファイルを追加
/assets/img/work1.jpg1Binary files /dev/null and b/assets/img/work1.jpg differ
/assets/img/work2.jpg1Binary files /dev/null and b/assets/img/work2.jpg differ
/assets/img/work3.jpg1Binary files /dev/null and b/assets/img/work3.jpg differ
制作実績カードで表示するための画像ファイル（work1.jpg, work2.jpg, work3.jpg）を/assets/img/フォルダに新しく追加しました。
Binary files ... differという表示は、テキストではなく画像などのバイナリファイルが新たに追加されたことを示しています。
変更点: Worksセクション全体の余白と背景色を設定
/assets/css/style.css1+} 2+ 3+/* Worksセクション */ 4+#works { 5+ padding: 80px 20px; 6+ background-color: #fff; 7+}
HTMLで追加したWorksセクションに、CSSでデザインを適用します。#worksセレクタは、id="works"が指定された要素を対象とします。
padding: 80px 20px;は、セクションの内側に余白を設定するプロパティです。上下に80px、左右に20pxの余白が作られ、他のセクションとの間に適切なスペースが生まれます。
background-color: #fff;は、セクションの背景色を白（#fff）に設定しています。
変更点: CSS Gridを使って制作実績カードを横に3つ並べる
/assets/css/style.css1+} 2+ 3+.works-grid { 4+ max-width: 960px; 5+ margin: 0 auto; 6+ display: grid; 7+ grid-template-columns: repeat(3, 1fr); 8+ gap: 30px; 9+}
HTMLでカードの親要素として用意した.works-gridにスタイルを適用し、カードをきれいに並べます。
max-width: 960px;とmargin: 0 auto;を組み合わせることで、コンテナの最大幅を960pxに制限し、画面中央に配置します。
レイアウトの核となるのがdisplay: grid;です。これにより、子要素（実績カード）をグリッド状に配置できるようになります。
grid-template-columns: repeat(3, 1fr);は、列の定義です。「利用可能な幅を均等に3分割した列（1fr）を3つ作成する」という意味で、これによりカードが横に3つ並びます。
gap: 30px;は、グリッドのアイテム（カード）間の隙間を上下左右すべて30pxに設定します。
変更点: カードの基本的なデザインを適用
/assets/css/style.css1+} 2+ 3+.work-card { 4+ display: block; 5+ border-radius: 8px; 6+ overflow: hidden; 7+ box-shadow: 0 4px 12px rgba(0,0,0,0.1); 8+ text-decoration: none; 9+ color: inherit; 10+ transition: transform 0.3s ease, box-shadow 0.3s ease; 11+}
制作実績カード（.work-card）自体の見た目を整えます。
display: block;は、<a>タグをブロック要素として扱うための設定で、これにより幅や高さ、余白を正しく設定できるようになります。
border-radius: 8px;でカードの四隅を少し丸くし、柔らかな印象を与えます。
overflow: hidden;は、この角丸からはみ出した子要素（画像など）を隠すために必要です。
box-shadowはカードに影をつけ、立体感を演出します。ここでは、少し下に（4px）、少しぼかした（12px）、薄い黒色の影（rgba(0,0,0,0.1)）を設定しています。
text-decoration: none;でリンク特有の下線を消し、color: inherit;で文字色を親要素から引き継ぐことで、リンクのデフォルト色（青）を打ち消しています。
transitionは、後述するホバー時のアニメーションを滑らかにするための設定です。
変更点: カードにマウスを乗せたときのアニメーションを追加
/assets/css/style.css1+} 2+ 3+.work-card:hover { 4+ transform: translateY(-5px); 5+ box-shadow: 0 8px 20px rgba(0,0,0,0.15); 6+}
カードにマウスカーソルを乗せた（ホバーした）ときの動きを定義します。:hoverは、要素がホバー状態のときに適用されるスタイルを指定する擬似クラスです。
transform: translateY(-5px);は、要素を垂直方向（Y軸）に-5px移動させます。これにより、カードが少し上に浮き上がるような視覚効果が生まれます。
box-shadowは、通常時よりも影を少し濃く、広く設定しています。これにより、浮き上がった効果がより強調されます。
これらの変化は、先ほど.work-cardに設定したtransitionプロパティによって0.3秒かけて滑らかに実行されます。
変更点: カード内の画像のサイズと表示方法を調整
/assets/css/style.css1+.work-card img { 2+ width: 100%; 3+ height: 180px; 4+ object-fit: cover; 5+ display: block; 6+}
カード内の画像（.work-card img）のスタイルを設定します。
width: 100%;で画像の幅をカードの幅いっぱいに広げ、height: 180px;で高さを180pxに固定します。
このままだと画像の比率が崩れてしまう可能性があるため、object-fit: cover;を指定します。これは、画像の縦横比を保ったまま、指定した幅と高さの領域を完全に覆うように画像を拡大・縮小し、はみ出た部分を切り取るプロパティです。これにより、どんなサイズの元画像でもきれいに表示できます。
display: block;は、imgタグが持つ特有の隙間を取り除くためのおまじないとしてよく使われます。
変更点: カード内のテキスト情報のデザインを調整
/assets/css/style.css1+} 2+ 3+.work-info { 4+ padding: 15px 20px; 5+} 6+ 7+.work-info h3 { 8+ font-size: 18px; 9+ margin-bottom: 8px; 10+ color: #333; 11+} 12+ 13+.work-info p { 14+ font-size: 14px; 15+ color: #666; 16+ line-height: 1.5; 17+}
カード下部のテキスト情報部分（.work-info）の見た目を整えます。
まず、.work-info自体にpadding: 15px 20px;を設定し、テキストとカードの縁との間に適切な余白を作ります。
次に、プロジェクト名である.work-info h3の文字サイズを18pxに、下の説明文との間に8pxの余白を設け、文字色を濃いグレー（#333）に設定します。
最後に、説明文である.work-info pの文字サイズを14pxに、文字色を少し薄いグレー（#666）に、そして行の高さを文字サイズの1.5倍（line-height: 1.5;）に設定し、読みやすさを向上させています。
おわりに
お疲れ様でした。今回はHTMLで制作実績セクションの骨格を作り、CSSを使ってデザインを整える方法を学びました。CSS Gridのdisplay: gridを使えば、実績カードを簡単に横並びに配置できます。さらに、box-shadowで影をつけて立体感を演出し、:hoverとtransformを組み合わせることで、マウスを乗せると浮き上がるようなインタラクティブな表現も実装しました。これらの技術はポートフォリオサイトを魅力的に見せるために非常に重要なので、ぜひ繰り返し練習して身につけてください。