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

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

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

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

Q&A

2回答

922閲覧

テキストの縦位置の指定

hiromint

総合スコア1

CSS

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

0グッド

0クリップ

投稿2021/02/24 14:38

サイトのメニュー部分を製作中なのですが、下記のようなレイアウトの場合、赤(#cc3300)の位置の文字のみ、枠内の下付きにする事は可能でしょうか?

イメージ説明

【html】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="Description" content=“テスト”> <meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS--> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> <!--CSSここまで-->
</head> <body> <main> <div class="container"> <div class="box_logo"> <a href=""><img src="images/logo.png" alt="ロゴ"></a> </div> <div class=“column_group”> <div class="box_text_adress"> <p>アドレスアドレスアドレスアドレス</p> </div> <div class="info_link"> <ul> <li><a href="">あああああ</a></li> <li><a href="">あああああ</a></li> </ul> </div> </div> </div> </main>

【css】
@charset "UTF-8";

html {
color: #000;
font-size: 1rem;
font-family: "arial", "Meiryo", "ヒラギノ角ゴ", sans-serif;
}

body {
text-align: center;
background-color: #99ffff;
}

.wrap {
background-color: #FFFFFF;
max-width: 1048px;
margin: 0 auto;
}

a {
text-decoration: none;
}

a [href$=".png"] {
border: none
}

a [href$=".jpg"] {
border: none
}

a [href$=".jpeg"] {
border: none
}

main {
width: auto;
min-height: 80px;
background-image: url("../images/logo_bg.png");
background-size: cover;
background-color: #FFFFFF;
padding: 10px;
}

.container {
width: 100%;
min-height: 70px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #99ff66;
}

.box_logo {
width: 35vw;
min-height: 70px;
text-align: left;
background-color: #99ff66;
}

.box_logo img {
width: auto;
height: 100%;
object-fit: contain;
}

.column_group {
width: auto;
min-height: 70px;
text-align: right;
background-color: #996;
}

.box_text_adress {
width: auto;
min-height: 35px;
background-color: #9999cc;
}

.box_text_adress p {
white-space: nowrap;
}

.info_link {
width: auto;
min-height: 35px;
background-color: #cc3300;
}

.info_link ul {
list-style-type: none;
}

.info_link ul li {
display: inline-block;
font-size: 0.95rem;
padding: 0 0 0 1vw;
}

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

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

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

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

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

guest

回答2

0

若干強引かもしれませんが、
.info_linkのclassに

CSS

1display: flex; 2justify-content: center; 3align-items: flex-end; 4```これらを追記するのはいかがでしょうか?

投稿2021/02/24 15:44

lily_night2121

総合スコア43

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

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

hiromint

2021/02/25 02:31

ご提案ありがとうございます。 前後でflex boxを使っているため、字下げのためだけに ここにも使うとちょっと記述が複雑になりすぎるので…。 どうもすみません、ご協力ありがとうございました。
guest

0

こちらも若干強引かもしれませんが。。

ulの高さ・幅を確保してdisplay: table;、子要素をtable-cellにしてvertical-align: bottom;にしました。

css

1.info_link { 2 background-color: #cc3300; 3} 4 5.info_link ul { 6 list-style-type: none; 7 min-height: 35px; 8 width: 100%; 9 display: table; 10} 11 12.info_link ul li { 13 display: table-cell; 14 vertical-align: bottom; 15 font-size: 0.95rem; 16 padding: 0 0 0 1vw; 17}

もしくは今のままで、.info_link ul liのpadding調整だけでも「文字が下に寄った感」は出ると思います。
padding: 0 0 0 1vw; ⇒ padding: 10px 0 0 10px; みたいな。

投稿2021/02/25 01:23

mai1210

総合スコア272

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

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

hiromint

2021/02/25 02:34

タグ、実際に記述して試してみたのですが、下がりませんでした。 (なにか他の物が干渉してるのかな) padding調整は先立って自分でもやってみたのですが、ブラウザを 拡縮するとかなり動いてしまうんですよね。 vertical-alignの様に、下に張り付かせるタグが使えたら一番 いいのですが…。
hiromint

2021/02/26 05:23

返信ありがとうございました! 余白リセットをかけると、確かに動作しました。 他部分のコードをあわせて見直してみます。 リキッドデザインにしたいので、余白はremで 指定していました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問