最初のコミット

JoeK3816 · Apr 4, 2019 · 6c84e39 · 6c84e39
commit 6c84e39
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 0 deletions.
diff --git a/default.css b/default.css
@@ -0,0 +1,9 @@
+#main {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+h1 {
+  text-align: center;
+}
diff --git a/images/default.jpg b/images/default.jpg
diff --git a/images/img0.jpg b/images/img0.jpg
diff --git a/images/img1.jpg b/images/img1.jpg
diff --git a/images/img2.jpg b/images/img2.jpg
diff --git a/images/img3.jpg b/images/img3.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="UTF-8" />
+        <title>イメージを表示</title>
+        <link rel="stylesheet" href="default.css">
+    </head>
+    <body>
+        <div id="main">
+            <h1>今日のイメージ</h1>
+            <img id="myImage" width="500" height="333" src="images/default.jpg">
+        </div>
+        <script src="./js/sample.js"></script>
+    </body>
+</html>
diff --git a/js/sample.js b/js/sample.js
@@ -0,0 +1,8 @@
+var images = ["img0.jpg", "img1.jpg", "img2.jpg",
+"img3.jpg"];
+// イメージをランダムに取り出す
+var tImg = images[Math.floor(Math.random() * 4)];		
+// イメージエレメントを取得
+var myImage = document.getElementById("myImage");
+// src属性にイメージを設定
+myImage.src = "images/" + tImg;