構成

レイアウト

レイアウトを考えます。

行と列について

行と列の区別ができるように覚えてください。行は英語で Row （ロー）、列は英語で Column (カラム) と言います。

行と列を試す

実際に数字を変更して、行列（Row/Column）を確認してください。

行 列 ← 変更できます。

2 行(Row) 3 列 (Column)の表

1 - 1

1 - 2

1 - 3

2 - 1

2 - 2

2 - 3

カラムレイアウト

Web ページでは、よくカラムレイアウトが利用されます。

• 1 カラムレイアウト
  1 列のレイアウトです。レイアウトの中では最も単純です。縦長のディスプレイであるスマートフォン向けによく利用されます。
• 2 カラムレイアウト
  2 列のレイアウトです。このサイトもコンピュータ等の大きめのディスプレイに表示すると、左側にメニュー、右側にコンテンツのように 2 カラムのレイアウトになります。
• 3 カラムレイアウト
  3 列のレイアウトです。左側にメニュー、中央にコンテンツ、右側に関連記事としたり、等幅のカードを整然と並べて眺められるようなレイアウトに使われます。

一般的に使用されるレイアウトは上記の 3 つです。場合によっては 4 カラム以上、複雑なレイアウトを組む場合もあります。 また、スマートフォンで見る場合は 1 カラムレイアウトにする、タブレットでは 2 カラムレイアウトにする、大きな画面のコンピュータでは 3 カラムレイアウトにするといったこともできます。 その場合は、「アクセス元のユーザーエージェントによる出力ファイルの切り替え(非推奨)」の方式、「画面幅に応じた CSS の適用」の方式、「ユーザーが手動で設定した情報を元にファイルや CSS を切り替える」方式等があります。この中でも、「画面幅に応じた CSS の適用」の方式は レスポンシブデザイン と呼ばれ、よく利用されています。

使用するレイアウト

今回、使用するレイアウトは、大きな枠組では 1 カラムレイアウトにします。 レスポンシブデザインを適宜使用し、画面幅に応じてコンテンツの表示を変えます。 カラム数は 1 ですが、スマートフォンで表示する場合は、横幅 100% でコンテンツが表示され、 PC 等十分な横幅がある画面では、幅に応じて 1 行に表示される量を増やします。 1 行あたりに表示する行が長すぎると、文章の可読性が低下するため（どの行を読んでいたか見失うため）、ある程度画面幅がある環境の場合は、一定の幅でそれ以上広がらないようにします。

このカラムに収まるコンテンツの 1 つのまとまりを、本サイトでは カード と呼ぶことにします。スマートフォンなどの幅の狭い画面では、 カードを横 100 % で表示し、 PC 等の横幅が十分にある場合は、 100 % にしつつ、指定した最大幅以上にならないようにします。

アドバイス

実際に公開されている Web サイトがどのような構成になっているか確認する場合は、Google Chrome で開いているページを右クリックして、「検証」を選択し、開発者ツールを表示します。 要素選択モード、Elements タブ、 Lauout タブの機能を使用するとわかりやすく表示されます。 以下は、要素がどのように適用されているか確認する 2 通りの方法です。

掲載するカードの種類

Q. カードとは？

A. カード は このポートフォリオ制作中の特有の言い回しです。 HTML / CSS にはありませんが、Web 制作では、よく使われる表現です。

掲載するカードは 以下の通りです。

• 自己紹介
• （メニューバー）
• 趣味
• スキル
• 制作物
• 帰属

メニューバー

自己紹介と趣味のカードの間には、 メニューバーを表示します。このメニューバーは、スクロール時に、画面上部に固定します。

また、メニューはボタンになっており、クリックするとその位置までスクロールします。

カードのレイアウト

1 つのカードは主に、タイトルと内容で構成されます。

自己紹介

自己紹介のカードでは、以下のように、スマートフォンと PC でレイアウトが変わるようにします。 カード内にさらにカラムを構成します。スマートフォンでは、1 カラムレイアウトにし、PC では 2 カラムレイアウトにします。 PC 画面の 2 カラムレイアウトは、 下の画像において、テキストとプロフィール画像で列が分割されている部分を示しています。

趣味

趣味のカードは、外部ライブラリを使用して、画像がスライドできるようにします。

スキル

スキルのカードは、カード内でカラムレイアウトを構成します。スマートフォンでは、1 カラムレイアウト、PC では 3 カラムレイアウトにします。

また、さらにその枠線の中の領域は 「名前・ロゴ・学習期間」と「説明」の 2 カラムレイアウトにします。枠線の中の領域は横幅に関係なく 2 カラムレイアウトです。

制作物

制作物のカードは、スマートフォンでは、1 カラムレイアウト、PC では、1 カラムレイアウトと 2 カラムレイアウトを併用します。 併用する場合は、「制作物の名前」を 1 カラムレイアウトにし、「イメージ画像」と「説明」を 2 カラムレイアウトにします。グリッドレイアウトとも言います。

帰属

帰属のカードは、使用したロゴや画像などに関して著者の情報を表記します。

背景

背景の左上と右下に 「」 の画像が固定表示されるようにします。スクロールしても常に同じ位置にあります。

フッター

ページの最下部にフッターを配置します。 著作権情報（コピーライト ©）を記載しておきます。表記しなくても、法律的にはあなたの著作権は守られますが、 慣例的に書かれていることが多いです。