【書籍紹介】第1章：入門編／プロフィールサイト制作

基礎学習を終えたあとのウォーミングアップ用の練習サイト

学習テーマ：フレックスボックス

難易度：

第1章は「入門編」のサイト制作になります。

入門編は、1枚の簡単なプロフィールサイトの作成で難易度的には一番簡単になっています。対象者は、HTMLとCSSの基礎学習を終えた方で、これまでに簡単サンプルサイトを作ったことがあるとよりスムーズに進められます。

解説を読みながら入門編のサイトを一緒に作るもよし、自信のある方はデザインカンプをもとにコーディングしてみてください。

完成イメージ

入門編で制作するプロフィールサイトの完成イメージです。

モバイル

入門編は、Webサイト制作でレイアウト配置を行う際に最もよく使用するCSSプロパティでもある「フレックスボックス」をテーマにしています。

フレックスボックスは、一言でいうとコンテンツを横並びにする技術です。しかし、それでいて使い方のバリエーションは豊富で奥の深い技術です。Webサイト制作を学ぶ上で、このフレックスボックスを一番はじめにマスターしておく必要があると考え入門編のテーマに持ってきました。

この章で学ぶテクニックは以下の通りです。

まずは、HTMLの基本となるタグにざっと一通り触れていきます。基礎学習を終えたばかりの方には復習になってちょうど良いくらいのボリュームです。特に、sectionタグは使い方が難しいので、「OnePoint!」として掘り下げて解説しています。ここでしっかりと理解しておきましょう。

また、HTMLのコーディングで非常に重要な見出しタグについてもここでしっかりと学んでおきます。見出しタグは実務でも使い方が問われる重要なタグです。

Flexboxはこの章のメインとなるテーマです。テキストや画像リストの横並びなど、いろいろな横並びの方法をマスターしましょう。Flexboxについても、「OnePoint!」で図を用いて詳しく解説しています。

最後はレスポンシブです。今や、Webサイト制作においてレスポンシブ対応は当たり前です。ブレイクポイントの話も踏まえて解説を行なっていますので、この章でしっかりと理解しておきましょう。

また、書籍内では重要な箇所を「OnePoint」として取り上げ掘り下げて解説しています。第1章では、下記について詳しく解説しています。

Flexboxについて

フレックスボックスの中でも特に実務でよく使うものを、図を交えて詳しく解説しています。

divタグとspanタグの違いについて

テキストを囲むときに混乱してしまいそうな、divタグとspanタグの使い分けについても使用例を交えて解説しています。

クラス名のつけ方

最後にコラムとして、迷いがちなクラス名のつけ方についても紹介しています。

以上が入門編で学ぶ内容になります。

簡単な1ページのサイトですが、Webサイト制作の基本となる部分がたくさん詰まっています。HTML、CSSの基礎学種を終えたばかりの方は、まずはこちらのサイトでコーディングに慣れてから初級編以降に進んでいってくださいね。