サブコンテンツ内のaside要素(.wrap-sub-nav)をbody要素の右端に
配置するために「padding-left:58px;」を指定しました。
しかし、クロームデベロッパーツールを見ながら数値を細かく調整するより、
フレキシブルレイアウトか相対値を用いてシンプルに設定してみたいです。
良い方法がございましたら教えて頂けないでしょうか。
よろしくお願い致します。
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"> <title>トップ|HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body id="idx"> <header class="hdr"><!-- 【ヘッダー】 --> <h1 class="logo"><a href="idx.html"><img src="img/logo_hdr.png" alt="ハピネスフィットネスクラブ"></a></h1> <nav class="gnav" role="navigation" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li><a href="info.html"><img class="img-info" src="img/gnav_hdr_01_info.png" alt="施設のご案内"></a></li> <li><a href="fee.html"><img class="img-fee"src="img/gnav_hdr_02_fee.png" alt="料金プラン"></a></li> <li><a href="opinion.html"><img class="img-opinion" src="img/gnav_hdr_03_opinion.png" alt="ご意見・ご要望"></a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> </header><!-- /.hdr --> <div class="contents"><!-- 【コンテンツ】 --> <div class="contents-main"><!-- 【メインコンテンツ】 --> <div class="wrap-contents-main"> <img class="img-main" src="img/img_main_idx.jpg"> <article> <h2>今月のお知らせ</h2> <p>入会された方に、ミネラルウォーターをプレゼントいたします。<br>運動中の水分補給にお使いください。</p> </article> </div><!-- /.wrap-contents-main --> </div><!-- /.contents-main --> <div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside class="wrap-sub-nav"> <nav class="sub-nav" role="navigation" aria-label="サブナビゲーション"><!-- 【サブナビゲーション】 --> <ul> <li><a href="info.html"><img src="img/ttl_sub-menu.png" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="img/btn_contact.png" alt="ご意見・ご要望"></a></li> </ul> </nav><!-- /.gnav --> </aside><!-- /.wrap-sub-nav --> </div><!-- /.contents-sub --> </div><!-- /.contents --> <footer class="ftr"><!-- 【フッター】 --> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer><!-- /.ftr --> </body><!-- /.file-name --> </html> コード
/* 【基本色】 */ :root { --main-color : ; --accent-color : ; --dark-main-color : ; --text-bright-color : ; --icon-color : ; --icon-bk-color : ; --gray-color : ; --large-width : 1000px; --middle-width : 800px; } /* 【基本設定:ページ全体】 */ body { font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; max-width: var(--large-width); margin-right:auto ; margin-left: auto; } li { list-style:none; } /* 【ヘッダー】 */ /* ロゴとグローバルナビゲーションを横に並べる。 */ .hdr { display:flex; justify-content:space-between; } .logo, .gnav { flex:0 0 auto; } /* ロゴとグローバルナビゲーションを横に並べる。 */ .wrap-list { display:flex; justify-content:space-between; } .gnav li { flex:auto; } /* 【コンテンツ】 */ /* メインコンテンツとサブコンテンツを横に並べる。並べる比率は3:2とする。 */ .contents { display:flex; } .contents-main { width: 70%; } .contents-sub { width: 30%; } /* 【サブコンテンツ】 */ /* サブコンテンツを右端に配置する。 */ .wrap-sub-nav { padding-left:58px; } コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/26 08:05