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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

185閲覧

ブロック要素をフレキシブルレイアウトか相対値で端に寄せる方法

taka_oct092018

総合スコア133

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/05/21 08:17

サブコンテンツ内の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; } コード

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSS

1.wrap-sub-nav .sub-nav { 2 float: right; 3} 4 5.wrap-sub-nav::after { 6 content: ''; 7 display: block; 8 clear: both; 9}

https://developer.mozilla.org/ja/docs/Web/CSS/float

投稿2019/05/21 08:38

x_x

総合スコア13749

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

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

taka_oct092018

2019/05/26 08:05

x_x様解説ありがとうございます。 フロートと疑似要素については知識としては本で勉強していたものの、 いざ実践という時に活用出来ていませんでした。 これからは復習と製作を交互繰り返しながら技術を高めていきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問