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

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

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

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

CSS

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

Q&A

解決済

1回答

736閲覧

HTML & CSSにおいて要素を横並びにしたい。

kanemichi

総合スコア10

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/11 02:05

HTML CSSにおいてレイアウト崩れが起きます。

ーー具体的には以下に参照画像を添付いたします。

レイアウト崩れのブラウザ

イメージ説明

###見本のブラウザ
イメージ説明

修正したい点と不明点

---ulタグでリストを中央に配置すると、ログインリンクが下に配置されたり、ずれて配置されてしまいます。
ulはブロック要素なので、この様な現象が起きることは予想していました。

###試したこと
-position プロパティを色々イジって強引に配置をずらす。
-display プロパティを
-ul要素とログインのaタグをflexboxに入れて、位置をずらしてみる。

HTMLとCSSのコード

コード ---HTML---- <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-list"> <ul class="flex"> <li><a href="about.html">会社概要</a></li> <li><a href="">メンバー紹介</a></li> <li><a href="">レッスン一覧</a></li> <li> </li> </ul> <a href="#" class="login">ログイン</a> ----CSS---- header { position: relative; height: 60px; width: 100%; background-color: rgba(34, 49, 52, 0.9); position :fixed; top: 0; z-index: 10; color: white; display: flex; } .header-list { text-align: center; } .flex { display: flex; justify-content: center; } .header-list li { padding: 20px; margin-right: 10px; } .login { background-color: silver; display: block; padding: 20px; } .logo { width: 124px; margin-top: 20px; } .header-left { float: left; }

そもそものコードが間違っていると思うのですが、どの様なコーディングをするべきなのでしょうか?

御教授のほど何卒お願いい願いたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

一応自分なりにコードを修正させていただきました。
大まかに言えば

既存のコードを見る限りログイン項目が「header-list」の<div>の中に記述されていますので
ログイン項目を独立させます。

そして
左のロゴをfloat:left;
右のログイン項目をfloat:right;
で飛ばします。
floatを使う際はclearfixという自分が記述したclassをお使いください。
このclassはfloatの回り込みを防いでくれます。
使う際はfloatを指定している親要素にお使いください。

最後に中のナビ要素をpositionで真ん中に持ってくるという流れです。
わからないことがあれば御質問いただけたらと思います。

html

1<header> 2 <div class="container clearfix"> 3 <div class="header-left"> 4 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 5 </div> 6 <div class="header-list"> 7 <ul class="flex"> 8 <li><a href="#">会社概要</a></li> 9 <li><a href="#">メンバー紹介</a></li> 10 <li><a href="#">レッスン一覧</a></li> 11 <li> 12 </li> 13 </ul> 14 </div> 15 <div class="header-right"> 16 <a href="#" class="login">ログイン</a> 17 </div> 18 </div> 19 </header>

css

1 2 3body{ 4 margin: 0; 5} 6header { 7 background-color: rgba(34, 49, 52, 0.9); 8 top: 0; 9 z-index: 10; 10 color: white; 11 display: flex; 12} 13.container{ 14 height: 60px; 15 width: 100%; 16 position: relative; 17} 18.header-list { 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 transform: translate(-50%,-50%); 23 text-align: center; 24} 25 26.flex { 27 display: flex; 28 justify-content:space-between; 29 margin: 0; 30} 31 32.header-list li { 33 display: inline-block; 34 font-size: 18px; 35 color: #fff; 36 margin-right: 15px; 37} 38 39.header-list li a{ 40 text-decoration: none; 41 color: #fff; 42} 43 44.login { 45 vertical-align: bottom; 46 text-align:center; 47 width: 100%; 48 height: 100%; 49 line-height:60px; 50 display: inline-block; 51} 52 53.logo { 54 width: 124px; 55 margin-top: 20px; 56} 57 58.header-left { 59 float: left; 60 width: 200px; 61 height: 100%; 62 box-sizing:border-box; 63} 64 65.header-right{ 66 float:right; 67 width: 100px; 68 height: 100%; 69 background-color: silver; 70 margin-right: 50px; 71} 72 73.clearfix::after{ 74 clear: both; 75 content: ""; 76 display: block; 77}

投稿2020/06/11 02:52

編集2020/06/11 03:09
imada4991

総合スコア15

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

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

kanemichi

2020/06/11 07:02

imada様 ご回答誠にありがとうございます。コードまで書いてくださり、大変有り難いです。 少し、CSSに関して理解できていない部分があります。 1. 下記の宣言は<ul>リストを中央配置するという意味で間違い無いでしょうか? .container{ height: 60px; width: 100%; position: relative;  } //親要素containerの子要素header-listを中央配置// .header-list { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } 2. 下記のCSSの中身とセレクタの意味を色々と検索してみたのですが、ほぼ理解できませんでした。(擬似要素afterが特に分かりません。) .clearfix::after{ clear: both; //左右にfloatさせる項目の回り込みをどちらも解除する content: ""; //文の改行等は必要ないために「""」としている display: block; //ここではなぜdisplayブロックとしているのでしょうか? } ブラウザでデバックしたところ、clearfixクラスは表示はされていないことは確認できましたが、慣例的にセットで使うという感じでしょうか? 最後にloginのCSSを下記の通りdisplay inlineにしてpaddingを追加してみました。これでも上手くいくと思いきや、text-align:center; が効かなくなりました。 これはheader-rightがそもそもblock要素のため、「user agent stylesheet」 でwidthが定義されているのが原因でしょうか? .login { vertical-align: bottom; text-align:center; width: 100%; height: 100%; line-height:60px; /* display: inline-block; */ padding: 20px 0 20px; } 長々と申し訳ありません。 大変お手数ですが、御教授願いたいです。
imada4991

2020/06/11 07:32 編集

1. 下記の宣言は<ul>リストを中央配置するという意味で間違い無いでしょうか?  >はい 当初はheaderにposition:relative;をつけていたと思いますが、これを.containerのclassに付け替えました。本来relativeはabsoluteの親につけるものだからです。  top: 50%;  left: 50%;  transform: translate(-50%,-50%); につきましては親要素の中央に持ってきたい場合によく使われる方法です。 .container{ height: 60px; width: 100%; position: relative;  } //親要素containerの子要素header-listを中央配置// .header-list { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } 2. 下記のCSSの中身とセレクタの意味を色々と検索してみたのですが、ほぼ理解できませんでした。(擬似要素afterが特に分かりません。) >ここにつきましてはあまり理解せずとも大丈夫ですよ。 ただfloatを使った要素にはclearfixをつける癖は必ずつけてください。 一応下記に説明は入れておきます。 .clearfix::after{ clear: both; //左右にfloatさせる項目の回り込みをどちらも解除する content: ""; //これは疑似要素を使う際の決まりですので必ずつけましょう。 display: block; //ブロック要素として幅いっぱいに要素を拡大して回り込みを防ぐためだと思われます。 } ブラウザでデバックしたところ、clearfixクラスは表示はされていないことは確認できましたが、慣例的にセットで使うという感じでしょうか? >はい、floatを使った要素にはclearfixをつける癖は必ずつけてください。 最後にloginのCSSを下記の通りdisplay inlineにしてpaddingを追加してみました。これでも上手くいくと思いきや、text-align:center; が効かなくなりました。 これはheader-rightがそもそもblock要素のため、「user agent stylesheet」 でwidthが定義されているのが原因でしょうか? これにつきましては<a>タグはインライン要素ですのでwidthやheightやpaddingなどの指定はできません。 ですので幅や高さなどが指定ができるinline-blockかblockにしなければなりません。 今回の場合はheader-rightという親要素にwidthが設定しているのでこれでよいですが、 要素が一つの場合は(<a href="#" class="login">ログイン</a>のみの場合)はinline-blockとして幅を設定する必要があります。 もしdisplay:block;にしたら幅いっぱいとなるためです。 もしpaddingを使用して中にテキストを押し留めたい場合はbox-sizing:border-box;というタグを使えば幅を維持したまま中に押し込んでくれます。 .login { vertical-align: bottom; text-align:center; width: 100%; <=親要素に幅が設定されているため height: 100%; <=親要素に高さが設定されているため line-height:60px; <=テキストを真ん中に持ってくるため /* display: inline-block; */ padding: 20px 0 20px; } 長々と申し訳ありません。 大変お手数ですが、御教授願いたいです。 >いえいえ とんでもないです。 自分も当時わかりませんでしたので一歩一歩がんばってください。 わからない箇所があるようでしたらまた質問していただければと思います。
kanemichi

2020/06/11 10:44

imada様 大変ご丁寧な回答ありがとうございます。 非常に勉強になりました。 HTML CSS程度で少しつまづいてしまっていたのですが、とても励みになりました。 今後も引き続き学習する意欲が回復しました。 改めて、誠にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問