この画像の上部の油そば池袋とありますが幅を小さくしていくと
赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> <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"> <!--スマホで開いたとき度の幅で描画するかの設定--> <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> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> <script> $(function () { $("div.container").meanmenu({}); }); </script> </body> </html> ```style.css /*1----------------------------------------------------------------------------------*/ @charset "utf-8"; /*common*/ body{/*初期設定、余計なmargin,paddingを0に*/ font-size: 14px; font-family: Verdana, sans-serif; margin: 0; padding: 0; color: #333; background: #f8f8f8; /*初期設定*/ } p{/*行間がゆったりする*/ line-height: 2; } .container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width: 90%; margin: 0 auto; } /*header-mobile-menuはアイコン右寄せ*/ .mobile-menu{ float: right; font-size: 24px; cursor: pointer; } .pc-menu{ display: none; } .pc-menu{ display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ list-style: none; padding: 10px; margin: 0; /*余計なマージンパディング取る、*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } .pc-menu > li { display: inline-block;/*横にする設定*/ width: 60px; text-align: center; cursor: pointer; } /*レスポンシブルデザイン設定①*/ /*幅の大きさが変わる設定*/ /*画面が570px以下になったとき*/ @media (max-width: 414px){ .pc-menu{/*アイコンを消す*/ display: none; } .features p{ width: 45%; } .features img{ width: 50%; } /*.pull-right*/ .right-side{ float: right; padding-left: 5%; } /*.pull-left*/ .left-side{ float: left; padding-right: 5%; } .features .item{/*float:leftやrightを使ったので*/ overflow: hidden; } .news .container{ display: flex; justify-content: space-between;/*均等に余白が空く設定*/ } .news .item{/*newsに入っている画像と文字に対して30%*/ width: 30%; } .news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ width: 100%; } } /*画面が570px以上になったとき min-widthが〇〇以上、max-widthが〇〇までという認識*/ @media (min-width: 414px){ .container{ width: 414px; } .mobile-menu{/*アイコンを消す*/ display: none; } } /*1----------------------------------------------------------------------------------*/ section{/*共通のスタイル、上下にサイズがほしい*/ padding: 60px 0; } section h2{/*文字を中央ぞろえ、下にマージン空き*/ text-align: center; } section:nth-child(even){/*背景色の切り替え*/ background: #fff; } /*features*/ .features img{/*親要素音containerに対して100%の設定なので左右ぴったりになった*/ width: 100%; } .features .item{/*写真と文字を囲っているfeaturesの下の空き*/ margin-bottom: 60px; margin-left: 60px; margin-right: 60px; } .features .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } .news .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*footer*/ footer { text-align: center; color: ccc; padding: 60px 0; } ```meanmenu.css /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */ /* hide the link until viewport size is reached */ a.meanmenu-reveal { display: none; } /* when under viewport size, .mean-container is added to body */ .mean-container .mean-bar { float: left; width: 100%; position: relative; background: #0c1923; padding: 4px 0; min-height: 42px; z-index: 999999; } .mean-container a.meanmenu-reveal { width: 22px; height: 22px; padding: 13px 13px 11px 13px; position: absolute; top: 0; right: 0; cursor: pointer; color: #fff; text-decoration: none; font-size: 16px; text-indent: -9999em; line-height: 22px; font-size: 1px; display: block; font-family: Arial, Helvetica, sans-serif; font-weight: 700; } .mean-container a.meanmenu-reveal span { display: block; background: #fff; height: 3px; margin-top: 3px; } .mean-container .mean-nav { float: left; width: 100%; background: #0c1923; margin-top: 44px; } .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; list-style-type: none; } .mean-container .mean-nav ul li { position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a { display: block; float: left; width: 90%; padding: 1em 5%; margin: 0; text-align: left; color: #fff; border-top: 1px solid #383838; border-top: 1px solid rgba(255,255,255,0.5); text-decoration: none; text-transform: uppercase; } .mean-container .mean-nav ul li li a { width: 80%; padding: 1em 10%; border-top: 1px solid #f1f1f1; border-top: 1px solid rgba(255,255,255,0.25); opacity: 0.75; filter: alpha(opacity=75); text-shadow: none !important; visibility: visible; } .mean-container .mean-nav ul li.mean-last a { border-bottom: none; margin-bottom: 0; } .mean-container .mean-nav ul li li li a { width: 70%; padding: 1em 15%; } .mean-container .mean-nav ul li li li li a { width: 60%; padding: 1em 20%; } .mean-container .mean-nav ul li li li li li a { width: 50%; padding: 1em 25%; } .mean-container .mean-nav ul li a:hover { background: #252525; background: rgba(255,255,255,0.1); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 1px; width: 26px; height: 32px; padding: 12px !important; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; font-weight: 700; background: rgba(255,255,255,0.1); border: none !important; border-left: 1px solid rgba(255,255,255,0.4) !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; } .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(0,0,0,0.9); } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } /* Fix for box sizing on Foundation Framework etc. */ .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mean-remove { display: none !important; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。