●レイアウトについて
このページには、最終課題を作る上で参考になりそうな事例とリンク集を掲載しています。
サンプルコードは、Teams >ファイル >第11回 からダウンロードできます。
1.テキストや画像を中央で揃える
1-1.テキストの場合
サンプルコード：image+text-center
style=”text-align:center”
○HTML
修正前
<p>
テキスト
</p>
中央揃えに修正
<p style=”text-align:center”>
テキスト
</p>
※上記は<p>だけでなく、<h1>、<ul>、<adress>などに対しても適用できる。
1-2.画像の場合
サンプルコード：image+text-center
まず、HTMLでimgタグをdivタグ（ここでは「img-box」というクラス名にしている）で囲う。
次に、CSSで「img-box」を中央揃えになるように指定する。
○HTML（img要素の前後を下記のように修正）
<div class= “img-box” >
<img src=”images/XXX.jpg” alt=”XXX” width=”400″ height=”267″ />
</div>
○CSS（下記を新規追加）
.img-box {
text-align:center;
}
2.文字や画像を複数列に並べる
画像やテキストをグリッド状に配置したい場合、テーブル（表）を利用すれば出来ます。
テーブルについては、テキストp.98-99や第7回の授業ページを参照してください。
2-1.画像と文字を２列で配置する
サンプルコード：table_image_2column
○HTML
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<div id=”container”>
<div id=”header”>
<h1 style=”text-align:center”>
画像と文字をタテ２列で表示します
</h1>
</div>
<!– div headerここまで –>
<!– ここから表1 –>
<table summary=”1″>
<tr>
<th><img src=”images/photo01.jpg” alt=”cat” width=”240″ height=”166″>
</th>
<td><img src=”images/photo02.jpg” alt=”cat” width=”240″ height=”166″>
</td>
</tr>
<tr>
<th>窓辺の猫</th>
<td>布団の中の猫</td>
</tr>
</table>
<!– 表1ここまで –>
<!– ここから表2 –>
<table summary=”2″>
<tr>
<th><img src=”images/photo03.jpg” alt=”Venezia” width=”240″ height=”166″>
</th>
<td><img src=”images/photo04.jpg” alt=”Mirano” width=”240″ height=”166″>
</td>
</tr>
<tr>
<th>ヴェネチア</th>
<td>ドゥオーモ</td>
</tr>
</table>
<!– 表2ここまで –>
<!– ここから表3 –>
<table summary=”表3″>
<tr>
<th><img src=”images/photo05.jpg” alt=”red car” width=”240″ height=”166″>
</th>
<td><img src=”images/photo06.jpg” alt=”red rose” width=”240″ height=”166″>
</td>
</tr>
<tr>
<th>赤い車</th>
<td>薔薇</td>
</tr>
</table>
<!– 表3ここまで –>
<address style=”text-align:center”>制作者：愛知淑徳大学創造表現学部メディアプロデュース専攻</address>
</div>
<!– div containerここまで –>
</body>
</html>
○CSS
@charset “UTF-8”;
body {
color: #444444;
background-color: #ffffff;
}
/* コンテンツ全体（id属性=container）の指定 */
div#container {
border: none;
padding-left: 40px;
padding-right: 40px;
background-color: #ffffff;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
Margin-bottom: 40px;
}
/* タイトルまわり（id属性=header）の指定 */
div#header {
padding: 10px;
margin-left: auto; /*テーブルを中央に*/
margin-right: auto; /*テーブルを中央に*/
margin-bottom: 15px;
}
h1 {
font-size: 24px;
font-family: normal;
font-weight: normal;
}
table {
font-size: 14px;
margin-left: auto; /*テーブルを中央に*/
margin-right: auto; /*テーブルを中央に*/
margin-bottom: 40px;
padding-left: auto;
padding-right: auto;
width: 600px;
border: none;
border-collapse: collapse;
}
th {
font-weight: normal; /*thの文字は初期設定では太字になっているので、それが嫌な場合はnormalにする*/
padding-left: auto;
padding-right: auto;
padding-top: 8px;
padding-bottom: 8px;
width: 300px;
text-align: center;
border: none;
}
td {
padding-left: auto;
padding-right: auto;
text-align: center;
border: none;
}
p {
font-size: 18px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
padding: 25px;
}
address {
font-size: 14px;
font-style: normal;
}
2-2.画像と文章を横並びで配置する
サンプルコード：table_image_text_2column
表の内容や行数を変えれば、次のようなレイアウトも可能です。
上記の方法とは別に、Flexboxなどを使ってレイアウトすることもできます。（テキストp.180~187）
そちらを使うと、レイアウトの自由度が広がると思います。
ただ、サイト制作に使う技術は、第7回までの講義で扱ったものだけで大丈夫です。それ以外のものを無理して使う必要はありません。
3.余白の調整
余白は2種類あります。
margin ：要素の外側の余白
padding：要素の内側の余白
3-1.div要素の余白を指定する
サンプルコード：margin-padding
○HTML
○CSS
解説は次の通りです。
余白が狭すぎたり広すぎたりすると、読みづらいし美しくないですね。
paddingやmarginを調整して、見やすくなるよう心がけて下さい。
4.行間について
サンプルコード：lines
行間の設定は、CSS上で「line-height:〇〇;」を使う。
例えば、「font-size: 14px; line-height:2;」の場合、行の高さが文字サイズの2倍（28px）になる。
行間（14px/上下に7pxずつ）＝ 行の高さ（28px） ー 文字サイズ（14px）
5.リンク集
■ウェブサイトの作例を探す
SANKOU! Webデザイン制作の参考になる国内のステキなサイト集
https://sankoudesign.com
WebDesignClip
https://webdesignclip.com
Parts -パーツ別Webデザイン集
https://partsdesign.net
■カラーについて
Adobe Color
https://color.adobe.com/ja/create/color-wheel
カラバリの作成や保存が出来る
探索タブから、イメージに合う色を探せる
Adobe Color コントラストチェッカー
https://color.adobe.com/ja/create/color-contrast-analyzer
文字色と背景色のコントラスト比を確認できる
通常テキストはコントラスト比4.5 : 1 以上、ラージテキストは3 : 1 以上にする（ロゴや装飾テキストなどを除く）
WEB色見本 原色大辞典
https://www.colordic.org/#google_vignette
カラーコードを検索可
配色パターンも提案してくれる
■写真撮影について
1.料理
naire style｜売上を左右する写真。美味しそうに見える料理写真の撮り方
https://www.nairestyle.com/blog/18
Nikon｜Lesson 35：光を活かしてシズル感ある料理写真を撮る
https://www.nikon-image.com/enjoy/phototech/cameralesson/lesson35.html
2,物撮り（商品などの撮影）
TORUN｜【自宅で物撮り】8つの商品撮影アイデアと商品ジャンル別で撮り方のコツを解説
https://torun.studio/media/butsudori
3.室内風景（店内など）
WIXブログ｜プロ並の室内写真を撮影するための6つの秘訣
https://ja.wix.com/blog/2016/09/プロ並の室内写真を撮影するための6つの秘訣/
KOTERA Ryo 