HTML/CSSのコーディング教材を公開【サービスセクション】

htmlcssコーディングサービスセクション

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

サービスセクションを制作していきますね。

今回の概要

  • 所要時間:1時間
  • 使用言語:HTML&CSS
  • サービス部分を制作する

完成したサービス部分はこちら

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

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

サービスセクションとは、ポートフォリオサイトでいうスキル紹介ページです。

今回のポートフォリオサイトでは、次の2つが盛り込まれています。

  • Webサイトが制作できること
  • プログラミング学習サイトを運営していること

私ができることを、全て盛り込みました。

そして、一般的なポートフォリオサイトにおいても、共通した特徴があります。

  • プログラミング言語を書く
  • 何ができるのかを書く
  • どんなサービスを提供しているのかを書く

絶対に忘れてはいけないのが、言語の部分です。

何の言語が使えるかわからないと、お仕事を頼もうにも頼めません。

また、習熟度などを表すポートフォリオなどもありますが、オススメはしていません。

理由として、主観的な意見になることがほとんどだからです。

サービスセクションのHTML部分をコーディングする

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

index.htmlを開きます。

</section>
<!--これより以下に記述してください-->
<section class="service-wrapper" id="service">
	<div class="service-path">
		<img src="img/service-path.png" alt="薄い青い模様">
	</div>
	<div class="container">
		<div class="section-title-container">
			<h2 class="section-title">SERVICE</h2>
			<p>コードを書くだけではお仕事は終わらない。<br>クライアント様との関係を大切に。</p>
		</div>
		<div class="service-container">
			<div class="service-card">
				<div class="service-card-img">
					<img src="img/service-icon-1.png" alt="サービスのイラスト1">
				</div>
				<div class="service-card-text">
					<h3>WEBサイト制作</h3>
					<p>デザイン、コーディング、Wordpressの導入まで、一貫して制作致します。Webサイト制作後の運用やマーケティングもお任せください。</p>
				</div>
			</div>
			<div class="service-card">
				<div class="service-card-img">
					<img src="img/service-icon-2.png" alt="サービスのイラスト2">
				</div>
				<div class="service-card-text">
					<h3><span>プログラミング</span><span>学習サイト</span></h3>
					<p>未経験から副業で10万円稼げるようになることをコンセプトにした、プログラミング学習サイトを運営しています。最短1か月でエンジニアデビューできます。</p>
				</div>
			</div>
		</div>
	</div>
</section>

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

注目ポイント

<div class="service-path">
	<img src="img/service-path.png" alt="薄い青い模様">
</div>

前回同様、青い水玉模様を採用しています。

完成版のサイトの画像右上、薄青い模様のやつですね。

ポートフォリオサイト完成版

また、HTML全体の構造としては以下のようになっています。

<div class="service-container">
	<div class="service-card">
		<!--略-->
	</div>
	<div class="service-card">
		<!--略-->
	</div>
</div>

Service-containerという大きな枠の中に、service-cardが二つ格納されています。

ブラウザチェック

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

ブラウザチェック

サービスセクションのCSS部分をコーディングする

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

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

.service-path {
    position: relative;
}
.service-path  img{
    position: absolute;
	top: 100px;
	right: 0;
	z-index: -10;
	width: 600px;
}

注目ポイント

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

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

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

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

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

ブラウザチェック

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

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

まずはタイトルのServiceというテキストの余白や配置を調整しましょう。

.section-title-container {
    text-align: center;
    padding-bottom: 60px;
}
.section-title {
	font-size: 50px;
	letter-spacing: 5px;
	margin-bottom: 15px;
}

上記のCSSを、リセットCSSの最後に付け足しましょう。

行数でいうと、37行目前後です。

理由として、このクラス名はこれからも使いまわすからです。

ブラウザチェック

コーディングのブラウザチェック

タイトルがいい感じに配置されました!

次は、サービスを紹介したカード部分を制作していきます。

.service-container {
    margin: 0 auto;
    display: flex;
	justify-content: space-evenly;
	align-items: center;
}

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

ブラウザチェック

コーディングのブラウザチェック1

ここから、情報をまとめてカード風に変えましょう。

.service-card {
    width: 40%;
    padding: 90px 30px 0 30px;
    border-radius: 15px;
    border: solid 1px rgba(100, 100, 100, 0.3);
    background-color: white;
    margin-top: 60px;
    box-shadow: 0 0 8px rgba(80, 80, 80, 0.3);
}

ブラウザチェック

コーディングの途中経過2

テキストや画像を中央揃えにしつつ、余白を調整します。

.service-card-img {
	text-align: center;
}
.service-card-img img {
    max-width: 100%;
}
.service-card-text {
	padding: 30px;

}
.service-card-text h3 {
    font-size: 22px;
    letter-spacing: 3px;
    text-align: center;
    margin: 20px 0;
}
.service-card p {
	margin-bottom: 15px;
}

注目ポイント

marginとtext-alignの中央寄せの違いは次の通りです。

  • Margin: 0 auto;
    インライン要素を中央寄せ。ingやbuttun要素など
  • text-align: center;
    ボックス要素を中央寄せ。div要素など

それぞれこまかなルールや決まりがあります。

違いが曖昧という方は、こちらの記事にて確認してみてください。

ブラウザチェック

スタイリッシュなServiceセクションが完成しました!

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

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

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

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

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