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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

993閲覧

aタグのdisplayが変わった

syo--

総合スコア28

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/02/15 13:33

aタグにdisplay:inline-block;を設定していないのにwidthやheightを設定できました
親要素にdisplay:flex;を設定しているのが原因なのでしょうか 調べても情報が出てきませんでした

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>isara模写</title> 6 <link rel="stylesheet" href="css/isara.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 </head> 9<div class="contact-page"> 10 <p class="contact-p teian">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</p> 11 <p class="marker contact-p">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p> 12 <a href="#">お問い合わせ&資料請求はこちら</a> 13 <p class="contact-p simekiri">第6期生:2019年11月25日 ~ 2019年12月14日*締め切りました</p> 14 <p class="contact-p simekiri">第7期生:2020年2月17日 ~ 2020年3月7日*締め切りました</p> 15 <p class="contact-p simekiri">第8期生:2021年内に開催予定*資料請求受付中です</p> 16 17 </div>

CSS

1@charset "UTF-8"; 2html{ 3 font-size:62.5%; 4} 5*,*::before,*::after{ 6 box-sizing:border-box; 7} 8body { 9 font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; 10 margin:0px; 11} 12h1,h2,h3,h4,h5,h6{margin:0px;} 13a{text-decoration:none;} 14.contact-page{height:600px; background-color:#EBB94D; display:flex; flex-direction:column; align-items:center; 15 padding-top:35px; text-align: center;} 16 .contact-p{font-weight:bold; font-size:1.3rem; color:white; line-height:1.5;} 17 .marker{background-color:white; color:#c7254e; display:inline-block; font-size:1.1rem; letter-spacing:2px; 18 border-radius:4px; margin-bottom:45px;} 19 .teian{margin-bottom:15px;} 20 .contact-page a{font-size:1.6rem; background-color:#d84940; opacity:0.8; color:white; 21 font-weight:bold; border-radius:45px; width:1030px; height:105px; line-height: 105px; margin-bottom:70px;} 22 .contact-page a:hover{opacity:1;} .simekiri{letter-spacing:2px; font-size:1.4rem; margin-bottom:35px;} 23

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

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

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

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

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

guest

回答1

0

ベストアンサー

フレックスアイテムのdisplay値は、自動的にブロック化されます。

Flex Items

If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified.

投稿2021/02/15 15:01

int32_t

総合スコア20661

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

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

syo--

2021/02/16 02:42

はじめて知りました!ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問