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

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

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

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

CSS

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

受付中

メニューバーのサイズの統一

sutosi
sutosi

総合スコア0

HTML

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

CSS

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

1回答

0評価

0クリップ

1874閲覧

投稿2017/12/01 07:11

pc-menu2のliにメニューの記述や情報を記述しており、サイズを統一したのですがどうすればよろしいでしょうか。
ご教授お願いいたします。

html

<!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>top</title> </head> <body> <header> <div class="aburasoba_main"> <div class="aburasoba_main_about"> <img src="img/wallpaper.jpg"> </div> </div> <div class="aburasoba_main2"> <div class="aburasoba_main_about2"> <img src="img/wallpaper.jpg"> </div> </div> <div class="container"> <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> <ul class="pc-menu"> <li><a>トップ</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="access.html">アクセス</a></li> </ul> <ul class="pc-menu2"> <li><a>トップ</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="access.html">アクセス</a></li> </ul> </div> <div class="box"> <div class="box-title">Come on roast beef...</div> <p>“元気を食べてもらいたい ──”<br> </p> </div> </header> <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> <footer> </footer> </body> </html>

css

/*1----------------------------------------------------------------------------------*/ @charset "utf-8"; /*common*/ body{/*初期設定、余計なmargin,paddingを0に*/ font-size: 14px; font-family: Verdana, sans-serif; margin: 0; padding: 0; color: #F2F2F2; background: #F2F2F2; /*初期設定*/ } p{/*行間がゆったりする*/ line-height: 2; } .container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width: 90%; margin: 0 auto; } header{ /*背景画像*/ background-image: url("../img/background.jpg"); background-repeat: no-repeat; background-attachment: fixed;/*背景を固定している*/ background-position: center;/*背景が中央に設定される*/ background-size:cover;/*背景画像をちゃんと表示*/ padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ } /*aburasoba_main トップの背景*/ .aburasoba_main{ background-color: black; /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ } .aburasoba_main_about img{ display: block; margin-left: auto; margin-right: auto; max-width: 100%; } /*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/ .aburasoba_main2{ background-color: black; /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ padding-left: 50px; padding-right: 50px; } .aburasoba_main_about2 img{ display: block; margin-left: auto; margin-right: auto; max-width: 100%; } /*header-mobile-menuはアイコン右寄せ*/ .mobile-menu{ float: right; font-size: 24px; cursor: pointer; } .pc-menu{ display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ list-style: none; padding: 10px; margin: 0; /*余計なマージンパディング取る、*/ float: center;/*mysiteも入っているpc-menuの中に右にする設定*/ text-align: center; /* background:rgba(51,51,51, 0.85); font-weight: bold;*/ } .pc-menu2 { display: flex;/*追加*/ width: 100%; margin: 0; list-style-type: none; flex-wrap: nowrap;/*追加*/ padding: 0; } .pc-menu > li { display: inline-block;/*横にする設定*/ width: 60px; text-align: center; cursor: pointer; } .pc-menu2 li { padding: 0; margin: 0; text-align: center; flex-grow: 1;/*追加*/ } .pc-menu2 li a{ width: auto; color:#fff; font-size:12px; font-weight:bold; padding: 10px 0; text-decoration:none; display:block; background:#666; } .pc-menu2 li a:hover{ background: #555; } /*sita ...imgと指定すれば画像が指定できた*/ .sita img { display: block; height: 90px; margin: 0 auto; width: 160px; } /*レスポンシブデザインの3本線の設定*/ .mean-container a.meanmenu-reveal span { display: block; background: #cccccc; height: 3px; margin-top: 3px; } /*テキストの枠組みの設定*/ /*box*/ .box { margin: 2em 0;/*線?*/ margin: 50px;/*左右余白*/ } .box .box-title { font-size: 1.2em; background:rgba(51,51,51, 0.85); padding: 4px; text-align: center; color: #cccccc; font-weight: bold; letter-spacing: 0.05em; } .box p { padding: 15px 15px; margin: 0; background:rgba(51,51,51, 0.85); color: #cccccc; } .box img{ padding: 15px 15px; margin: 0; background:rgba(51,51,51, 0.85); color: #cccccc; } .box h2 h3 { padding: 15px 20px; margin: 0; background:rgba(51,51,51, 0.85); color: #cccccc; } /*box2*/ .box2 { margin: 50px;/*左右余白*/ display:flex;/*左右に配置するフレックスボックスと呼ばれるもの*/ display:-webkit-flex;/*displey:flex;と同じ意味だけどこれはchoromeのバージョンがflexより古いときに対応するもの*/ min-width: 400px;/*box2で囲っている最小値を設定している、これでウィンドウ幅を小さくしたとき400pxまで小さくなる*/ justify-content: center;/*中央配置*/ } .box2 .box-title { font-size: 1.2em; background:rgba(51,51,51, 0.85); padding: 4px; text-align: center; color: #cccccc; font-weight: bold; letter-spacing: 0.05em; } .box2 img{ width:45%; height: 45%; max-width: 378px } .box2 p { padding: 15px 15px; margin: 0; background:rgba(51,51,51, 0.85); color: #cccccc; min-width: 314px;/*テキストの左右の幅の最小値*/ } .box2 img{ padding: 15px 15px; margin: 0; background:rgba(51,51,51, 0.85); } .box2 h2{ padding: 15px 20px; margin: 0; background:rgba(51,51,51, 0.85); color: #cccccc; } /*box3*/ .box3 { margin: 50px;/*左右余白*/ display:flex;/*左右に配置するフレックスボックスと呼ばれるもの*/ display:-webkit-flex;/*displey:flex;と同じ意味だけどこれはchoromeのバージョンがflexより古いときに対応するもの*/ justify-content: center;/*中央配置*/ /*垂直の方向の並び 11/10*/ -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-direction: column-reverse; /*flex-direction: column-reverse;*/ min-width: 200px;/*テキストの左右の幅の最小値*/ background:rgba(51,51,51, 0.85); } .box3 .box-title { font-size: 1.2em; padding: 4px; text-align: center; color: #cccccc; font-weight: bold; letter-spacing: 0.05em; } .box3 img{ padding: 15px 5%; margin: 0; width:90%; height: auto; min-width: 200px;/*テキストの左右の幅の最小値*/ max-width:414px;/*min-widthで最小値を設定してmax-widthで最大値を0%にしているのでサイズが固定される*/ } .box3 iframe{ padding: 15px 5%; margin: 0; width:90%; height: auto; min-width: 200px;/*テキストの左右の幅の最小値*/ max-width:414px;/*min-widthで最小値を設定してmax-widthで最大値を0%にしているのでサイズが固定される*/ } .box3 p { padding: 15px 15px; margin: 0; color: #cccccc; min-width: 20px;/*テキストの左右の幅の最小値*/ } .box3 h2{ padding: 15px 20px; margin: 0; color: #cccccc; } /*レスポンシブルデザイン設定①*/ /*幅の大きさが変わる設定*/ /*画面が414px以下になったとき*/ @media (max-width: 414px){ .pc-menu{ color:#cccccc; } .aburasoba{/*アイコンを消す*/ display: none; } .pc-menu2{ display: none; } .box2{ display: none; } .boxmap{ display: none; } /*.pull-right*/ .right-side{ float: right; padding-left: 5%; } /*.pull-left*/ .left-side{ float: left; padding-right: 5%; } .news .container{ display: flex; justify-content: space-between;/*均等に余白が空く設定*/ } .news .item{/*newsに入っている画像と文字に対して30%*/ width: 30%; } .news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ width: 100%; } .aburasoba_main_about img{ display: none; } } /*画面が414px以上になったとき min-widthが〇〇以上、max-widthが〇〇までという認識*/ @media (min-width: 414px){ .container{ width: 414px; } .mobile-menu{/*アイコンを消す*/ display: none; } .pc-menu{ display: none; } .aburasoba_main_about2 img{ display: none; } .box3{ display: none; } .boxmap2{ display: none; } } /* /*footer*/ footer { text-align: center; padding: 10px 0; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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