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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

423閲覧

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

itokin

総合スコア14

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/18 14:50

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

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

<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; }

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

イメージ説明

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

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

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

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

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

guest

回答2

0

HTML

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

の部分を

HTML

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

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

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

投稿2020/07/19 12:42

itokin

総合スコア14

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

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

new1ro

2020/07/19 23: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」というクラスを指定しても、 画面上に何の変化も生じない状態となってしまいます。
guest

0

ベストアンサー

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

CSS

1.news-important { 2 /* vertical-align: top; */ 3 padding:0; 4 display: flex; 5 align-items: flex-start; 6}

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


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

CSS

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

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

投稿2020/07/18 22:18

編集2020/07/19 22:55
new1ro

総合スコア4528

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

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

itokin

2020/07/19 12: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; } としています。
new1ro

2020/07/19 23:06 編集

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

2020/07/20 00:34

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問