HTML/CSSのコーディング教材を公開【アバウトセクション】

htmlcssコーディグ練習アバウト編

今回は、HTML/CSSコーディングで、自己紹介をするページ

アバウトーセクションを制作していきますね。

今回の概要

  • 所要時間:1時間
  • 使用言語:HTML&CSS
  • アバウト部分を制作する

完成したアバウト部分はこちら

今回もわかりやすく、要点を抑えて解説していきますね。

アバウトセクションとは?

アバウトセクションとは、ポートフォリオサイトでいう自己紹介ページです。

他の例としては次の通りです。

  • コーポレートサイト
    会社の簡単な説明部分
  • ランディングページ
    サービスや商品の紹介部分

などなどです。

そして、ポートフォリオサイトにおいて、アバウトセクションは以下の特徴があります。

  • スキルや仕事について言及している
  • 趣味や育ちなど、性格を表すことを書く

意外と重要なのが、性格を書くという部分です。

個人で案件を受注する場合、信頼されたり、一緒に仕事をしたいと思われる工夫が重要です。

そこで、あなた自身の性格や長所をアピールすることで、お仕事に繋げることができます。

アバウトセクションのHTML部分をコーディングする

それでは、ヒーローセクションのHTMLをコーディングしていきましょう。

index.htmlを開きます。

</section>
<!--これより以下に記述してください-->
<section class="about-wrapper" id="about">
		<div class="about-path">
				<img src="img/about-path.png" alt="青い模様">
		</div>
		<div class="container"> 
				<div class="about-flex">
						<div class="about-img">
								<img src="img/about.png" alt="アバウトセクションのイラスト">
						</div>
						<div class="about-texts">
								<div class="about-heading">
										<h3>LET ME<br>INTRODUCE<br>MYSELF</h3>
								</div>
								<div class="about-introduction">
										<p>Wordpressエンジニアのさんえんなりです。
										東京を中心に、エンジニアかつプログラミング学習サービスを運営しています。
										Web制作チームの経験もあり、デザイン、コーディング、Wordpressの導入などそつなくこなせます。
										幼少の頃を海外で過ごし、自由で開放的な文化で育ちました。エンジニアとして場所と時間とお金から解放されて生きています。</p>
								</div>
						</div>
		        </div>
		</div>
</section>

打ち間違えないように気をつけてくださいね。

注目ポイント

<div class="about-path">
	<img src="img/about-path.png" alt="">
</div>

この画像は、Webサイトでいう青い模様です。

完成版のサイトの画像右上のやつですね。

コーディングのアバウトセクション

ブラウザチェック

以下の様になっていれば、上手にコーディングができています。

コーディングのアバウトセクション

アバウトセクションのCSS部分をコーディングする

次は、CSS部分をコーディングしていきましょう。

style.cssの一番下のコードから、に次の様に記述していきます。

.about-path {
    position: relative;
}
.about-path img{
    position: absolute;
    right: 0;
    top: -125px;
	height: 250px;
	z-index: -10;
}

注目ポイント

position:relative;を使用して、画像の配置位置を変更しています。

親要素にposition: relative;を指定し、子要素にposition: absolute;を指定します。

すると、親要素の左上を基準に、子要素を自由に動かせるようになります。

  • 親要素
    position: relative;
  • 子要素
    position: absolute;
    right: 0;
    top: -125px;

画像にすると次の通りです。

displayの説明

ブラウザチェック

displayで右上に表示

青い模様が右上に来ていれば成功です。

それでは、追加でCSSを書いていきましょう。

まずは画像の大きさを調整します。

.about-img {
    width: 45%;
}
.about-img img{
    width: 100%;
}

そしたら、フレックスボックスを使用して横並びにしていきます。

.about-flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

ブラウザチェック

文字がちっちゃいアバウトセクション

バランスが悪いので、文字の大きさや余白を整えます。

.about-texts {
    width: 45%;
}
.about-heading h3 {
  font-size: 40px;
 letter-spacing: 5px;
 margin-bottom: 30px;
}

ブラウザチェック

コーディングのアバウトセクション

一見良さそうに見えますが、文字がごちゃごちゃして読みづらいですね。

index.htmlを以下のように変更しましょう

<div class="about-introduction">
	<p>Wordpressエンジニアのさんえんなりです。<br>
	東京を中心に、エンジニアかつプログラミング学習サービスを運営しています。<br>
	Web制作チームの経験もあり、デザイン、コーディング、Wordpressの導入などそつなくこなせます。<br>
	幼少の頃を海外で過ごし、自由で開放的な文化で育ちました。エンジニアとして場所と時間とお金から解放されて生きています。</p>
</div>

style.cssには、次のように書き足します。

.about-introduction{
	line-height: 2;
}

ブラウザチェック

コーディングのアバウトセクション

きれいに横並びになった、アバウトセクションが完成しました!

HTML/CSSのコーディング教材【サービスセクション】へ行く

お疲れ様でした。今回の自己紹介部分は、あなた自身の内容に変更してもいいかもですね。

オリジナルのポートフォリオサイトを制作していきましょう。

次回は、『HTML/CSSのコーディング教材【サービスセクション】』(準備中)です。

所要時間は1時間、ぜひ挑戦してください。