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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

718閲覧

NavLinkを横並び、均等間隔にあけた中央寄せにしたい

hiro_ike

総合スコア48

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/26 06:56

編集2022/01/12 10:55

やりたいこと:
NavLinkを横並び、中央寄せで、均等に間隔を開けて表示させたい。

やったこと:
多分cssでの指定の仕方が悪いのだと思いますが、
a に対して、inline-blockにすると横に並んでくれるので、
現状そのようになっています。
イメージ説明

自分の中では、
display: flex;
justify-content: centerまたは、space-around
みたいにしたいのですが、現状は、display: flex;にするとNavBarが縦に並んでしまいます。。

中央寄せまで出来れば、margin設定でnavbar同士の間隔は設定できるのかなと
思っているのですが、
確認すべき箇所のご指摘、またはアドバイスいただけますと助かります。

SCSS

1.NavBar{ 2 background-color: blue; 3 a { 4 font-weight: 800; 5 color: white; 6 display: inline-block; 7 } 8 9 } 10} 11

HTML

1return ( 2 <div className="NavBar"> 3 <nav> 4 <h2>Title</h2> 5 <NavLink 6 key="Home" 7 to="/" 8 className="nav-link nav-item" 9 exact 10 activeClassName="activeLink" 11 > 12 Home 13 </NavLink>{' '} 14 <NavLink 15 key="Products" 16 to="/products" 17 className="nav-link nav-item" 18 exact 19 activeClassName="activeLink" 20 >Products 21 </NavLink> 22 <NavLink 23 key="Services" 24 to="/services" 25 className="nav-link nav-item" 26 exact 27 activeClassName="activeLink" 28 >Services 29 </NavLink> 30 <NavLink 31 key="About" 32 to="/about" 33 className="nav-link nav-item" 34 exact 35 activeClassName="activeLink" 36 > 37 About 38 </NavLink><div> 39 {token ? ( 40 <><p>{loggedInUser}</p> 41 <button onClick={logout}>Log out</button> 42 </> 43 ) : ( 44 <> 45 <button type="button" ><Link to="/login">Log in</Link></button> 46 <button type="button" ><Link to="/signup">Sign up</Link></button> 47 </> 48 )} 49 </div> 50 {/* </div> */} 51 </nav> 52 </div> 53 ) 54} 55

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

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

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

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

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

Lhankor_Mhy

2021/09/27 01:36

「NavBarが縦に並んでしまいます」とのことですが、ご提示のコードでは .NavBar は一つしかないようでした。 ご提示いただいていない部分で、 .NavBar が繰り返されていると考えていいですか? それとも縦に並ぶのは .NavBar の子要素のことですか?
hiro_ike

2021/09/27 14:04

コメントありがとうございます。 すみません、説明が誤っておりました。「NavBarが縦に表示〜」ではなく、ご指摘の通り「NavLinkが縦に表示〜」でした。
Lhankor_Mhy

2021/09/28 01:18

NavLink コンポーネントは、どのようなHTMLに展開されるのですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問