質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1414閲覧

スマホサイズにした際のハンバーガーメニューを開いた先ががトップ画像の裏側に表記されてしまう。

TakahiroYagi

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/04 08:18

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>NISHIO</title> 6 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> 7 <link rel="stylesheet" href="css/styles.css"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 11<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 12 13<script type="text/javascript"> 14 $(document).ready(function(){ 15 $('.slider').bxSlider({ 16 auto: true, 17 pause: 5000, 18 }); 19 }); 20</script> 21 22</head> 23<body> 24 <header> 25 <div class="container"> 26 <i id="open_menu" class="fas fa-bars"></i> 27 <nav id="menu"> 28 <i id="close_menu" class="fas fa-times"></i> 29 <ul> 30 <li><a href="#">Suport</a></li> 31 <li><a href="#">News</a></li> 32 <li><a href="#">Contact</a></li> 33 </ul> 34 </nav> 35 <h1>NISHIO</h1> 36 </div> 37 </header> 38 39<div class="topimg"> 40 <div class="slider"> 41<img src="img/bg.png" width="" alt=""> 42<img src="img/bg.png" width="" alt=""> 43</div> 44 45</div> 46 <section class="features"> 47 <div class="container"> 48 <h1 class="section-title">What's NISHIO</h1> 49 <h4>東京秋葉原イベント会場、ゲーミング機器レンタル<br>e-Sportsはお任せください。</h4> 50 <section class="feature"> 51 <img src="img/feature1.png"> 52 <p><span>秋葉原UDXイベント会場</span><br>会場設備・機材設備はお任せください。イベント実績年間1000件をこなす実績がございます。</p> 53 </section> 54 <section class="feature"> 55 <img src="img/feature2.png"> 56 <p><span>ゲーミング機器レンタル</span><br>会場設備・機材設備はお任せください。イベント実績年間1000件をこなす実績がございます。</p> 57 </section> 58 <section class="feature"> 59 <img src="img/feature3.png"> 60 <p><span>e-Sports協会公認</span><br>会場設備・機材設備はお任せください。イベント実績年間1000件をこなす実績がございます。</p> 61 </section> 62 </div> 63 </section> 64 65 <section class="news"> 66 <div class="container"> 67 <h1 class="section-title">News</h1> 68 <div class="flex"> 69 <article class="news-item"> 70 <img src="img/news.png"> 71 <p>e-Sports協会公認レンタル業者となりました。e-sports会場・機材はお任せください。 </p> 72 </article> 73 <article class="news-item"> 74 <img src="img/news.png"> 75 <p>秋葉原UDXにてe-sports会場をご用意。お気軽にお越しください。</p> 76 </article> 77 <article class="news-item"> 78 <img src="img/news.png"> 79 <p>ゲーミングPC、ゲーミングモニター等同機種で50台以上保有数がございます。機材だけのご利用も可能です。</p> 80 </article> 81 </div> 82 </div> 83 </section> 84 85 <section class="how-to-use"> 86 <div class="container"> 87 <h1 class="section-title">Movie</h1> 88 <div class="iframe-wrapper"> 89 <iframe width="560" height="315" src="https://www.youtube.com/embed/ZJDT4udFec4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 90 </div> 91 </div> 92 </section> 93 94 95 <footer> 96 &copy; Nishio rentall 97 </footer> 98 99 <script> 100 (function() { 101 'use strict'; 102 103 var openMenu = document.getElementById('open_menu'); 104 var closeMenu = document.getElementById('close_menu'); 105 var menu = document.getElementById('menu'); 106 107 openMenu.addEventListener('click', function() { 108 menu.classList.add('shown'); 109 }); 110 111 closeMenu.addEventListener('click', function() { 112 menu.classList.remove('shown'); 113 }); 114 })(); 115 </script> 116</body> 117</html>

css

1* small screens */ 2 3body { 4 background: #2c2a2a; 5 font-size: 14px; 6 font-family: Verdana, sans-serif; 7 margin: 0; 8 color: white; 9 10} 11 12p {f 13 line-height: 2; 14} 15 16.container { 17 width: 90%; 18 margin: 0 auto; 19} 20 21body > section { 22 padding: 60px 0; 23} 24 25body > section:nth-of-type(odd) { 26 background: #232222; 27} 28 29.section-title { 30 text-align: center; 31 font-weight: normal; 32 margin: 0 0 40px; 33} 34 35 36 37.features h4{ 38 text-align: center; 39 font-weight: normal; 40 margin: 5px 0 60px; 41} 42 43.topimg img{ 44 width: 100%; 45 box-shadow: 6px 6px #black; 46} 47 48 49header h1 { 50 font-size: 28px; 51 font-weight: normal; 52} 53 54#menu { 55 position: absolute; 56 top: 0; 57 left: 0; 58 right: 0; 59 background: rgba(0, 0, 0, .9); 60 color: #fff; 61 display: none; 62} 63 64#menu.shown { 65 display: block; 66} 67 68#menu ul { 69 list-style: none; 70 margin: 0; 71 padding: 10px 20px; 72} 73 74#menu li { 75 line-height: 2; 76} 77 78#menu a { 79 text-decoration: none; 80 color: white; 81} 82 83#open_menu { 84 float: right; 85 font-size: 24px; 86 cursor: pointer; 87} 88 89#close_menu { 90 padding: 15px; 91 float: right; 92 cursor: pointer; 93} 94 95.feature img { 96 width: 100%; 97 box-shadow: 6px 6px #black; 98} 99 100.feature:not(:last-child) { 101 margin-bottom: 60px; 102} 103 104.news-item img { 105 width: 100%; 106 box-shadow: 6px 6px #black; 107} 108 109.news-item:not(:last-child) { 110 margin-bottom: 60px; 111} 112 113.how-to-use iframe { 114 position: absolute; 115 width: 100%; 116 height: 100%; 117 top: 0; 118 left: 0; 119} 120 121.how-to-use .iframe-wrapper { 122 padding-bottom: 56.25%; 123 height: 0; 124 position: relative; 125} 126 127footer { 128 text-align: center; 129 padding: 60px 0; 130 color: #ccc; 131} 132 133.feature p{ 134 display: table-cell; /* IE8から使用可能 */ 135 vertical-align: middle; 136} 137 138span{ 139 font-size:20px; 140 font-weight: bold; 141} 142 143 144/* medium screens */ 145 146@media (min-width: 570px) { 147 148 .feature img { 149 width: 50%; 150 box-shadow: 6px 6px #black; 151 } 152 153 .feature p { 154 width: 45%; 155 } 156 157 .feature:nth-of-type(odd) p { 158 float: right; 159 padding-left: 5%; 160 padding-top:100px; 161 } 162 163 .feature:nth-of-type(even) p { 164 float: left; 165 padding-right: 5%; 166 padding-top:100px; 167 } 168 169 .feature { 170 overflow: hidden; 171 } 172 173 .news .flex { 174 display: flex; 175 justify-content: space-between; 176 } 177 178 .news-item { 179 width: 30%; 180 } 181 182} 183 184/* large screens */ 185 186@media (min-width: 912px) { 187.section-title{ 188 font-size:40px; 189} 190 191 .container { 192 width: 1000px; 193 } 194 195 #open_menu { 196 display: none; 197 } 198 199 #close_menu { 200 display: none; 201 } 202 203 #menu { 204 display: block; 205 position: static; 206 background: transparent; 207 color: #333; 208 } 209 210 #menu ul { 211 padding: 0; 212 float: right; 213 } 214 215 #menu li { 216 display: inline-block; 217 width: 60px; 218 text-align: center; 219 } 220 221}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/04 11:53

それで何が聞きたいんですか?
guest

回答1

0

ベストアンサー

こういうことですか?
今度から**(何を)どう実現したくて(ご自身で)どうしたか**は記載してちょんまげ~

※こちらで手を加えたところ(2箇所)は/* 追記 */としてます。

css

1 2/* small screens */ 3 4body { 5 background: #2c2a2a; 6 font-size: 14px; 7 font-family: Verdana, sans-serif; 8 margin: 0; 9 color: white; 10 11} 12 13p { 14 line-height: 2; 15} 16 17.container { 18 width: 90%; 19 margin: 0 auto; 20} 21 22body > section { 23 padding: 60px 0; 24} 25 26body > section:nth-of-type(odd) { 27 background: #232222; 28} 29 30.section-title { 31 text-align: center; 32 font-weight: normal; 33 margin: 0 0 40px; 34} 35 36 37 38.features h4{ 39 text-align: center; 40 font-weight: normal; 41 margin: 5px 0 60px; 42} 43 44.topimg img{ 45 width: 100%; 46 box-shadow: 6px 6px #black; 47} 48 49/* 追記 */ 50.bx-wrapper{ 51 z-index:1; 52} 53 54header h1 { 55 font-size: 28px; 56 font-weight: normal; 57} 58 59#menu { 60 position: absolute; 61 top: 0; 62 left: 0; 63 right: 0; 64 background: rgba(0, 0, 0, .9); 65 color: #fff; 66 display: none; 67 z-index:2;/* 追記 */ 68} 69 70#menu.shown { 71 display: block; 72} 73 74#menu ul { 75 list-style: none; 76 margin: 0; 77 padding: 10px 20px; 78} 79 80#menu li { 81 line-height: 2; 82} 83 84#menu a { 85 text-decoration: none; 86 color: white; 87} 88 89#open_menu { 90 float: right; 91 font-size: 24px; 92 cursor: pointer; 93} 94 95#close_menu { 96 padding: 15px; 97 float: right; 98 cursor: pointer; 99} 100 101.feature img { 102 width: 100%; 103 box-shadow: 6px 6px #black; 104} 105 106.feature:not(:last-child) { 107 margin-bottom: 60px; 108} 109 110.news-item img { 111 width: 100%; 112 box-shadow: 6px 6px #black; 113} 114 115.news-item:not(:last-child) { 116 margin-bottom: 60px; 117} 118 119.how-to-use iframe { 120 position: absolute; 121 width: 100%; 122 height: 100%; 123 top: 0; 124 left: 0; 125} 126 127.how-to-use .iframe-wrapper { 128 padding-bottom: 56.25%; 129 height: 0; 130 position: relative; 131} 132 133footer { 134 text-align: center; 135 padding: 60px 0; 136 color: #ccc; 137} 138 139.feature p{ 140 display: table-cell; /* IE8から使用可能 */ 141 vertical-align: middle; 142} 143 144span{ 145 font-size:20px; 146 font-weight: bold; 147} 148 149 150/* medium screens */ 151 152@media (min-width: 570px) { 153 154 .feature img { 155 width: 50%; 156 box-shadow: 6px 6px #black; 157 } 158 159 .feature p { 160 width: 45%; 161 } 162 163 .feature:nth-of-type(odd) p { 164 float: right; 165 padding-left: 5%; 166 padding-top:100px; 167 } 168 169 .feature:nth-of-type(even) p { 170 float: left; 171 padding-right: 5%; 172 padding-top:100px; 173 } 174 175 .feature { 176 overflow: hidden; 177 } 178 179 .news .flex { 180 display: flex; 181 justify-content: space-between; 182 } 183 184 .news-item { 185 width: 30%; 186 } 187 188} 189 190/* large screens */ 191 192@media (min-width: 912px) { 193.section-title{ 194 font-size:40px; 195} 196 197 .container { 198 width: 1000px; 199 } 200 201 #open_menu { 202 display: none; 203 } 204 205 #close_menu { 206 display: none; 207 } 208 209 #menu { 210 display: block; 211 position: static; 212 background: transparent; 213 color: #333; 214 } 215 216 #menu ul { 217 padding: 0; 218 float: right; 219 } 220 221 #menu li { 222 display: inline-block; 223 width: 60px; 224 text-align: center; 225 } 226 227}

投稿2019/03/06 03:31

Yousuck

総合スコア349

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問