HTMLとCSSを使用して簡単なページを作成
ページレイアウト制作実習
- エディターソフト使用法
- HTML、CSSを使用したコーディング基本技能
テキスト62P〜93P
HTML（HyperText Markup Language ）
Webページの構造を記述するための言語「タグ」を使って内容を囲むことで文字列に意味を与えたり、ブラウザにその内容をどのように表示するかを指示します。
CSS （Cascading Style Sheets）
CSSはウェブページの見た目を装飾するための言語です。HTMLで作成した構造に色やサイズ、配置などのスタイルを追加します。
CSSを使うことで、同じHTMLでも全く異なるデザインに見せることも出来ます。
step1.フォルダの作成とエディタの設定
フォルダ作成
HTMLコーディング
Dreamweaverのサイト設定はコーディングの準備のページを参照してください。
コーディング時は最初にHTML （タグ）でページの構造を組み立てます。
コーディングは完成イメージの画像を元に行いますので、コーダーによって異なるタグを使用したり、デザインを再現するためだけに本来不要な余分なタグを使用したりします。
デザインのためだけに余分なタグを使用する事はなるべく避けた方が望ましいのですが、複雑なデザインなど、やむを得ない場合もあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNSリンク集</title>
</head>
<body>
<見出し>見出しや重要なワード
<段落>
<画像 alt="画像の説明文">
<段落>
ここに文章が入ります。文章は(p)や<改行>
divを使用しますが、よりふさわしいのはp
<番号なしリスト>
<リスト項目><X公式ページへリンク>リスト項目1
<リスト項目><インスタ公式ページへリンク>リスト項目2
<リスト項目><リンクフェイスブック公式ページへリンク>リスト項目3
</body>
</html>CSSコーディング
reset.cssでブラウザ固有のユーザーエージェントスタイルシートをリセットしてからstyle.cssでスタイルを設定していきます。
スタイルシートは後で読み込んだもの（下に書かれたもの）が優先されるので読み込み順を間違えないように気を付けてください。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNSリンク集を作ろう</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>この章で使用したプロパティ
▪️背景関連プロパティ
全体{
background-color: #bbf1ef;
background-color:rgba(187,241,239,1.00);
background-image:url(../images/bg.png);
}| プロパティ名 | 初期値 | 説明 / デモ |
|---|---|---|
| background-attachment | scroll | 背景画像の固定配置 https://developer.mozilla.org/ja/docs/Web/CSS/background-attachment |
| background-clip | border-box | 背景の表示領域の設定 https://developer.mozilla.org/ja/docs/Web/CSS/background-clip |
| background-color | transparent | 背景色 |
| background-image | none | 背景画像 |
| background-origin | padding-box | 背景画像の基準位置の設定 https://developer.mozilla.org/ja/docs/Web/CSS/background-origin |
| background-position | 0% 0% | 背景画像の表示位置 （水平 垂直） https://developer.mozilla.org/ja/docs/Web/CSS/background-position |
| background-repeat | repeat | 背景画像の並び https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat |
| background-size | auto | 背景画像のサイズ。autoは指定した画像のサイズ https://developer.mozilla.org/ja/docs/Web/CSS/background-size |
background〜は背景のプロパティです。color、imageの他にrepeat、position、size、origin、attachmentなどがあり、複数のプロパティを以下のようにまとめて記述する事もできます。
このような書き方をショートハンドと呼びます。
background: #bbf1ef url(../images/bg,png) no-repeat center top /cover;
/* background-color background-image background-repeat background-position / background-size */▪️文字関連プロパティ
全体{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size:16px;
font-weight:bold;
}| プロパティ名 | 初期値 | 説明 / デモ |
|---|---|---|
font-family | serif | テキストに使用するフォントの種類 https://developer.mozilla.org/ja/docs/Web/CSS/font-family |
font-size | medium | テキストのサイズ https://developer.mozilla.org/ja/docs/Web/CSS/font-size |
font-style | normal | フォントのスタイル（通常、イタリック、オールドスタイルなど） https://developer.mozilla.org/ja/docs/Web/CSS/font-style |
font-weight | normal | フォントの太さを指定します（通常、太字など） https://developer.mozilla.org/ja/docs/Web/CSS/font-weight |
| font-variant-caps | normal | キャピタリゼーションのスタイル https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-caps |
| font-stretch | normal | フォントの幅を指定します（圧縮、拡張など） https://developer.mozilla.org/ja/docs/Web/CSS/font-stretch |
| font-kerning | normal | 文字の間隔をどれだけ取るかを定義 https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning |
| line-height | normal (約1.2) | 行間の高さ。例えば、line-height: 1.5; はフォントサイズの1.5倍https://developer.mozilla.org/ja/docs/Web/CSS/line-height |
| color | currentColor | テキストの色を指定 https://developer.mozilla.org/ja/docs/Web/CSS/color |
fontのショートハンド
font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
/*font-style font-variant-caps font-size/line-hight font-family */▪️ボーダー関連プロパティ
border-radius:20px 20px 0 0; /*左上 右上 右下 左下の順に記述*/border関連の主なプロパティと初期値borderのショートハンド
border:1px solid #333333; /* 線の太さ 線の種類 線の色 */※borderの指定方向は、上 右 下 左
▪️余白（marginとpadding）
margin: 0 auto 20px auto; /* 外側の余白 上 右 下 左 の順に記述 autoは左右のマージンを自動に設定して中央揃えに使用*/
margin: 30px 20px 50px;
margin: 0 auto;
padding: 20px 0 40px 0; /* 内側の余白 上 右 下 左 の順に記述*/
padding: 20px 0 40px;
padding: 10px 20px;
.parent {padding: 20px;}
.child {padding: inherit; /* 親要素のpadding(20px;)を継承する */}
| プロパティ名 | 説明 |
|---|---|
margin | 外側の余白を4方向一括設定。上下や左右が同じ値の場合は水平と垂直の2方向に省略可能 |
margin-top | 外側上部の余白を設定。 |
margin-right | 外側右側の余白を設定。 |
margin-bottom | 外側下部の余白を設定。 |
margin-left | 外側左側の余白を設定。 |
padding | 内側の余白を4方向一括設定。上下や左右が同じ値の場合は水平と垂直の2方向に省略可能 |
padding-top | 内側上部の余白を設定。 |
padding-right | 内側右側の余白を設定。 |
padding-bottom | 内側下部の余白を設定。 |
padding-left | 内側左側の余白を設定。 |
marginとpaddingの特徴
- 単位：ピクセル（px）、パーセント（%）、エム（em）などの単位で指定できます。
- 値：固定値、
auto（自動 / marginのみ）、inherit（インヘリット / 親から継承）などを指定できます。
