Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
HTMLのベースを作成
- DOCTYPE宣言
- 文字コード
- タイトル
- body内にウェブブラウザで表示される内容を記載します。
- 見出し
- 箇条書き
- 段落
- 改行
- 画像の挿入
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="67Green">
<meta name="description" content="渋谷区のグリーン専門店">
<title>67Green</title>
</head>
<body>
<header>
<h1>67Green</h1>
</header>
<nav>
<ul>
<li>TOP</li>
<li>ITEM</li>
<li>MAP</li>
</ul>
</nav>
<main>
<p><img src="image/main.jpg" alt="店内写真"</p>
<h2>MESSAGE</h2>
<p>67Greenはグリーン専門店です。<br>
落ち着いた空間で、ゆっくりお過ごしください。</p>
</main>
<footer>
<p>Copyright 2016 67Green.</p>
</footer>
</body>
</html>Web表示
サブページを作る
行・列の連結
colspanで横方向の連結。rowspanで縦方向の連結。
- 表の作成
<section>
<h2>ITEM</h2>
<table>
<tr>
<th><img src="image/item1.jpg" alt="ウェア"></th>
<td>ガーデニング作業をオシャレに。</td>
<td>6,980円</td>
</tr>
<tr>
<th><img src="image/item2.jpg" alt="鉢植え"></th>
<td>育てやすいグリーンネックレス。</td>
<td>1,500円</td>
</tr>
<tr>
<th><img src="image/item3.jpg" alt="ポット"></th>
<td>インテリアにもなる木製ポット。</td>
<td>700円</td>
</tr>
</table>
</section>Googleマップの埋め込み
住所入力
メニューから「地図を共有または埋め込む」を選択
「地図を埋め込む」のURLをコピー
貼り付け
<section>
<h2>MAP</h2>
<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="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</section>リンク設定
<ul>
<li><a href="index.html">TOP</a></li>
<li><a href="item.html">ITEM</a></li>
<li><a href="map.html">MAP</a></li>
</ul>CSS
- テキストの色を指定
- テキストの大きさを指定
- HTMLにCSSを読み込む
h1{
color:green;
font-size:250%;
}HTML
media属性でそのCSSファイルがどんなメディアで利用するかを設定します。
<link href="style.css" media="all" rel="stylesheet">グループ化
divタグを利用し複数の要素をグループ化します。
ヘッダーとフッター以外をdivタグで囲みます。
<div>
・
・
・
</div>
