【HTML/CSS コーディング解説】初級:ポートフォリオサイト(前編)

最終更新日

目次

完成イメージの確認

入門編に引き続き、今回もポートフォリオサイトを作っていきます。

入門編よりもコンテンツ量とレイアウトのバリエーションが増えていています。

レスポンシブ対応も行います。

▼PC表示

ポートフォリオサイトのPC表示イメージです。

▼スマホ表示

ポートフォリオサイトのスマホ表示イメージです。

▼デモ

デモサイトはこちらからご確認いただけます。

1カラムのシンプルなポートフォリオサイトです。

セクションの数は多いですが、難しい技術は使用せずに基本となるタグやCSSだけで実装できます。

また、Webサイトでよく使用するフォームのコーディングも学んでいきます。
(※動作はプログラムが必要になるので、レイアウトの実装だけです。)

それでは、まずはレイアウト構成を考えていきましょう!

レイアウト構成を考えよう

レイアウト構成を考える手順ですが、大きくわけて下記の2段階にわかれます。

  1. サイト全体のレイアウト構成を考える
  2. 各パーツのレイアウト構成を考える

入門編でも解説していますが、レイアウト構成を考える際は紙などにメモしておくとコーディングがスムーズになります。

ぜひ試してみてくださいね!

それでは、はじめに全体のレイアウト構成を考えていきましょう。

全体の構成

headerやmain、footer、sectionといった大きなブロック単位での分割です。

今回のサイトの場合は、下記のようなブロックにわかれます。

ポートフォリオサイトの全体レイアウト構成です。

大きくわけてheader、main、footerの3つにわかれ、mainの中にメインビジュアルとAbout、Works、News、Contactセクションが含まれます。

続いて、各パーツの中のレイアウト構成を考えていきましょう。

ヘッダーの構成

まずはheaderのレイアウト構成です。
headerの中は下記のようにわかれます。

headerの中のレイアウト構成です。

ロゴがh1タグ、グローバルナビゲーションがnavタグです。
navタグの中のメニューは、ul、liのリストタグで記述します。

続いてmainの中身です。

メインビジュアルの構成

メインビジュアルは下記の通り、divタグで囲むだけです。

CSSでレイアウト調整を行います。

メインビジュアルのレイアウト構成です。

Aboutセクションの構成

Aboutセクションのレイアウト構成です。

全体をsectionタグで囲みます。

中は、タイトルをh2タグ、プロフィールをul、liタグ、pタグで記述します。

Worksセクションの構成

Worksセクションのレイアウト構成です。

全体をsectionタグで囲みます。

タイトルをh2タグ、画像をul、liタグで囲みます。
画像はフレックスボックスで横並びに配置します。

Newsセクションの構成

Newsセクションのレイアウト構成です。

全体をsectionタグで囲みます。

タイトルをh2タグ、ニュースの一覧部分はdl、dt、ddタグで記述します。
日付がdtタグ、ニュースタイトルがddタグです。
このように「説明したいワード」と「説明内容」とがペアになるようなリストは、dlタグが適しています。
dtタグとddタグはFlexboxで横並びに配置します。

Contactセクションの構成

Contactセクションのレイアウト構成です。

全体をsectionタグで囲みます。

タイトルをh2タグ、フォームエリアをformタグで囲みます。
入力フィールドやボタンなど、フォームに関する情報は全てこのformタグ内に記述します。
フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述し、Flexboxで横並びに揃えます。

最後に、footerです。
footerは、全体をfooterタグで囲むだけです。

フッターのレイアウト構成です。

以上で、レイアウト構成は終了です。

それでは、いよいよ後編のコーディングに入っていきましょう!

リクエスト受付中

いつもCodestepを利用いただき誠にありがとうございます。
利用してみて、「分かりづらい」「ここの解説を追加してほしい」「こんな学習内容があればいいのに」等、リクエストがありましたらどしどしお送りください。
また学習コンテンツ内に不備や誤りがございましたらこちらからご連絡ください。

アンケートフォームはこちら