8-2-1 ページ内の指定の場所にスクロール

diff --git a/.DS_Store b/.DS_Store index 0e60c88..2e03283 100644 --- a/.DS_Store +++ b/.DS_Store Binary files differ diff --git a/Araki/loading.jpg b/Araki/loading.jpg new file mode 100644 index 0000000..4d85b2e --- /dev/null +++ b/Araki/loading.jpg Binary files differ diff --git a/Araki/loading2.jpg b/Araki/loading2.jpg new file mode 100644 index 0000000..fd946b3 --- /dev/null +++ b/Araki/loading2.jpg Binary files differ diff --git a/Araki/ramen3.jpg b/Araki/ramen3.jpg new file mode 100644 index 0000000..96052e0 --- /dev/null +++ b/Araki/ramen3.jpg Binary files differ diff --git a/Araki/ramen4.jpg b/Araki/ramen4.jpg new file mode 100644 index 0000000..9a3a0cc --- /dev/null +++ b/Araki/ramen4.jpg Binary files differ diff --git a/Araki/ramen5.jpg b/Araki/ramen5.jpg new file mode 100644 index 0000000..f9ab8ed --- /dev/null +++ b/Araki/ramen5.jpg Binary files differ diff --git a/Araki/system_d.css b/Araki/system_d.css new file mode 100644 index 0000000..d6421b4 --- /dev/null +++ b/Araki/system_d.css @@ -0,0 +1,143 @@ +@charset "utf-8"; + + +/*========= レイアウトのためのCSS ===============*/ + +h1{ + font-size:1.2rem; +} + +h2{ + font-size:1.2rem; + text-align: center; + margin: 0 0 30px 0; +} + +p{ + margin-top:20px; +} + +small{ + background:#333; + color:#fff; + display: block; + text-align: center; + padding:20px; +} + +#header{ + background:rgb(208, 187, 29); + color:rgb(243, 242, 239); + text-align: center; + padding: 20px; +} + +section{ + padding:30px; +} + +section:nth-child(2n){ + background:#f5deb3; +} + +#main-vidual img{ + width: 100%; +} + +#page-link{ + display: flex; + justify-content: center; + padding: 20px; +} + +#page-link li{ + list-style: none; +} + +#page-link li a{ + color: rgb(2, 2, 20); + padding:0 20px; + text-decoration: none; +} + +#page-link li a::before{ + content:'▼'; + font-size:0.8rem; + padding:0 10px 0 0; + color: #4169e1; +} + +#footer{ + position: relative; + z-index: 2; +} + +/*========= LoadingのためのCSS ===============*/ + +/* Loading背景画面設定　*/ +#splash { + /*fixedで全面に固定*/ + position: fixed; + width: 100%; + height: 100%; + z-index: 999; + background:rgb(254, 254, 254); + text-align:center; + color:rgb(255, 249, 249); +} + +/* Loading画像中央配置　*/ +#splash_logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* Loading アイコンの大きさ設定　*/ +#splash_logo img { + width: 800px; +} + +/* fadeUpをするアイコンの動き */ + +.fadeUp{ +animation-name: fadeUpAnime; +animation-duration:0.5s; +animation-fill-mode:forwards; +opacity: 0; +} + +@keyframes fadeUpAnime{ + from { + opacity: 0; + transform: translateY(100px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + + + +/*========= レイアウトのためのCSS ===============*/ + +#container{ + width:100%; + height: 100vh; + background: #ccc; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +a{ + color: #333; +} + +a:hover{ + text-decoration: none; +} \ No newline at end of file diff --git a/Araki/system_d.html b/Araki/system_d.html new file mode 100644 index 0000000..52b6082 --- /dev/null +++ b/Araki/system_d.html @@ -0,0 +1,84 @@ + + + + +8-2-1 ページ内の指定の場所にスクロール + + + + + + + + + + + + + + + + + + + +

+ + + + + + + + + +

悟空
ラーメン店２
ラーメン店３

悟空

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

Area 2

+ +

Area 3

+ +

+ + + + + + + \ No newline at end of file diff --git a/Araki/system_d.js b/Araki/system_d.js new file mode 100644 index 0000000..23fcd1e --- /dev/null +++ b/Araki/system_d.js @@ -0,0 +1,12 @@ +$('#page-link a[href*="#"]').click(function () { + var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得 + var pos = $(elmHash).offset().top; //idの上部の距離を取得 + $('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール + return false; + }); + + //logoの表示 +$(window).on('load',function(){ + $("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェードアウト + $("#splash_logo").delay(1200).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト + }); \ No newline at end of file diff --git a/Araki/system_d2.css b/Araki/system_d2.css new file mode 100644 index 0000000..1b1b3f8 --- /dev/null +++ b/Araki/system_d2.css @@ -0,0 +1,334 @@ +/*! + * ress.css 窶｢ v1.2.2 + * MIT License + * github.com/filipelinhares/ress + */ + +/* # ================================================================= + # Global selectors + # ================================================================= */ + + html { + box-sizing: border-box; + overflow-y: scroll; /* All browsers without overlaying scrollbars */ + -webkit-text-size-adjust: 100%; /* iOS 8+ */ + } + + *, + ::before, + ::after { + background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ + box-sizing: inherit; + } + + ::before, + ::after { + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ + vertical-align: inherit; + } + + * { + padding: 0; /* Reset `padding` and `margin` of all elements */ + margin: 0; + } + + /* # ================================================================= + # General elements + # ================================================================= */ + + /* Add the correct display in iOS 4-7.*/ + audio:not([controls]) { + display: none; + height: 0; + } + + hr { + overflow: visible; /* Show the overflow in Edge and IE */ + } + + /* + * Correct `block` display not defined for any HTML5 element in IE 8/9 + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox + * Correct `block` display not defined for `main` in IE 11 + */ + article, + aside, + details, + figcaption, + figure, + footer, + header, + main, + menu, + nav, + section, + summary { + display: block; + } + + summary { + display: list-item; /* Add the correct display in all browsers */ + } + + small { + font-size: 80%; /* Set font-size to 80% in `small` elements */ + } + + [hidden], + template { + display: none; /* Add the correct display in IE */ + } + + abbr[title] { + border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */ + text-decoration: none; /* Remove text decoration in Firefox 40+ */ + } + + a { + background-color: transparent; /* Remove the gray background on active links in IE 10 */ + -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */ + } + + a:active, + a:hover { + outline-width: 0; /* Remove the outline when hovering in all browsers */ + } + + code, + kbd, + pre, + samp { + font-family: monospace, monospace; /* Specify the font family of code elements */ + } + + b, + strong { + font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */ + } + + dfn { + font-style: italic; /* Address styling not present in Safari and Chrome */ + } + + /* Address styling not present in IE 8/9 */ + mark { + background-color: #ff0; + color: #000; + } + + /* https://gist.github.com/unruthless/413930 */ + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* # ================================================================= + # Forms + # ================================================================= */ + + input { + border-radius: 0; + } + + /* Apply cursor pointer to button elements */ + button, + [type="button"], + [type="reset"], + [type="submit"], + [role="button"] { + cursor: pointer; + } + + /* Replace pointer cursor in disabled elements */ + [disabled] { + cursor: default; + } + + [type="number"] { + width: auto; /* Firefox 36+ */ + } + + [type="search"] { + -webkit-appearance: textfield; /* Safari 8+ */ + } + + [type="search"]::-webkit-search-cancel-button, + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; /* Safari 8 */ + } + + textarea { + overflow: auto; /* Internet Explorer 11+ */ + resize: vertical; /* Specify textarea resizability */ + } + + button, + input, + optgroup, + select, + textarea { + font: inherit; /* Specify font inheritance of form elements */ + } + + optgroup { + font-weight: bold; /* Restore the font weight unset by the previous rule. */ + } + + button { + overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ + } + + /* Remove inner padding and border in Firefox 4+ */ + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: 0; + padding: 0; + } + + /* Replace focus style removed in the border reset above */ + button:-moz-focusring, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + outline: 1px dotted ButtonText; + } + + button, + html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ + [type="reset"], + [type="submit"] { + -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ + } + + button, + select { + text-transform: none; /* Firefox 40+, Internet Explorer 11- */ + } + + /* Remove the default button styling in all browsers */ + button, + input, + select, + textarea { + background-color: transparent; + border-style: none; + color: inherit; + } + + /* Style select like a standard input */ + select { + -moz-appearance: none; /* Firefox 36+ */ + -webkit-appearance: none; /* Chrome 41+ */ + } + + select::-ms-expand { + display: none; /* Internet Explorer 11+ */ + } + + select::-ms-value { + color: currentColor; /* Internet Explorer 11+ */ + } + + legend { + border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ + color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ + display: table; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge and IE */ + white-space: normal; /* Correct the text wrapping in Edge and IE */ + } + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */ + font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ + } + + [type="search"] { + -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ + outline-offset: -2px; /* Correct the outline style in Safari */ + } + + /* # ================================================================= + # Specify media element style + # ================================================================= */ + + img { + border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ + } + + /* Add the correct vertical alignment in Chrome, Firefox, and Opera */ + progress { + vertical-align: baseline; + } + + svg:not(:root) { + overflow: hidden; /* Internet Explorer 11- */ + } + + audio, + canvas, + progress, + video { + display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */ + } + + /* # ================================================================= + # Accessibility + # ================================================================= */ + + /* Hide content from screens but not screenreaders */ + @media screen { + [hidden~="screen"] { + display: inherit; + } + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + position: absolute !important; + clip: rect(0 0 0 0) !important; + } + } + + /* Specify the progress cursor of updating elements */ + [aria-busy="true"] { + cursor: progress; + } + + /* Specify the pointer cursor of trigger elements */ + [aria-controls] { + cursor: pointer; + } + + /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ + [aria-disabled] { + cursor: default; + } + + /* # ================================================================= + # Selection + # ================================================================= */ + + /* Specify text selection background color and omit drop shadow */ + + ::-moz-selection { + background-color: #ebb14b; /* Required when declaring ::selection */ + color: #000; + text-shadow: none; + } + + ::selection { + background-color: #b3d4fc; /* Required when declaring ::selection */ + color: #000; + text-shadow: none; + } \ No newline at end of file diff --git a/Araki/title.jpg b/Araki/title.jpg new file mode 100644 index 0000000..d36d3d4 --- /dev/null +++ b/Araki/title.jpg Binary files differ diff --git a/komatsu/VR.html b/komatsu/VR.html index c4f7c05..8c29d98 100644 --- a/komatsu/VR.html +++ b/komatsu/VR.html @@ -1,121 +1,45 @@ - - - - - vr - - - - - - - - - - - - - - - - - - - + + + + + + VR a-frame + + + + + + + +

一押し！みそ坦々麺スペシャル

+ 味わいの中には辛さだけでなく、うまさがぎゅっと濃縮されており、汗とよだれがとまりません。 +

320px × 200px