編集履歴

質問編集履歴

一部追記しました。

2017/07/10 02:03

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -16,6 +16,7 @@
 ======================= 追記 ========================
 初心者マークの存在を知らず大変申し訳ありません。
 教えていただきありがとうございました。
+下記に記載されている内容でおおよそすべてかと思います。
 一部記載内容に問題がある為削除しています。
 ・CSSのリンク

削除箇所追記しました。

2017/07/10 02:03

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -16,12 +16,17 @@
 ======================= 追記 ========================
 初心者マークの存在を知らず大変申し訳ありません。
 教えていただきありがとうございました。
-一部リンクなどは削除していますが下記のような記述をしております。
+一部記載内容に問題がある為削除しています。
+・CSSのリンク
+・画像のalt
+・メニューボタンのリンクなど
 また以下の記述は固定で変更不可です。
-<div id="Contents">
+・<div id="Contents">
-<div class="GridSet">
+・<div class="GridSet">
-<div class="Grid4">
+・<div class="Grid4">
-<!--#include virtual="/ssi/footer.txt"-->
+・<!--#include virtual="/ssi/footer.txt"-->
 ```HTML
@@ -33,7 +38,7 @@
 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="scroll.js"></script>
-<link rel="index"" title="" />
+<link rel="index" title="" />
 <link href="" type="text/css" rel="stylesheet" media="screen,print" />
 </head>

参考サイトのリンクを修正しました。

2017/07/10 02:01

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -7,10 +7,10 @@
 ======================= 参考サイト ========================
 1：CSSのみで実装可能
-https://theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/
+https://[theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/](http://theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/)
 2：jsで実装可能
-http://weblabla.m-pokoj.net/nav02/
+http://[weblabla.m-pokoj.net/nav02/](http://weblabla.m-pokoj.net/nav02/)
 ======================= 追記 ========================

一部追記しました。

2017/07/10 01:43

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -412,4 +412,63 @@
 }
 * html #Footer p {margin: -1.5em auto 0;}
 *:first-child+html #Footer p {margin: -1.5em auto 0;}
+```
+```scroll.js
+$(function(){
+   // #で始まるアンカーをクリックした場合に処理
+   $('a[href^="#"]').click(function() {
+      // スクロールの速度
+      var speed = 400; // ミリ秒
+      // アンカーの値取得
+      var href= $(this).attr("href");
+      // 移動先を取得
+      var target = $(href == "#" || href == "" ? 'html' : href);
+      // 移動先を数値で取得
+      var position = target.offset().top;
+      // スムーススクロール
+      $('body,html').animate({scrollTop:position}, speed, 'swing');
+      return false;
+   });
+});
+```
+```Footer-ssi
+<div id="Footer">
+<h2</h2>
+<ul>
+<li class="FirstItem"><a href=""></a></li>
+<li><a href=""></a></li>
+<li><a href=""></a></li>
+<li><a href=""></a></li>
+</ul>
+</div><!--/FooterArea-->
+<!-- START OF SmartSource Data Collector TAG -->
+<!-- Copyright (c)-->
+<!-- Version: 9.4.0 -->
+<!-- Tag Builder Version: 3.3  -->
+<!-- Created:-->
+<script src="/scripts/webtrends.js" type="text/javascript"></script>
+<!-- ----------------------------------------------------------------------------------- -->
+<!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
+<!-- JavaScript include file can cause serious problems with cross-domain tracking.      -->
+<!-- ----------------------------------------------------------------------------------- -->
+<script type="text/javascript">
+//<![CDATA[
+var _tag=new WebTrends();
+_tag.dcsGetId();
+//]]>
+</script>
+<script type="text/javascript">
+//<![CDATA[
+_tag.dcsCustom=function(){
+// Add custom parameters here.
+//_tag.DCSext.param_name=param_value;
+}
+_tag.dcsCollect();
+//]]>
+</script>
+<noscript>
+<div></div>
+</noscript>
+<!-- END OF SmartSource Data Collector TAG -->
 ```

一部不備ありましたので変更しました

2017/07/10 01:23

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -309,9 +309,7 @@
 	float: left;
 }
-/*========== ```ここに言語を入力
-コード
-```リンクボタン ==========*/
+/*==========リンクボタン ==========*/
 .button2 {
 	margin:15px 0 0 0;
 	padding:0px;

記述を変更しました。

2017/07/10 00:57

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -23,7 +23,8 @@
 <div class="Grid4">
 <!--#include virtual="/ssi/footer.txt"-->
-【HTML】
+```HTML
 <!DOCTYPE html>
 <html lang="ja">
 <head>
@@ -85,9 +86,8 @@
 <!--#include virtual="/ssi/footer.txt"-->
 </body>
 </html>
+```
-【CSS】
+```CSS
-/*========== ベース設定 ==========*/
 html{overflow-y: scroll;}
 ul li{
@@ -273,7 +273,7 @@
 	height:500px;
 }
-/*========== 製品一覧 ==========*/
+/*========== 一覧 ==========*/
 .item_box1 {
 	margin:0;
@@ -413,4 +413,5 @@
 	vertical-align: top;
 }
 * html #Footer p {margin: -1.5em auto 0;}
-*:first-child+html #Footer p {margin: -1.5em auto 0;}
+*:first-child+html #Footer p {margin: -1.5em auto 0;}
+```

記述したHTML、CSSを追記しました。

2017/07/10 00:53

投稿

yuika39

スコア18

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -11,4 +11,406 @@
 2：jsで実装可能
 http://weblabla.m-pokoj.net/nav02/
+======================= 追記 ========================
+初心者マークの存在を知らず大変申し訳ありません。
+教えていただきありがとうございました。
+一部リンクなどは削除していますが下記のような記述をしております。
+また以下の記述は固定で変更不可です。
+<div id="Contents">
+<div class="GridSet">
+<div class="Grid4">
+<!--#include virtual="/ssi/footer.txt"-->
+【HTML】
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<title></title>
+<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
+<script type="text/javascript" src="scroll.js"></script>
+<link rel="index"" title="" />
+<link href="" type="text/css" rel="stylesheet" media="screen,print" />
+</head>
+<body>
+<!-- ============== content_start ============= -->
+<div id="Contents">
+<div class="GridSet">
+<div class="Grid4">
+<div class="product">
+<div id="header-fixed">
+<div id="header-bk">
+<a class="logo" href=""><img src=""></a>
+<nav class="global-nav">
+<p><a href="#top">Menu name</a></p>
+<p><a href="#content_1">Menu name</a></p>
+<p><a href="#content_2">Menu name</a></p>
+<p><a href="#content_3">Menu name</a></p>
+<p><a href="#content_4">Menu name</a></p>
+<span class="global-nav--bar"></span>
+</nav>
+</div>
+</div>
+<main id="top">
+<div id="content_1">
+</div>
+<div id="content_2">
+</div>
+<div id="content_3">
+</div>
+<div id="content_4">
+</div>
+</main>
+<div class="Section">
+<ul class="PageTop">
+</ul>
+</div><!--/Section-->
+</div><!--/product-->
+</div><!--/Grid4-->
+</div><!--/GridSet-->
+</div><!--/ContentsArea-->
+<!--#include virtual="/ssi/footer.txt"-->
+</body>
+</html>
+【CSS】
+/*========== ベース設定 ==========*/
+html{overflow-y: scroll;}
+ul li{
+	list-style-type: none;
+}
+img {
+	border: 0px;
+}
+body {
+	margin: 0;
+	padding: 0;
+	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
+	color: #333;
+	font-size: 100%;
+	line-height: 100%;
+	text-align: center;
+	background-color:#333333;
+	-webkit-text-size-adjust: 100%;
+	line-height: 160%;
+}
+sup {
+	margin: auto 1px auto;
+	font-size: 92.2%;
+	vertical-align: 0.15em;
+	line-height: 100%;
+}
+* html body sup {font-size: 105%;}
+*:first-child+html body sup {font-size: 105%;}
+/*========== h3タグ設定 ==========*/
+.title {
+	margin:0 0 25px 0;
+	padding:0;
+	line-height:40px;
+}
+/*========== 画像中央配置 ==========*/
+.img_center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+/*========== ヘッダー ==========*/
+/* ヘッダーの固定 */
+div#header-fixed {
+	background-color:#000000;/* 背景色(黒) */
+	position: fixed;/* ヘッダーの固定 */
+	top: 0px;/* 位置(上0px) */
+	left: 0px;/* 位置(右0px) */
+	width: 100%;/* 横幅100%*/
+	height: 50px;/* 縦幅140px */
+}
+div#header-bk {
+	background-color:#000000;/* 背景色(黒) */
+	margin:0 auto;
+	padding:0;
+	height:50px;/* 縦の高さ*/
+	width:965px;/* 横の幅*/
+}
+/*========== ヘッダーボタン ==========*/
+/* メニュー全体のスタイル */
+.global-nav {
+	position: relative;
+	width: 100%;
+	height: 50px;
+	line-height: 20px;
+	max-width: 720px;
+	margin: 0;
+	float: right;
+}
+/* 各メニューのスタイル */
+.global-nav p {
+	float: left;
+	width: 20%;
+}
+.global-nav p a {
+	display: block;
+	color: #ffffff;
+	text-decoration:none;
+}
+/* 黒いバーのスタイル */
+.global-nav--bar {
+	position: absolute;
+	display: block;
+	bottom: 0;
+	left: 0;
+	width: 20%;
+	height: 5px;
+	background: #ffffff;
+	-webkit-transition: all .5s;
+	transition: all .5s;
+}
+/* ホバーでバーの位置を変化 */
+.global-nav p:nth-child(1):hover ~ .global-nav--bar {
+	left: 0;
+}
+.global-nav p:nth-child(2):hover ~ .global-nav--bar {
+	left: 20%;
+}
+.global-nav p:nth-child(3):hover ~ .global-nav--bar {
+	left: 40%;
+}
+.global-nav p:nth-child(4):hover ~ .global-nav--bar {
+	left: 60%;
+}
+.global-nav p:nth-child(5):hover ~ .global-nav--bar {
+	left: 80%;
+}
+.logo{
+	margin:0;
+	padding:0;
+	height:50px;
+	width:200px;
+	float:left;
+}
+/*========== メインコンテンツ基本設定 ==========*/
+div.product {
+	margin:0;
+	padding:0;
+	width:965px;
+	display:inline-block;
+	font-size:83%;
+}
+/*========== メイン ==========*/
+main#top{
+	background-color:#333333;
+	margin:0;
+	padding:80px 0 0 0;
+}
+/*========== メインコンテンツ ==========*/
+div.top_img{
+	margin:0;
+	padding:0;
+	width:965px;
+	height:600px;
+}
+div#content_1 {
+	margin:0 30px 0 30px;
+	padding:60px 0 0 0;
+	width:905px;
+	height:500px;
+}
+div#content_2{
+	margin:0 30px 0 30px;
+	padding:60px 0 0 0;
+	width:905px;
+	height:500px;
+}
+div#content_3{
+	margin:0 30px 0 30px;
+	padding:60px 0 0 0;
+	width:905px;
+	height:500px;
+}
+div#content_4{
+	margin:0 30px 0 30px;
+	padding:60px 0 0 0;
+	width:905px;
+	height:500px;
+}
+div#content_5{
+	margin:0 30px 0 30px;
+	padding:60px 0 0 0;
+	width:905px;
+	height:500px;
+}
+/*========== 製品一覧 ==========*/
+.item_box1 {
+	margin:0;
+	padding:0;
+	width:905px;
+	height:173px;
+	font-size:0;
+}
+.item_box2 {
+	margin:10px 0 0 0;
+	padding:0;
+	width:905px;
+	height:173px;
+	font-size:0;
+}
+.item1 {
+	margin:0 10px 0 0;
+	padding:0;
+	width:173px;
+	height:173px;
+	line-height:173px;
+	float: left;
+}
+.item2 {
+	margin:0;
+	padding:0;
+	width:173px;
+	height:173px;
+	line-height:173px;
+	float: left;
+}
+/*========== ```ここに言語を入力
+コード
+```リンクボタン ==========*/
+.button2 {
+	margin:15px 0 0 0;
+	padding:0px;
+	background-color: #C4C4C4;
+	color: #fff;
+	display: inline-block;
+	width:905px;
+	height:35px;
+	text-align: center;
+	text-decoration: none;
+	line-height:35px;
+	outline: none;
+}
+.button:hover{
+	background-color: #009933;
+}
+.button::before,
+.button::after {
+	position: absolute;
+	z-index: -1;
+	display: block;
+	content: '';
+}
+.button,
+.button::before,
+.button::after{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-transition: all .3s;
+	transition: all .3s;
+}
+/*========== フッター ==========*/
+#Footer {
+	clear: both;
+	min-width: 965px;
+	padding: 30px 0;
+	background-color: #e5e5e5;
+	overflow: hidden;
+	clear:both;
+}
+#Footer h2 {
+	margin: 0;
+	padding: 0;
+	border: none;
+	line-height: 0;
+	text-indent: -9999px;
+}
+#Footer ul {
+	width: 965px;
+	margin: 0 auto;
+	font-size: 67%;
+}
+#Footer li {
+	float: left;
+	padding: 0 10px;
+	border-left: solid 1px #bbb;
+	line-height: 1.5em;
+	vertical-align: top;
+}
+* html #Footer li {
+	position: relative;
+	z-index: 2;
+}
+*:first-child+html #Footer li {
+	position: relative;
+	z-index: 2;
+}
+#Footer li.FirstItem {
+	padding: 0 10px 0 0;
+	border-left: none;
+}
+#Footer li a:link,
+#Footer li a:visited {
+	color: #333;
+	text-decoration: none;
+}
-###発生している問題・エラーメッセージ
+#Footer li a:hover,
+#Footer li a:active {
+	color: #b1000e;
+	text-decoration: underline;
+}
+#Footer p {
+	width: 965px;
+	margin: 0 auto;
+	font-size: 65%;
+	text-align: right;
+	line-height: 1.5em;
+	color: #333;
+	vertical-align: top;
+}
+* html #Footer p {margin: -1.5em auto 0;}
+*:first-child+html #Footer p {margin: -1.5em auto 0;}