【HTML/CSS】Skillsセクション（技術スタック）の作成｜簡単なポートフォリオサイトの作成
HTMLとCSSで、ポートフォリオサイトに使えるスキル一覧セクションの作り方を解説します。CSS Grid Layoutで全体を2カラムにレイアウトし、Flexboxでアイコンとテキストを横並びに配置する方法を学びます。box-shadowを使った、見栄えの良いカードデザインのテクニックも紹介します。
開発環境
- OS: Windows10
- Editor: Visual Studio Code
- HTML: 5
- CSS: 3
- JavaScript: ES6以降
サンプルコード
/assets/css/style.css
/assets/css/style.css1 .about-text p { 2 margin-bottom: 16px; 3 line-height: 1.8; 4+} 5+ 6+/* --- Skillsセクション --- */ 7+#skills { 8+ padding: 80px 20px; 9+ background-color: #f5f5f5; 10+} 11+ 12+.section-title { 13+ font-size: 28px; 14+ text-align: center; 15+ margin-bottom: 50px; 16+} 17+ 18+.skills-list { 19+ max-width: 960px; 20+ margin: 0 auto; 21+ display: grid; 22+ grid-template-columns: 1fr 1fr; 23+ gap: 30px; 24+ list-style: none; 25+ padding: 0; 26+} 27+ 28+.skills-list li { 29+ background-color: #fff; 30+ border: 1px solid #ddd; 31+ padding: 20px; 32+ border-radius: 8px; 33+ box-shadow: 0 2px 8px rgba(0,0,0,0.05); 34+ display: flex; 35+ align-items: flex-start; 36+ gap: 20px; 37+} 38+ 39+.skill-icon img { 40+ width: 48px; 41+ height: 48px; 42+ object-fit: contain; 43+} 44+ 45+.skill-text h3 { 46+ font-size: 18px; 47+ margin-bottom: 10px; 48+ color: #333; 49+} 50+ 51+.skill-text p { 52+ font-size: 14px; 53+ color: #666; 54+ line-height: 1.6; 55 } 56
/assets/img/icon-html.png
/assets/img/icon-html.png1Binary files /dev/null and b/assets/img/icon-html.png differ 2
/assets/img/icon-js.png
/assets/img/icon-js.png1Binary files /dev/null and b/assets/img/icon-js.png differ 2
/assets/img/icon-react.png
/assets/img/icon-react.png1Binary files /dev/null and b/assets/img/icon-react.png differ 2
/assets/img/icon-wp.png
/assets/img/icon-wp.png1Binary files /dev/null and b/assets/img/icon-wp.png differ 2
/index.html
/index.html1 </section> 2 3 <section id="skills"> 4- <h2>Skills</h2> 5- <p>得意なスキル一覧をここに記載します。</p> 6+ <div class="container"> 7+ <h2 class="section-title">Skills</h2> 8+ <ul class="skills-list"> 9+ <li> 10+ <div class="skill-icon"> 11+ <img src="assets/img/icon-html.png" alt="HTML"> 12+ </div> 13+ <div class="skill-text"> 14+ <h3>HTML / CSS</h3> 15+ <p>レスポンシブ対応やアニメーションを含めたWebサイトのコーディングが可能です。</p> 16+ </div> 17+ </li> 18+ <li> 19+ <div class="skill-icon"> 20+ <img src="assets/img/icon-js.png" alt="JavaScript"> 21+ </div> 22+ <div class="skill-text"> 23+ <h3>JavaScript</h3> 24+ <p>スライダーやモーダル、タブ切り替えなどの動的UIを実装できます。</p> 25+ </div> 26+ </li> 27+ <li> 28+ <div class="skill-icon"> 29+ <img src="assets/img/icon-wp.png" alt="WordPress"> 30+ </div> 31+ <div class="skill-text"> 32+ <h3>WordPress</h3> 33+ <p>オリジナルテーマの作成やカスタマイズが可能です。</p> 34+ </div> 35+ </li> 36+ <li> 37+ <div class="skill-icon"> 38+ <img src="assets/img/icon-react.png" alt="React"> 39+ </div> 40+ <div class="skill-text"> 41+ <h3>React</h3> 42+ <p>Webデザインの作成や、他メンバーとの連携を意識した設計ができます。</p> 43+ </div> 44+ </li> 45+ </ul> 46+ </div> 47 </section> 48 49 <section id="works"> 50
コード解説
変更点: SkillsセクションのHTML構造を作成
/index.html1 </section> 2 3 <section id="skills"> 4- <h2>Skills</h2> 5- <p>得意なスキル一覧をここに記載します。</p> 6+ <div class="container"> 7+ <h2 class="section-title">Skills</h2> 8+ <ul class="skills-list"> 9+ <li> 10+ <div class="skill-icon"> 11+ <img src="assets/img/icon-html.png" alt="HTML"> 12+ </div> 13+ <div class="skill-text"> 14+ <h3>HTML / CSS</h3> 15+ <p>レスポンシブ対応やアニメーションを含めたWebサイトのコーディングが可能です。</p> 16+ </div> 17+ </li> 18+ <li> 19+ <div class="skill-icon"> 20+ <img src="assets/img/icon-js.png" alt="JavaScript"> 21+ </div> 22+ <div class="skill-text"> 23+ <h3>JavaScript</h3> 24+ <p>スライダーやモーダル、タブ切り替えなどの動的UIを実装できます。</p> 25+ </div> 26+ </li> 27+ <li> 28+ <div class="skill-icon"> 29+ <img src="assets/img/icon-wp.png" alt="WordPress"> 30+ </div> 31+ <div class="skill-text"> 32+ <h3>WordPress</h3> 33+ <p>オリジナルテーマの作成やカスタマイズが可能です。</p> 34+ </div> 35+ </li> 36+ <li> 37+ <div class="skill-icon"> 38+ <img src="assets/img/icon-react.png" alt="React"> 39+ </div> 40+ <div class="skill-text"> 41+ <h3>React</h3> 42+ <p>Webデザインの作成や、他メンバーとの連携を意識した設計ができます。</p> 43+ </div> 44+ </li> 45+ </ul> 46+ </div> 47 </section> 48 49 <section id="works">
id="skills"を持つsectionタグ内に、具体的なスキル一覧を表示するためのHTML構造を追加しています。
まず、全体をdivタグで囲み、見出しのh2タグと、スキル一覧をまとめるul（順序なしリスト）タグを配置しています。
各スキルはli（リスト項目）タグで表現され、その中をアイコンを表示する.skill-iconと、テキストを表示する.skill-textの2つのdivタグで構成しています。このように、役割ごとにdivタグでグループ分けすることで、後のCSSでのスタイリングがしやすくなります。
imgタグのalt属性は、画像が表示されない場合に代わりに表示されるテキストで、アクセシビリティの観点から重要な設定です。
変更点: スキルアイコン用の画像ファイルを追加
/assets/img/icon-html.png1Binary files /dev/null and b/assets/img/icon-html.png differ
/assets/img/icon-js.png1Binary files /dev/null and b/assets/img/icon-js.png differ
/assets/img/icon-react.png1Binary files /dev/null and b/assets/img/icon-react.png differ
/assets/img/icon-wp.png1Binary files /dev/null and b/assets/img/icon-wp.png differ
HTMLで表示する各スキルのアイコン画像ファイル（.png形式）を、assets/img/ディレクトリ内に追加しています。これらのファイルは、HTMLのimgタグのsrc属性から参照され、ウェブページ上に表示されます。
変更点: Skillsセクション全体のスタイルを設定
/assets/css/style.css1+/* --- Skillsセクション --- */ 2+#skills { 3+ padding: 80px 20px; 4+ background-color: #f5f5f5; 5+}
#skillsというIDセレクタを使い、Skillsセクション全体にスタイルを適用しています。
padding: 80px 20px;は、セクションの内側に余白を設定するプロパティです。上下に80px、左右に20pxの余白を設けることで、コンテンツが画面の端に詰まるのを防ぎ、見やすさを向上させています。
background-color: #f5f5f5;は、セクションの背景色を薄いグレーに指定しています。これにより、他のセクションとの区別がつきやすくなります。
変更点: セクション共通の見出しスタイルを追加
/assets/css/style.css1+.section-title { 2+ font-size: 28px; 3+ text-align: center; 4+ margin-bottom: 50px; 5+}
.section-titleというクラスセレクタを使い、各セクションの見出し（「Skills」や「Works」など）に共通で適用できるスタイルを定義しています。
font-size: 28px;で文字の大きさを指定し、text-align: center;でテキストを中央揃えにしています。
margin-bottom: 50px;は、見出しの下に50pxの余白を設け、見出しとその下のコンテンツとの間に適切なスペースを作ります。
変更点: CSS Grid Layoutでスキル一覧を2カラムに配置
/assets/css/style.css1+.skills-list { 2+ max-width: 960px; 3+ margin: 0 auto; 4+ display: grid; 5+ grid-template-columns: 1fr 1fr; 6+ gap: 30px; 7+ list-style: none; 8+ padding: 0; 9+}
スキル一覧を囲むul要素（.skills-list）にスタイルを適用しています。
display: grid;は、要素のレイアウト方法としてCSS Grid Layoutを使用することを宣言します。これにより、子要素を格子状に配置できます。
grid-template-columns: 1fr 1fr;は、グリッドの列（カラム）の構成を定義します。1frは利用可能なスペースの1つの断片（fraction）を意味し、これを2つ並べることで、親要素の幅を均等に2分割した2カラムのレイアウトを作成します。
gap: 30px;は、グリッドの各アイテム（スキルカード）間の隙間を30pxに設定します。
list-style: none;とpadding: 0;は、ulタグが元々持っているリストの点（マーカー）と内側の余白をリセットするための設定です。
変更点: box-shadowでカードに影をつけ立体感を演出
/assets/css/style.css1+.skills-list li { 2+ background-color: #fff; 3+ border: 1px solid #ddd; 4+ padding: 20px; 5+ border-radius: 8px; 6+ box-shadow: 0 2px 8px rgba(0,0,0,0.05); 7+}
各スキル項目であるli要素を、カードのようなデザインにするためのスタイルです。
background-color: #fff;で背景を白に、border: 1px solid #ddd;で薄いグレーの枠線を設定しています。padding: 20px;でカードの内側に余白を設け、border-radius: 8px;で角を少し丸くしています。
box-shadow: 0 2px 8px rgba(0,0,0,0.05);は、要素に影を付けるプロパティです。この設定では、水平方向のずれは0、垂直方向に2pxずれ、8pxぼかした、非常に薄い黒色（rgba(0,0,0,0.05)）の影を指定しています。これにより、カードが少し浮き上がったような立体感を表現できます。
変更点: Flexboxでアイコンとテキストを横並びに配置
/assets/css/style.css1.skills-list li { 2 box-shadow: 0 2px 8px rgba(0,0,0,0.05); 3+ display: flex; 4+ align-items: flex-start; 5+ gap: 20px; 6 }
カード（li要素）の中にあるアイコンとテキストを横並びに配置するためのスタイルです。
display: flex;は、li要素をFlexコンテナにすることを宣言します。これにより、中の子要素（.skill-iconと.skill-text）を柔軟に配置できるようになります。子要素はデフォルトで横並びになります。
align-items: flex-start;は、子要素の垂直方向の配置を上端揃えに指定します。これにより、アイコンとテキストの高さが異なっても、両方とも上端が揃って表示されます。
gap: 20px;は、子要素（アイコンとテキスト）の間に20pxの隙間を設けます。
変更点: アイコン画像のスタイルを調整
/assets/css/style.css1+.skill-icon img { 2+ width: 48px; 3+ height: 48px; 4+ object-fit: contain; 5+}
アイコンとして表示するimgタグにスタイルを適用しています。
width: 48px;とheight: 48px;で、画像の表示サイズを縦横48pxの正方形に固定します。
object-fit: contain;は、指定した領域（ここでは48px四方）に画像が収まるように、元のアスペクト比（縦横比）を保ったままリサイズする設定です。これにより、画像が歪むのを防ぎます。
変更点: カード内のテキストスタイルを設定
/assets/css/style.css1+.skill-text h3 { 2+ font-size: 18px; 3+ margin-bottom: 10px; 4+ color: #333; 5+} 6+ 7+.skill-text p { 8+ font-size: 14px; 9+ color: #666; 10+ line-height: 1.6; 11 }
スキルカード内のテキスト部分（見出しh3と説明文p）のスタイルを整えています。
h3（スキルの名前）は、文字サイズを18pxに、文字色を濃いグレー（#333）に設定し、下に10pxの余白を設けています。
p（スキルの説明文）は、文字サイズを14pxに、文字色を少し薄いグレー（#666）に設定しています。line-height: 1.6;は行の高さを文字サイズの1.6倍に設定するもので、行間が適度に空くことで文章が読みやすくなります。
おわりに
今回は、HTMLでスキル一覧の骨組みを作り、CSSで見栄えの良いカードデザインに仕上げる方法を解説しました。CSS Grid Layoutで全体を2カラムにし、Flexboxでアイコンとテキストをきれいに横並びにするのがレイアウトのポイントです。また、box-shadowプロパティでカードに影をつけ、少し浮き上がったように見せるテクニックも学びました。これらの手法は様々なセクションで応用できるので、ぜひご自身のポートフォリオサイト制作に活かしてみてください。