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

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

ただいまの
回答率

88.93%

見出しの位置修正をしたい

解決済

回答 2

投稿

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

itokin

score 9

初心者です。お手柔らかにお願いします。

写真の重要なお知らせの部分を上の方に位置修正したいです。親要素内の上の高さにそろえられればいいのですが、

<div class="news navbar navbar-expand-md">
    <div class="col-2 news-important">
      <h6>重要なお知らせ</h6>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" >
      <span class="fa fa-plus-circle" ></span>
    </button> 
    <ul class="news-topic col-10" >
      <li><a href="#">
        新型コロナウイルス感染者の発生について</a></li>
      <li><a href="#">オーストラリアの森林火災被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第19号」被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第15号」被害に対する支援金寄付について</a></li>
      <li><a href="#">「令和元年台風第15号」被害に対する支援物資のお届けについて</a></li>
      <li><a href="#">当社ブランド画像を用いて個人情報の提供を求めるサイトにご注意ください</a></li>
    </ul>
  </div>

cssにて

.news-important {
  vertical-align: top;
 padding:0;
}


としましたが変わりませんでした。

イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

こちらでいかがでしょうか?

.news-important {
  /* vertical-align: top; */
  padding:0;
  display: flex;
  align-items: flex-start;
}

<div class="news navbar navbar-expand-md">にどのようなCSSが指定されているかがわかると、回答の精度が上げられると思います。


追記: 
もし、Bootstrapを使っているなら、.navberに、「align-items: center;」という記述があるようです。
以下のようにCSSを追加するか、

.news.navbar {
  /* flex-start、もしくはbaseline */
  align-items: flex-start;
}

HTML側で以下のように指定してみてください。
<div class="news navbar navbar-expand-md align-items-start">

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/19 21:25

    試しましたが変わりませんでした
    <div class="news navbar navbar-expand-md">のCSSは

    .navbar {
    background-color: #ffffff;
    }

    .news {
    margin:0px 5rem;
    list-style: none;
    border-bottom: 1px solid #d8d8d8;
    }

    としています。

    キャンセル

  • 2020/07/20 07:55 編集

    ありがとうございます。
    回答に追記しました。「.navbar」にCSSを追加する必要がありそうです。

    キャンセル

  • 2020/07/20 09:34

    お返事ありがとうございます。
    align-itemsをd-flexと併用することでうまくいきました。
    初歩的な質問だったと思いましがご丁寧にありがとうございました。

    キャンセル

-1

<div class="news navbar navbar-expand-md">


の部分を

<div class="news navbar navbar-expand-md align-items-start">


と直接入力したら変わりました。

ただ、<div class="col-2 news-important">の部分に同じコードを入れたのですが変化なく、その理由がまだわかってません、、、。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/20 08:05

    まず「Bootstrap」を使っていますよね? (違うなら、ご指摘ください。)
    その前提で↓を書いてみます。

    [1]
    Bootstrap利用時に、「.align-items-start」というクラスを指定すると、
    align-items: flex-start !important;
    が指定されます。

    参照: https://getbootstrap.com/docs/4.5/utilities/flex/#align-items

    [2]
    「align-items」は「display: flex;」や「display: grid;」とセットで指定しなければ意味を成しません。
    https://developer.mozilla.org/ja/docs/Web/CSS/align-items

    「.news-important」「.col-2」にも、「display: flex;」などが指定されていなければ、
    「.align-items-start」というクラスを指定しても、
    画面上に何の変化も生じない状態となってしまいます。

    キャンセル

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

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

関連した質問

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