Agile育成ブログ
未来を変える喜びを
デザイン

デザインの学校


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で縦方向の連結。

https://www.agile-software.site/2021/06/27/table/
  • 表の作成
<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>

CSSレイアウト

You cannot copy content of this page