-本日のアジェンダ-
1限目
学科 HTML基礎③
タグの復習
2限目
学科 HTML基礎③
リストタグについて
3限目
学科 HTML基礎③
googlemapについて
4限目
学科 HTML基礎③
CSSについて
5限目
学科 HTML基礎③
googlefontについて
本日のテーマ
様々なタグを使ってみましょう
ファイル名の名付けのルール
拡張子 .html .css .jpg .pngなどのファイル名を付ける時には下記に気をつけましょう！
ファイル名に
日本語はNG
空白NG
\:<などの記号はNG
半角英数字、-(ハイフン)_(アンダースコア)で！
li リスト
順序のないリストを表示する
<ul>
<li>∼</li>
</ul>順序のあるリストを表示する
<ol>
<li>∼</li>
</ol>table 表
<table>∼</table> ・・・テーブル（表）を作成する
<caption>∼</caption> ・・・テーブル（表）にキャプションをつける
<tr>∼</tr> ・・・テーブル（表）の横一行を定義する
<th>∼</th> ・・・テーブル（表）の見出しセルを作成する
<td>∼</td> ・・・テーブル（表）のデータセルを作成するdl 定義
定義・説明リストを表す
<dl>
<dt>∼</dt>
<dd>∼</dd>
</dl>Google Map
Google Fonts
CSSを書いてみましょう
h1 {font-size:20px;}
p {color:red;}
セレクタ プロパティ 値HTMLファイルのヘッダー内に、styleタグを書く方法
<style type="text/css">
</style>color
文字色（前景色）を指定する
color:#666666;
color:rgba(0,0,255,0.5);text-align
ブロックコンテナ内の行の揃え位置・均等割付を指定する
text-align:center;font-family
フォントの種類
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;background-color
背景色を指定する
background-color:#333333;width
内容の幅
width:90%;float
回り込み
float:left;clear
回り込みを解除
clear:both;overflow
ボックスからあふれた内容の処理
overflow:hidden;border
ボーダーのプロパティを一括で指定
border:solid 1px #ccc;
border-bottom:solid 1px #ccc;padding
パディングに関する指定をまとめて行う
パディングとは、内容領域の外側にある「余白」
padding:5%;
padding-top:5%;margin
マージンに関する指定をまとめて行う
マージンとは、要素の外側にある「余白」
padding:5%;
padding-top:5%;オススメのレストラン
あなたが知ってるレストランについて
店名、MENU、INFORMATION、ACCESSをマークアップしましょう。
▼HTML 例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>おすすめのレストラン</title>
</head>
<body>
<div>
<h1>恵比寿焼肉 kintan</h1>
<p>最近行った〝映える〟お店を紹介します。１人焼肉もできるおしゃれなお店です。特にランチがコスパが良くおすすめ！</p>
<h2>MENU</h2>
<p>写真を撮りたくなる見て楽しいお肉です！</p>
<!--ここからテーブル-->
<table>
<tr>
<th>写真</th>
<th>メニュー</th>
<th>価格</th>
</tr>
<tr>
<td><img src="images/menu1.jpg" alt="プラチナタンとサーロインのユッケ ハーフ＆ハーフ" width="300"></td>
<td>プラチナタンとサーロインのユッケ ハーフ＆ハーフ</td>
<td>2,780円</td>
</tr>
<tr>
<td><img src="images/menu2.jpg" alt="日本一の骨付きKINTANミスジステーキ" width="300"></td>
<td>日本一の骨付きKINTANミスジステーキ</td>
<td>4,980円</td>
</tr>
<tr>
<td><img src="images/menu3.jpg" alt="牛タン&KINTAN塩ハラミセット" width="300"></td>
<td>牛タン&KINTAN塩ハラミセット</td>
<td>1,980円</td>
</tr>
</table>
<h2>INFORMATION</h2>
<!--ここから定義-->
<dl>
<dt>店名</dt>
<dd>恵比寿焼肉・ｋｉｎｔａｎ</dd>
<dt>住所</dt>
<dd>東京都渋谷区恵比寿西1-10-3トラストリンク恵比寿ビル・1階～2階</dd>
<dt>電話</dt>
<dd>03-5428-8629</dd>
</dl>
<h2>ACCESS</h2>
<!--ここからリスト-->
<ol>
<li>JR恵比寿西口を出て左に100m進みます。</li>
<li>信号を渡ります。</li>
<li>最初の角を右に曲がります。</li>
<li>緑の看板が目印です。</li>
</ol>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.1126272647284!2d139.70430291405904!3d35.67422868019593!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cbc77cfc555%3A0x8616d5c79d061f31!2z44CSMTUwLTAwMDEg5p2x5Lqs6YO95riL6LC35Yy656We5a6u5YmN77yR5LiB55uu77yR4oiS77yR77yS!5e0!3m2!1sja!2sjp!4v1474711678659" width="800" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
head内にスタイルシートを記述し、色を変えてみましょう。
<style type="text/css">
/*ページ全体を囲む*/
div {
width: 800px;
margin-right: auto;
margin-left: auto;
}
/*見出し*/
h1 {
background-color: #000000;
padding: 10px;
color: #ffffff;
text-align: center;
}
h2 {
color: #FF0004;
padding: 30px 0 10px 0;
border-bottom: #FF0004 1px solid;
font-family: 'Josefin Slab', serif;
}
/*テーブル*/
th {
background-color: #cccccc;
}
td {
background-color: #eeeeee;
}
th, td {
padding: 10px;
}
/*定義*/
dl {
overflow: hidden;
}
dt {
padding: 10px 0;
float: left;
clear:both;
width: 120px;
}
dd {
padding: 10px 0;
float: left;
}
</style>色の名前とカラーコードです
HTMLカラーコード: WEB色見本 原色大辞典