HTMLにてウェブサイトを作っています。 ご覧のように、左のボーダーを仕切りとして挿入しようとしましたが、色付け部分とくっついてしまって離すことができません。
HTMLにてウェブサイトを作っています。 ご覧のように、左のボーダーを仕切りとして挿入しようとしましたが、色付け部分とくっついてしまって離すことができません。 どういったやり方で距離をとることができるでしょうか。 恐縮ですがいまのところHTMLとCSSしか勉強していないので、CSSでのやり方を教えて頂ければ幸いです。
ベストアンサー
<li>-<a> の入れ子で、 背景色は <li> 要素に付けられているんで、 その背景色は <li> の左枠線までくる。 色付け部分と枠線の間に距離を置きたいのであれば、 背景色は <li> ではなく <a> に付けて、 区切り線を <li> の左枠線で表示すれば、 色がついた <a> の矩形領域と <li> の枠線の間隔は、 <li> の padding で開けられる。 ──────────────── /* ==== ナビ｜リスト ==== */ .wholeNav ul { display: flex; justify-content: center; align-items: center; list-style: none; line-height: 1.4; font-size: 20px; } /* ==== ナビ｜リスト｜アイテム ==== */ .wholeNav ul li { flex: 0 0 auto; /*★追加*/ position: relative; width: 200px; /*★変更*/ padding: 10px; /*★変更*/ margin: 0px; /*★変更*/ border-left: solid 1px black; /*background-color: #f7f8e0; ★削除*/ text-align: cener; } .wholeNav ul li:first-child { border-left: none } /* ==== ナビ｜リスト｜アイテム｜リンク ==== */ a { display: block; /*padding-left: 30px; ★削除*/ padding: 0px 30px; background-color: #f7f8e0; /*★追加*/ color: #2e2efe; text-align: center; /*★追加*/ text-decoration: none; } a:hover { color: #00ffff } a:visited { color: #9a2efe } ──────────────── いちおう、 上記コードの実行結果として jsfiddle のサンプル。 [ 結果：jsfiddle ] https://jsfiddle.net/2hvgx058/
あと、 ↑上記のコードだと、 ul 要素のフレックスレイアウトの揃え位置を、 justify-content:center にしているせいで、 ウィンドウ幅が ul よりも小さくなると、 ul が左右均等にはみ出して、 スクロールできない左側にはみ出した部分が見れなくなる。 こういう場合は、 ul の ::before, ::after 擬似要素を、 flex: 1 1 0px で横に自由に伸縮するようにして置き、 justify-content:stretch に切り替えれば、 ::before, ::after がスプリングの役を果たして メニューは中央に揃えらえるし、 ページ幅が狭くなっても左側にはみ出さなくなる。 [ 修正版：jsfiddle ] https://jsfiddle.net/auhgvecL/
質問者からのお礼コメント
沢山の方からのご回答、本当にありがとうございます。 送って頂いたコードはすべて読ませて頂きました。 widthや<a>要素などすでに知っていたコードのほかに justify-content: before-space や justify-content: stretch など新しい方法とも出会うことができました。 元コードの校正まで頂いて、とても感謝しております。 本当にありがとうございました！
お礼日時：1/26 7:56
