サイト名称変更のお知らせ

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

目次

  1. 1. 完成イメージの確認
  2. 2. レイアウト構成を考えよう
    1. ①:全体のレイアウト構成
    2. ②:ヘッダーのレイアウト構成
    3. ③:メインビジュアルのレイアウト構成
    4. ④:Aboutセクションのレイアウト構成
    5. ⑤:Worksセクションのレイアウト構成
    6. ⑥:Newsセクションのレイアウト構成
    7. ⑦:Contactセクションのレイアウト構成
    8. ⑧:フッターのレイアウト構成

1. 完成イメージの確認

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

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

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

▼PC表示

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

▼スマホ表示

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

▼デモ

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

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

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

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

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

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

レイアウト構成を考える手順ですが、大きくわけて下記の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タグで囲むだけです。

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

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

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

関連記事