ナビゲーションヘッダー作成する。
ナビゲーションの土台を作成
.navigation{background-color:#584b4f;color:#efeae1;height:43px;}importReactfrom'react';import'./AtomPage.css';exportconstAtomPage=()=>{return(<><navclassName="navigation"></nav></>)}↓こうなる
メニューの作成
.wrapper{margin:0auto;}importReactfrom'react';import'./AtomPage.css';exportconstAtomPage=()=>{return(<><navclassName="navigation"><divclassName="wrapper"><ul><li>Hoge</li><li>Fuga</li><li>Piyo</li></ul></div></nav></>)}↓こうなる
メニューを横並びにする
・ul要素をinline-blockにすることで横並びにする
.navigation{background-color:#584b4f;height:43px;padding:5px0;font-size:14px;}.wrapper{margin:0auto;width:860px;}.navigationul{display:inline-block;padding:0;margin:0;}.navigationli{display:inline-block;padding-right:10px;}.navigationa{display:inline-block;padding:5px;text-decoration:none;color:#efeae1;}importReactfrom'react';import'./AtomPage.css';exportconstAtomPage=()=>{return(<><navclassName="navigation"><divclassName="wrapper"><ul><li><ahref="">Hoge</a></li><li><ahref="">Fuga</a></li><li><ahref="">Piyo</a></li></ul></div></nav></>)}
右側にSign inボタンつける
・右側用のdivにfloat: rightをつけることで右端まで要素が移動する
.navigation-right{float:right;}.navigation-righta{padding:5px;text-decoration:none;color:efeae1;}importReactfrom'react';import'./AtomPage.css';exportconstAtomPage=()=>{return(<><navclassName="navigation"><divclassName="wrapper"><ul><li><ahref="">Hoge</a></li><li><ahref="">Fuga</a></li><li><ahref="">Piyo</a></li></ul><divclassName="navigation-right"><ahref="">Sign in</a></div></div></nav></>)}