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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

1037閲覧

要素をうまく配置することができません

newyee

総合スコア213

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/10/08 12:29

要素の並べ方がうまくできないため、教えて頂きたいです。
実現させたい形としましては、以下の画像のように、「Explore」と書いてある、文字の部分までを、等間隔で配置したいと思っております。具体的には、猫のアイコン、検索ボックス、「Pull request」と書いてある部分から、「Explore」までを等間隔に配置したいです。
それと、もう一つ教えて頂きたい部分があるのですが、僕が作成したコードでは、クラス「header_flex」に設定した「align-items: baseline;」がクラス「githubIcon」に適用されていないうに思えます。実際、プロパティを外してもつけても一が上に固定されたままで、変わりませんでした。
イメージ説明
以下は、自分のコードを実行した画像です
イメージ説明

ht

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="normalize.css"> 6 <link rel="stylesheet" href="github.css" /> 7</head> 8<body> 9 <header> 10 <div class="header_menu header_flex"> 11 <svg class="githubIcon" viewBox="0 0 16 16" version="1.1" height="32" width="32" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg> 12 <form action="#" method="get"> 13 <input id="serch_box" name="serch" placeholder="Serch or jump to..." type="txt" /> 14 </form> 15 <ul class="header_link header_flex flex_items_center"> 16 <li><a href="#">Pull request</a></li> 17 <li><a href="#">Issues</a></li> 18 <li><a href="#">Marketplace</a></li> 19 <li><a href="#">Explore</a></li> 20 </ul> 21 22 <div class="nav_list"> 23 <ul class="user_nav"> 24 25 <li><a href="#"><svg class="header_nav_bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.99 11.991v1H0v-1l.73-.58c.769-.769.809-2.547 1.189-4.416.77-3.767 4.077-4.996 4.077-4.996 0-.55.45-1 .999-1 .55 0 1 .45 1 1 0 0 3.387 1.229 4.156 4.996.38 1.879.42 3.657 1.19 4.417l.659.58h-.01zM6.995 15.99c1.11 0 1.999-.89 1.999-1.999H4.996c0 1.11.89 1.999 1.999 1.999z"></path></svg></a></li> 26 <li> 27 <details> 28 <summary> 29 <svg class="header_nav_plus float_left" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg> 30 <span class="dropdown_caret"></span> 31 </summary> 32 <a role="menuitem" href="#">New repository</a> 33 <a role="menuitem" href="#">Import repository</a> 34 <a role="menuitem" href="#">New gist</a> 35 <a role="menuitem" href="#">New organization</a> 36 </details> 37 </li> 38 <li> 39 <details> 40 <summary> 41 <img class="float_left avator" src="img/avatar.png" width=20 height=20 /> 42 <span class="dropdown_caret"></span> 43 </summary> 44 <ul> 45 <li> 46 <a href="#">Signed in as<strong>USER NAME</strong> 47 </li> 48 <li> 49 <a role="menuitem" href="#">Your profile</a> 50 </li> 51 <li> 52 <a role="menuitem" href="#">Your repositories</a> 53 </li> 54 <li> 55 <a role="menuitem" href="#">Your stars</a> 56 </li> 57 <li> 58 <a role="Your gist" href="#">Your gist</a> 59 </li> 60 <li> 61 <a role="menuitem" href="#">Help</a> 62 </li> 63 <li> 64 <a role="menuitem" href="#">Setting</a> 65 </li> 66 <li> 67 <a role="menuitem" href="#">Sign out</a> 68 </li> 69 </ul> 70 </details> 71 </li> 72 </div> 73 </div> 74 75 </header> 76 77 78 79</body> 80 81</html> 82

css

1*{ 2 box-sizing:border-box; 3} 4svg { 5 fill: currentColor; 6 } 7 8.githubIcon{ 9 color:white; 10 } 11 12header{ 13 background-color:#000; 14} 15.header_flex{ 16 display:flex; 17 align-items: baseline; 18} 19 20 21.flex_items_center{ 22 display:flex; 23 justify-content: space-between; 24} 25.flex_items_center a{ 26 text-decoration:none; 27 color:#fff; 28} 29.header_link{ 30 list-style:none; 31} 32.user_nav{ 33 display:flex; 34 list-style:none; 35 36} 37.nav_list{ 38 display:flex; 39 margin-left:auto; 40} 41.header_nav_bell{ 42 color:gray; 43} 44.dropdown_caret{ 45 width: 0; 46 height: 0; 47 border-left: 5px solid transparent; 48 border-right: 5px solid transparent; 49 border-top: 5px solid #fff; 50 /*ブロック要素になっている為、inline-blockで横並びにする*/ 51 display: inline-block; 52} 53.header_nav_plus{ 54 color:#fff; 55} 56.user_nav svg, 57.user_nav img { 58 vertical-align: middle; 59}

どなたか教えて頂ける方いらっしゃいましたら、お願いいたします

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

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

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

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

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

mather

2018/10/08 12:37

「何を」等間隔に配置したいのですか?上の画像が目指す姿ということでしょうか?
newyee

2018/10/08 23:25

はい。一枚目の画像のように作りたいと考えております。
guest

回答2

0

全体としてpaddingなどが指定されていませんよね。
flexで親要素の幅を指定することができないのであれば

css

1.header_link li { 2 padding: 0 5px; 3}

を追加するなど子要素の余白に気を使ってみてはいかがでしょうか。

投稿2018/10/08 12:54

mather

総合スコア6753

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

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

newyee

2018/10/09 00:09

ご回答ありがとうございます。 paddingなどで、余白など設定しなおしてみました!
guest

0

ベストアンサー

</a> </ul> がとりあえず足りません。

CSS

1.header_flex{ 2 display:flex; 3 /*align-items: baseline;*/ 4 align-items: center;/*ADD*/ 5} 6```**動くサンプル:**[https://jsfiddle.net/48rmj30a/](https://jsfiddle.net/48rmj30a/)

投稿2018/10/08 12:40

kei344

総合スコア69364

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

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

newyee

2018/10/09 00:08

ありがとうございます。 アイコンを真ん中にもってくることができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問