Q&A
ナビゲーションの4つの文字列、「製品情報」「CMギャラリー」「キャンペーン」「Q&A」をそれぞれの
項目の中央に配置したいのですが、どうすればうまく行くのでしょうか。
https://practice2017.web.fc2.com/question_02/idx.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>オリジナルジュースの紹介|架空株式会社</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"><!-- Google Fonts Montserrat --> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link href="fontawesome/css/all.css" rel="stylesheet"><!-- fontawesome ver5.10.2 Local （オフライン用 削除可能。） --> <script src="https://kit.fontawesome.com/abda8f59ff.js"></script><!-- fontawesome ver5.3.0 CDN --> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="js/jquery.tgBrowserWidth.js"></script><!-- 画面幅を表示するスクリプト 製作後削除する。 --> <script>$(document).ready(tgBrowserWidth());</script><!-- 画面幅を表示するスクリプト 製作後削除する。 --> <link rel="stylesheet" href="css/style.css"> </head> <body class="idx"><!-- 【.idx】 ここから↓ --> <header class="hdr"><!-- 【ヘッダー】 ここから↓ --> <section class="cont-01"> <h1>オリジナル<i class="fas fa-leaf"></i>ジュース</h1> <p>おいしい うれしい</p> <div class="wrap-list"> <p>オリジナル<i class="fas fa-leaf"></i>ジュース</p> <div class="thumb-01"> </div> <ul> <li>肌荒れ</li> <li>便秘</li> <li>不眠症に</li> </ul> </div> <div class="bg-top-01.jpg"> </div> </section><!-- /.cont-01 --> <nav class="nav-hdr"><!-- 【ヘッダーのナビゲーションメニュー】 --> <ul class="flex"> <li class="items"><a href="idx.html">製品情報</a></li> <li class="items"><a href=".html">CMギャラリー</a></li> <li class="items"><a href=".html">キャンペーン</a></li> <li class="items"><a href=".html">Q&A</a></li> </ul><!-- /.flex --> </nav><!-- 【ヘッダーのナビゲーションメニュー】 ここまで↑ --> </header><!-- 【ヘッダー】 ここまで↑ --> <div class="wrap-boxes"> <section class="box-01"><!-- 【.box-01】 ここから↓ --> <div class="ctr-01"><!-- 【.ctr-01】 ここから↓ --> <h2>スムージーみたいな飲み心地</h2> <p>当社独自の製法で、スムージーみたいな飲み心地を実現しました。癖が少なくさらっと飲めるジュースになっております。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-01】 ここまで↑ --> </section><!-- 【.box-01】 ここまで↑ --> <section class="box-02"><!-- 【.box-02】 ここから↓ --> <div class="ctr-02"><!-- 【.ctr-02】 ここから↓ --> <h2>便秘予防に</h2> <p>白菜５この食物繊維を含んだオリジナルジュースなら、便秘の予防にも効果的です。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-02】 ここまで↑ --> </section><!-- 【.box-02】 ここまで↑ --> <section class="box-03"><!-- 【.box-03】 ここから↓ --> <div class="ctr-03"><!-- 【.ctr-03】 ここから↓ --> <h2>手間いらずで毎日続けられる</h2> <p>粉末を溶かすタイプだけでなく、そのまま飲めるペットボトルタイプもご用意しております。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-03】 ここまで↑ --> </section><!-- 【.box-03】 ここまで↑ --> <section class="box-04"><!-- 【.box-04】 ここから↓ --> <div class="ctr-04"><!-- 【.ctr-04】 ここから↓ --> <h2>肌荒れ予防に</h2> <p>ビタミンＣやβカロチンなど、不足しがちな美容に良い成分をたっぷり配合しています。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-04】 ここまで↑ --> </section><!-- 【.box-04】 ここまで↑ --> <section class="box-05"><!-- 【.box-05】 ここから↓ --> <div class="ctr-05"><!-- 【.ctr-05】 ここから↓ --> <h2>不眠症に</h2> <p>不眠症の改善に効果があると言われているメラトニンも豊富に含んでいる原料を使用しています。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-05】 ここまで↑ --> </section><!-- 【.box-05】 ここまで↑ --> <section class="box-06"><!-- 【.box-06】 ここから↓ --> <div class="ctr-06"><!-- 【.ctr-06】 ここから↓ --> <h2>一杯あたり８４円</h2> <p> オリジナルジュースは一杯あたり８４円のお手頃価格。家計にやさしく無理なく続けられます。<p> <i class="fas fa-foo"></i> </div><!-- 【.ctr-06】 ここまで↑ --> </section><!-- 【.box-06】 ここまで↑ --> </div><!-- /.ctr-boxes --> <footer class="ftr"><!-- 【フッター】 ここから↓ --> <nav> <ul> <li><a href="#">会社情報</a></li> <li><a href="#">利⽤規約</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </nav> <div class="copyright"><!-- 【コピーライト】 --> Copyright (C) 2019 オリジナルジュース All Rights Reserved. </div><!-- 【コピーライト】 ここまで↑ --> </footer><!-- 【フッター】 ここまで↑ --> </body><!-- 【.idx】 ここまで↑ --> <span id="wid"></span><!-- 画面幅表示用スクリプト --><!-- 画面幅を表示するスクリプト 製作後削除する。 --> </html>
/* production file version CSS : 製作ファイルバージョンCSS */ @charset "utf-8"; /* 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background : transparent; border : 0; font-size : 100%; margin : 0; outline : 0; padding : 0; vertical-align : baseline; } body { line-height : 1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display : block; } nav ul { list-style : none; } blockquote, q { quotes : none; } blockquote:before, blockquote:after, q:before, q:after { content : ''; content : none; } a { background : transparent; font-size : 100%; margin : 0; padding : 0; vertical-align : baseline; } /* change colours to suit your needs */ ins { background-color : #ff9; color : #000; text-decoration : none; } /* change colours to suit your needs */ mark { background-color : #ff9; color : #000; font-style : italic; font-weight : bold; } del { text-decoration : line-through; } abbr[title], dfn[title] { border-bottom : 1px dotted; cursor : help; } table { border-collapse : collapse; border-spacing : 0; } /* change border colour to suit your needs */ hr { border-top : 1px solid #ccc; border : 0; display : block; height : 1px; margin : 1em 0; padding : 0; } input, select { vertical-align : middle; } /* 【HTML5 Reset Stylesheet v1.6.1】 ここまで↑ */ /* 【ページ全体の共通箇所】 ここから↓ */ /* フォントの種類の設定。 */ body { font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; margin : 0; } /* 【フォントサイズ】 ここから↓ */ /* 1(px) : .1(rem) : .093(vw) */ /* 1(rem) : .926(vw) : 10(px) */ /* 1(vw) : 10.8(px) : 1.08(rem) */ :root { font-size : 62.5%; } /* 62.5% : 1rem : 10px */ h1 { font-size : 2.8rem; } /* 28px */ h2 { font-size : 2.1rem; } /* 21px */ h3 { font-size : 1.6rem; } /* 16px */ h4 { font-size : 1.4rem; } /* 14px <p>と同じ大きさ。 */ /* メディアクエリを用いたフォントサイズの設定。 スマートフォン向けの設定 320px未満 */ @media not all and (min-width : 320px) { body { font-size : 1.4rem; } } /* タブレット・パソコン向けの設定 320px以上、かつ、960px未満 ブラウザによる不具合が生じる場合は「font-size : 1.6rem」とする。 */ @media (min-width : 320px) { @media not all and (min-width : 960px) { body { /* font-size:calc(((1.8rem - 1.4rem) / (96rem - 32rem)) * (100vw - 3.2rem) + 1.4rem); */ font-size:calc(0.00625 * (100vw - 3.2rem) + 1.4rem); } } } /* パソコン向けの設定 960px以上 */ @media (min-width : 960px) { body { font-size : 1.8rem; } } /* 【フォントサイズ】 ここまで↑ */ /* 【CSS変数】 ここから↓ */ /* フォントサイズのCSS変数。 */ body { --font-absolutely-small : 1rem; --font-very-small : 1.2rem; --font-small : 1.4rem; --font-medium : 1.6rem; --font-large : 1.8rem; --font-very-large : 2rem; --font-absolutely-large : 2.4rem; } /* 幅の設定。 */ body { --width-large : 100rem; --width-middle : 80rem; } /* 色の設定。 */ body { --color-icon-lightgray : lightgray; --color-icon-palegreen : palegreen; --color-ttl-bkgd-limegreen : limegreen; --color-ttl-bkgd-orangered : orangered; --color-ttl-bkgd-peachpuff : peachpuff; --color-txt-orangered : orangered; --color-txt-wht:white; } /* 【CSS変数】 ここまで↑ */ /* 【ページ全体の共通箇所】 ここまで↑ */ body { width:100rem; width:var(--width-large); margin:0 auto; } /* 【ヘッダー】 ここから↓ */ .cont-01 > h1 { background-color:limegreen; background-color:var(--color-ttl-bkgd-limegreen); color:white; color:var(--color-txt-wht); } .cont-01 > p { background-color:peachpuff; background-color:var(--color-ttl-bkgd-peachpuff); color:orangered; color:var(--color-txt-orangered); } .wrap-list > p { background-color:limegreen; background-color:var(--color-ttl-bkgd-limegreen); color:white; color:var(--color-txt-wht); } .thumb-01 { background-image:url(../img/thumb_01.jpg); background-size:cover; background-position:center; max-width:100%; height:100vh; box-sizing: border-box; } /* 【ヘッダーのナビゲーションメニュー】 ここから↓ */ nav.nav-hdr > ul { margin : 0; padding : 0; } .flex { display:flex; flex-direction : row; justify-content : space-between; } .flex > li.items { flex-grow : 1; flex-shrink : 0; margin-right : .5rem; } .nav-hdr a { display:block; padding: 1.5rem; color : white; color : var(--color-txt-wht); text-decoration : none ; background-color : limegreen; background-color : var(--color-ttl-bkgd-limegreen); } a:hover { background-image:linear-gradient( rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) ) } /* 【ヘッダーのナビゲーションメニュー】 ここまで↑ */ /* 【ヘッダー】 ここまで↑ */
回答1件
0
ベストアンサー
.itemsに対して
css
1.items { 2 text-align:center; 3}
を指定すれば中央揃えできるはずです。
手元でやるとこんな感じになりました。
](7107cceba8a4669293e9f4026abd8d76.png)
投稿2019/12/17 06:57
総合スコア112
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/17 08:46