1.
※編集部分
・LOGO部分をIMG画像に変更
・背景色と文字色をCSSで変更
・メニューの名称変更
・リンクボタン削除

2.

※編集部分
・テキスト1~3を変更
・PC部分にIMG画像を挿入
・リンクボタンのテキスト変更
・リンクボタンへのURL紐づけ



テキスト３

テキスト１

リンクボタン１リンクボタン２

テキスト２


3.

4.

PCでの閲覧時に表示させる内容を記述します。

スマホでの閲覧時に表示させる内容を記述します。


5.

※編集部分
・CSSで背景色を変更（background_color）
・ホバーした際に画像が変更されるよう編集


6.
7.


8.
メイン1パターン1画像
メイン1パターン2画像
メイン1パターン3画像
メイン1パターン4画像
メイン1パターン 5画像
メイン1
メイン2
メイン3
パターンを選択
パターン1サムネイル画像
パターン1
パターン2サムネイル画像
パターン2
パターン1サムネイル画像
パターン3
パターン４サムネイル画像
パターン4
パターン５サムネイル画像
パターン5
メイン2パターン1画像
メイン2パターン2画像
メイン2パターン3画像
メイン2パターン4画像
メイン1
メイン2
メイン3
パターンを選択
パターン1画像
パターン1
パターン2画像
パターン2
パターン3画像
パターン3
パターン4画像
パターン4
メイン3パターン1画像
メイン3パターン2画像
メイン3パターン3画像
メイン1
メイン2
メイン3
パターンを選択
パターン1画像
パターン1
パターン2画像
パターン2
パターン3画像
パターン3
9.

※編集部分
・CSSで色変更
・HTMLでアンカーリンクを追加
10.
11.

※編集部分
・背景画像を挿入
・CSSでボタン作成、ホバーの際に色が反転するよう設定

1/31

※注意書きが入ります。


12.

13.

※編集部分
・CSSで背景色変更

14.
15.
※編集部分
・CSSで背景色変更

16.


17.
18.
※編集部分
・CSSで色変更
・HTMLでアンカーリンクを追加

19.

20.

※編集部分
・HTMLで画像を挿入
・タグ部分を消去


  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 1

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります

  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 2

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります

  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 3

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります

  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 4

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります

  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 5

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります

  • 灰色タグ
  • 緑タグ
  • 青タグ
  • 紫タグ
  • 白タグ

Slide 6

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入ります
ここにテキストが入ります


21.

※編集部分
・CSSで背景色変更
・CSSでフォント変更
・HTMLでボタン作成、CSSでホバー時の動作設定

PCでの閲覧時に表示させる内容を記述します。

スマホでの閲覧時に表示させる内容を記述します。

22.

※編集部分
・CSSで色変更
・HTMLでアンカーリンクを追加
23.

※編集部分
・HTMLで画像を挿入
・yyyy/mm/ddの部分をCSSで右寄せに、フォント、サイズ、文章を変更

Slide 1

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

Slide 2

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

Slide 3

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

Slide 4

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

Slide 5

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

Slide 6

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

yyyy/mm/dd

24.

※編集部分
・HTMLでボタン作成、CSSでホバー時の動作設定

PCでの閲覧時に表示させる内容を記述します。

スマホでの閲覧時に表示させる内容を記述します。



25.

※編集部分
・CSSで背景色の設定
・画像の削除
Copyright © SIVAinc All rights reserved.
26.

※編集部分
・HTMLで要素を足し4つ横並びに
・CSSで背景色変更
・横並びになった一つ一つの要素に対して、ホバー時に色が反転する動作とアンカーリンクを付与
・HTMLで右上に削除ボタンを追加（<button class="close-btn" onclick="hideMenu()">☓</button>）
・JavaScriptで削除ボタンが押された際の動作を追加
（HTMLの最後に<script>
function hideMenu() {
document.getElementById("menu").style.display = "none";

}
</script>を追加）