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

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

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

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

Q&A

1回答

185閲覧

レスポンシブルデザインについて

sutosi

総合スコア27

HTML

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

1グッド

0クリップ

投稿2017/08/26 14:49

ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。
ちなみにこちらのサイトを参考にしました
https://share-life.biz/web/responsive-menu/

<meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <!--レスポンシブルデザインをするためにjqueryなどを読み込む--> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="jquery.meanmenu.js"></script> <script> $(document).ready(function() { $('nav').meanmenu(); }); </script> <title>RWD</title> </head> <body> <header> <div class="container"> <i class="fa fa-bars mobile-menu" aria-hidden="true"></i> <ul class="pc-menu"> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> <h1>油そば池袋</h1> </div> <section class="features"><!--section1--> <h2>Features</h2> <div class="item"> <img src="img/feature.jpg"> <p class="right-side">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> <div class="item"> <img src="img/feature.jpg"> <p class="left-side">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> <div class="item"> <img src="img/feature.jpg"> <p class="right-sidet">hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> </div> </section> </header> <footer> <p>dotinstall.com</p> </footer> </body> </html> コード

CSS

1/*1----------------------------------------------------------------------------------*/ 2@charset "utf-8"; 3/*common*/ 4 5body{/*初期設定、余計なmargin,paddingを0に*/ 6font-size: 14px; 7font-family: Verdana, sans-serif; 8margin: 0; 9padding: 0; 10color: #333; 11background: #f8f8f8; 12/*初期設定*/ 13} 14p{/*行間がゆったりする*/ 15line-height: 2; 16} 17 18.container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 19 左右に一定の空きができる*/ 20 width: 90%; 21 margin: 0 auto; 22} 23 24/*header-mobile-menuはアイコン右寄せ*/ 25.mobile-menu{ 26float: right; 27font-size: 24px; 28cursor: pointer; 29} 30 31.pc-menu{ 32display: none; 33} 34 35.pc-menu{ 36display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 37/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 38list-style: none; 39padding: 10px; 40margin: 0; 41/*余計なマージンパディング取る、*/ 42float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ 43} 44 45.pc-menu > li { 46display: inline-block;/*横にする設定*/ 47width: 60px; 48text-align: center; 49cursor: pointer; 50} 51 52/*レスポンシブルデザイン設定①*/ 53/*幅の大きさが変わる設定*/ 54/*画面が570px以下になったとき*/ 55@media (max-width: 414px){ 56 .pc-menu{/*アイコンを消す*/ 57 display: none; 58 } 59.features p{ 60 width: 45%; 61} 62.features img{ 63 width: 50%; 64} 65/*.pull-right*/ 66.right-side{ 67 float: right; 68 padding-left: 5%; 69} 70/*.pull-left*/ 71.left-side{ 72 float: left; 73 padding-right: 5%; 74} 75.features .item{/*float:leftやrightを使ったので*/ 76 overflow: hidden; 77} 78.news .container{ 79 display: flex; 80 justify-content: space-between;/*均等に余白が空く設定*/ 81} 82.news .item{/*newsに入っている画像と文字に対して30%*/ 83 width: 30%; 84} 85.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 86 width: 100%; 87} 88} 89/*画面が570px以上になったとき 90min-widthが〇〇以上、max-widthが〇〇までという認識*/ 91@media (min-width: 414px){ 92.container{ 93 width: 414px; 94} 95.mobile-menu{/*アイコンを消す*/ 96display: none; 97} 98} 99/*1----------------------------------------------------------------------------------*/ 100 101section{/*共通のスタイル、上下にサイズがほしい*/ 102 padding: 60px 0; 103} 104 105section h2{/*文字を中央ぞろえ、下にマージン空き*/ 106 text-align: center; 107} 108 109section:nth-child(even){/*背景色の切り替え*/ 110 background: #fff; 111} 112 113/*features*/ 114.features img{/*親要素音containerに対して100%の設定なので左右ぴったりになった*/ 115 width: 100%; 116} 117 118.features .item{/*写真と文字を囲っているfeaturesの下の空き*/ 119 margin-bottom: 60px; 120 margin-left: 60px; 121 margin-right: 60px; 122} 123 124.features .item:last-child{/*これにだけ指定という意味*/ 125 margin-bottom: 0; 126} 127 128.news .item:last-child{/*これにだけ指定という意味*/ 129 margin-bottom: 0; 130} 131 132/*footer*/ 133 134footer { 135 text-align: center; 136 color: ccc; 137 padding: 60px 0; 138} 139 140コード
namonakihitowa👍を押しています

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

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

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

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

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

syuus

2017/08/26 15:02 編集

sutosiさんの参考にされたサイトに実装方法が記載されているのですが、どういったことに困られているのでしょうか。また、レスポンシブルではなくレスポンシブですので、タイトルを修正されたほうがよいかと思います。
guest

回答1

0

以下のように行うことで質問者さんの想像するような動作が実現できると思いますが、いかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> 8 <title>タイトル</title> 9 <style type="text/css">body { 10 font-size: 14px; 11 font-family: Verdana, sans-serif; 12 margin: 0; 13 padding: 0; 14 color: #333; 15 background: #f8f8f8 16 } 17 18 p { 19 line-height: 2 20 } 21 22 .container { 23 width: 90%; 24 margin: 0 auto 25 } 26 27 .mobile-menu { 28 float: right; 29 font-size: 24px; 30 cursor: pointer 31 } 32 33 .pc-menu { 34 display: none 35 } 36 37 .pc-menu { 38 display: block; 39 list-style: none; 40 padding: 10px; 41 margin: 0; 42 float: right 43 } 44 45 .pc-menu > li { 46 display: inline-block; 47 width: 60px; 48 text-align: center; 49 cursor: pointer 50 } 51 52 @media (max-width: 414px) { 53 .pc-menu { 54 display: none 55 } 56 57 .features p { 58 width: 45% 59 } 60 61 .features img { 62 width: 50% 63 } 64 65 .right-side { 66 float: right; 67 padding-left: 5% 68 } 69 70 .left-side { 71 float: left; 72 padding-right: 5% 73 } 74 75 .features .item { 76 overflow: hidden 77 } 78 79 .news .container { 80 display: flex; 81 justify-content: space-between 82 } 83 84 .news .item { 85 width: 30% 86 } 87 88 .news .item img { 89 width: 100% 90 } 91 } 92 93 @media (min-width: 414px) { 94 .container { 95 width: 414px 96 } 97 98 .mobile-menu { 99 display: none 100 } 101 } 102 103 section { 104 padding: 60px 0 105 } 106 107 section h2 { 108 text-align: center 109 } 110 111 section:nth-child(even) { 112 background: #fff 113 } 114 115 .features img { 116 width: 100% 117 } 118 119 .features .item { 120 margin-bottom: 60px; 121 margin-left: 60px; 122 margin-right: 60px 123 } 124 125 .features .item:last-child { 126 margin-bottom: 0 127 } 128 129 .news .item:last-child { 130 margin-bottom: 0 131 } 132 133 footer { 134 text-align: center; 135 color: #ccc; /* cccではなくて#ccc */ 136 padding: 60px 0 137 }</style> 138</head> 139<body> 140<header> 141 <div class="container"> 142 <i class="fa fa-bars mobile-menu" aria-hidden="true"></i> 143 <ul class="pc-menu"> 144 <li>Menu</li> 145 <li>Menu</li> 146 <li>Menu</li> 147 </ul> 148 <h1>油そば池袋</h1> 149 </div> 150 <section class="features"> 151 <h2>Features</h2> 152 <div class="item"> 153 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/feature.jpg" alt=""> 154 <p class="right-side">hello. hello. hello. hello. hello. hello. hello. 155 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 156 </div> 157 158 <div class="item"> 159 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/feature.jpg" alt=""> 160 <p class="left-side">hello. hello. hello. hello. hello. hello. hello. 161 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 162 </div> 163 164 <div class="item"> 165 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/feature.jpg" alt=""> 166 <p class="right-sidet">hello. hello. hello. hello. hello. hello. hello. 167 hello. hello. hello. hello. hello. hello. hello. hello. hello. </p> 168 </div> 169 </section> 170</header> 171<footer> 172 <p>dotinstall.com</p> 173</footer> 174<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 175<script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 176<script> 177 $(function () { 178 $("div.container").meanmenu({}); 179 }); 180</script> 181</body> 182</html>

投稿2017/08/26 22:26

s8_chu

総合スコア14731

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問