【HTML/CSS】Aboutセクション（自己紹介）の作成｜簡単なポートフォリオサイトの作成

WebサイトのAbout（自己紹介）セクションの作り方を学びます。HTMLで画像とテキストの骨組みを作成し、CSSのFlexboxを使ってそれらをきれいに横並びにするレイアウト方法を解説します。画像に丸みや影を付けたり、背景色や余白を設定したりする基本的なデザイン調整のスキルが身につきます。

開発環境

• OS: Windows10
• Editor: Visual Studio Code
• HTML: 5
• CSS: 3
• JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.cssCopy
1 .main-text p {
2   font-size: 18px;
3   text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
4+}
5+
6+/* Aboutセクション */
7+#about {
8+  padding: 80px 20px;
9+  background-color: #f9f9f9;
10+}
11+
12+#about .container {
13+  display: flex;
14+  align-items: center;
15+  gap: 40px;
16+  max-width: 960px;
17+  margin: 0 auto;
18+  flex-wrap: wrap;
19+}
20+
21+.about-image img {
22+  width: 250px;
23+  border-radius: 12px;
24+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
25+}
26+
27+.about-text {
28+  flex: 1;
29+  min-width: 280px;
30+}
31+
32+.about-text h2 {
33+  font-size: 28px;
34+  margin-bottom: 20px;
35+}
36+
37+.about-text p {
38+  margin-bottom: 16px;
39+  line-height: 1.8;
40 }
41

/assets/img/profile.jpg

/assets/img/profile.jpgCopy
1Binary files /dev/null and b/assets/img/profile.jpg differ
2

/index.html

/index.htmlCopy
1     </section>
2 
3     <section id="about">
4-        <h2>About</h2>
5-        <p>自己紹介文をここに記載します。</p>
6+        <div class="container about-content">
7+            <div class="about-image">
8+                <img src="assets/img/profile.jpg" alt="プロフィール画像">
9+            </div>
10+            <div class="about-text">
11+                <h2>About</h2>
12+                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
13+                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
14+            </div>
15+        </div>
16     </section>
17 
18     <section id="skills">
19

コード解説

変更点: AboutセクションのHTML構造を作成

/index.htmlCopy
1     </section>
2 
3     <section id="about">
4-        <h2>About</h2>
5-        <p>自己紹介文をここに記載します。</p>
6+        <div class="container about-content">
7+            <div class="about-image">
8+                <img src="assets/img/profile.jpg" alt="プロフィール画像">
9+            </div>
10+            <div class="about-text">
11+                <h2>About</h2>
12+                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
13+                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
14+            </div>
15+        </div>
16     </section>
17 
18     <section id="skills">

これまでは見出しと段落が直接置かれていただけでしたが、新しい構造に変更しました。まず、全体をdivタグで囲み、containerというクラス名を付けています。このcontainerは、コンテンツ全体の幅を制御し、中央に配置するためのものです。

その中に、画像を置くためのdiv (about-imageクラス)と、テキストを置くためのdiv (about-textクラス)の2つを作成しました。このように要素を役割ごとにグループ分けすることで、後のCSSでのレイアウト調整が非常にやりやすくなります。

imgタグではsrc属性で表示する画像の場所を指定し、alt属性には画像が表示できない場合に代わりに表示されるテキスト（ここでは「プロフィール画像」）を設定しています。

変更点: プロフィール画像ファイルを追加

/assets/img/profile.jpgCopy
1Binary files /dev/null and b/assets/img/profile.jpg differ

HTMLで表示するためのプロフィール画像（profile.jpg）を、/assets/img/フォルダに新しく追加しました。

Diffに表示されているBinary files ... differというメッセージは、テキストではない画像のような「バイナリファイル」が追加または変更されたことを示しています。これにより、プロジェクトに新しい画像リソースが加わったことがわかります。

変更点: Aboutセクション全体の背景色と余白を設定

/assets/css/style.cssCopy
1+/* Aboutセクション */
2+#about {
3+  padding: 80px 20px;
4+  background-color: #f9f9f9;
5+}

ここでは、id="about"が指定されたsection要素全体に対するスタイルを定義しています。

padding: 80px 20px;は、セクションの内側に余白を設定するプロパティです。最初の値80pxが上下の余白、次の値20pxが左右の余白を意味します。これにより、コンテンツがセクションの境界線に詰まって表示されるのを防ぎ、見やすくなります。

background-color: #f9f9f9;は、セクションの背景色を薄いグレーに設定しています。他のセクションと色を分けることで、視覚的にコンテンツの区切りがわかりやすくなります。

変更点: Flexboxで画像とテキストを横並びに配置

/assets/css/style.cssCopy
1+#about .container {
2+  display: flex;
3+  align-items: center;
4+  gap: 40px;
5+  max-width: 960px;
6+  margin: 0 auto;
7+  flex-wrap: wrap;
8+}

HTMLで作成した画像エリア（.about-image）とテキストエリア（.about-text）を横並びにするための設定です。これらの親要素である.containerにスタイルを適用します。

display: flex;は、子要素を横並びに配置するためのFlexboxレイアウトを有効にする宣言です。これが今回のレイアウトの要となります。

align-items: center;は、横並びになった子要素の高さが異なる場合に、それらを垂直方向の中央で揃える設定です。

gap: 40px;は、子要素（画像とテキスト）の間に40pxの間隔を設けます。

max-width: 960px;は、コンテナの最大幅を960pxに制限します。これにより、大きな画面でもコンテンツが横に広がりすぎるのを防ぎます。

margin: 0 auto;は、上下の余白を0、左右の余白をautoに設定することで、max-widthで幅が制限されたコンテナを画面の中央に配置します。

flex-wrap: wrap;は、画面幅が狭くなり、子要素が横並びで収まりきらなくなった場合に、自動的に折り返して縦並びになるようにする設定です。

変更点: プロフィール画像のデザインを調整

/assets/css/style.cssCopy
1+.about-image img {
2+  width: 250px;
3+  border-radius: 12px;
4+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
5+}

.about-imageクラスの中にあるimgタグ、つまりプロフィール画像に適用されるスタイルです。

width: 250px;で、画像の幅を250pxに指定しています。

border-radius: 12px;は、画像の四隅の角を半径12pxで丸くする設定です。これにより、画像の印象が柔らかくなります。

box-shadowは、要素に影を付けるプロパティです。ここでは、0（水平方向のズレなし）、4px（垂直方向に4px下へズラす）、12px（影を12pxぼかす）、rgba(0,0,0,0.1)（10%の濃さの黒い影）という設定で、画像が少し浮き上がって見えるような立体感を加えています。

変更点: 自己紹介テキスト部分のレイアウトとデザインを調整

/assets/css/style.cssCopy
1+.about-text {
2+  flex: 1;
3+  min-width: 280px;
4+}
5+
6+.about-text h2 {
7+  font-size: 28px;
8+  margin-bottom: 20px;
9+}
10+
11+.about-text p {
12+  margin-bottom: 16px;
13+  line-height: 1.8;
14 }

自己紹介文が入っているテキストエリア（.about-text）とその中の要素のデザインを調整しています。

まず.about-text自体には、flex: 1;を設定しています。これはFlexboxの子要素に適用するプロパティで、親要素（.container）内で利用可能な残りのスペースをすべて埋めるように幅が自動で広がる、という効果があります。これにより、画像の幅を引いた残りの部分がテキストエリアになります。min-width: 280px;は、テキストエリアがこれ以上狭くならないように最小幅を280pxに設定するもので、画面が狭くなった際の折り返し（flex-wrap）の挙動を制御します。

.about-text h2では、見出しの文字サイズを28pxに、見出しの下の余白を20pxに設定しています。

.about-text pでは、段落の下に16pxの余白を設け、line-height: 1.8;で行の高さを文字サイズの1.8倍に設定しています。これにより、文章の行間が広がり、テキストが読みやすくなります。

おわりに

今回は、HTMLで画像とテキストの骨組みを作り、CSSでレイアウトを整えることで自己紹介セクションを作成しました。display: flex; を使って要素を横並びにし、paddingやgapで余白を調整するFlexboxの基本的な使い方を学びましたね。さらに、border-radiusで画像の角を丸くしたり、box-shadowで影を付けたりと、細かなデザイン調整のスキルも身につきました。HTMLで構造を作り、CSSで見た目を整えるというこの一連の流れは、Webサイト制作の基本となる重要な考え方です。