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

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

ただいまの
回答率

88.92%

テキストの右左に線をいれたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 195

newdeal41

score -8

文章をまたいで、棒を左右に作りたい。

<body>
<header>
<nav>
<ul>
<li>TOP</li>
<li>ITEMLIST</li>
<li>BLOG</li>

<li><img src="image/logo.png"></li>


<li>BRAND</li>
<li>SHOP</li>
<li>CONTACT</li>
</nav>
</header>

<p class="s1">LAMIA blog</p>


</div>
 </div>
</body>
li img{
width:100px;
height:auto;

}

li{
list-style:none;
width:14%;
float:left;
}

nav{
margin:5px;
}

 .s1 {
        display: flex;
        align-items: center;
    }
    .s1:before, .s1:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }
.haikei{
background-color:#F2F2F2;
height:400px;
}

table {
    margin-left: auto;
    margin-right: auto;
 margin-bottom:10px;
}

.gray{
background-color:#f2f2f2
}

.more{
margin-top:10px;
text-align:center;
background-color:#F2F2F2;
}

 .s2 {
        display: flex;
        align-items: center;

    }
    .s2:before, .s2:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }

.icon{

text-align:center;


}


リンク内容のbrandのページのように、navの下に境界線を作りたい。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

リンク内容のbrandのページのように、navの下に境界線を作りたい。

リンク先のページをデベロッパーツールで調べてみると、
brand の li要素にクラス(class="active")を追加して、それに対して、
border-bottom で下線を表示しているようですね。

      <ul>
        <li>TOP</li>
        <li>ITEMLIST</li>
        <li>BLOG</li>

        <li><img src="image/logo.png"></li>


        <li class="active">BRAND</li>
        <li>SHOP</li>
        <li>CONTACT</li>
      </ul>
li.active {
  border-bottom: 3px black solid;
}

追記

質問を勘違いしていたようです。
どうもナビゲーションメニューの下の「LAMIA blog」の左右に罫線を引きたいということのようです。

「LAMIA blog」の表示がうまくいかないのは、li要素に float:left; を設定して横並びにしているのが原因です。そのため「LAMIA blog」がliの右に回り込んでいます。
clear: left;を追加して回り込みを解除すれば現状のCSSで左右の罫線が表示されます。

.s1 {
  clear: left; /* 追加 */
  display: flex;
  align-items: center;
}

floatで横並びにするのは、後のレイアウトに影響を与えるので現在ではあまり使われません。
今なら、CSS FlexBox で横並びにするのがお勧めです。

nav > ul {
  display: flex;
  align-items:center;
}

li{
  list-style:none;
  width:14%;
  text-align: center;
  padding-bottom: 20px;
/*  float:left; */
}

CodePen サンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/15 13:19

    すみません、いれてみたのですが、見本みたいに下に左右に棒が入らなかったです。

    キャンセル

  • 2020/07/15 13:38

    ひょっとして、
    ナビゲーションメニューの「Brand」の下の線ではなく、その下の
    「LAMINA brand」の左右の線のことでしょうか。

    キャンセル

  • 2020/07/15 13:51

    すみません、そうしたいです。

    キャンセル

checkベストアンサー

0

リンク先のヘッダーで変更するとしたら、

#header {
    background: url(../img/base/gray.png) 50% repeat-x;
    background-color: #FFF;}

gray.pngは1pxのもので。
#header #main_nav li a のpadding高さを変えて
#header #main_nav li a a の部分はspanを入れて<li><a><span></span></a></li>
#header li a span {
    background:#fff;
    padding:0 15px;
}
でもって
#header #main_nav ul {
    position: relative;
    top: -26px;
}
#header.scroll_top #main_nav ul {
    top: 0;
}


とかなんとか。

こんな感じでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る