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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

839閲覧

書いたタグがブラウザ上で表示されない。

sharara

総合スコア6

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/15 12:00

前提・実現したいこと

isaraの模写を行っております。articleタグでwhatisクラスを作ったのですが、
グーグルクロムの検証を用いても書いたタグが存在していないようで表示されておらず、実際にwhatisクラスにpaddingやbackground-colorを書いてもなにも変化がありませんでした。
なにが原因でしょうか??よろしくお願いいたします。

該当のソースコード

HTML

1 <article class="whatis"> 2 <p class="circle-about">ABOUT</p> 3 <h2 class="key-brackets">ノマドエンジニア育成講座<br> 4 iSara[イサラ]とは</h2> 5 <p class="whatis-isara"> 「稼ぐこと」にフォーカスしたWebエンジニア育成講座です。</p> 6 <div class="whatis-surround"> 7 <p class="whatis-isara">稼げるエンジニアに必要な5つのスキルとは?</p> 8 <div class="whatis-detail"> 9 <div class="whatis-block"> 10 <img src="../img/skill.jpg" alt=""> 11 <p>基礎的な<br> 12 プログラミングスキル</p> 13 </div> 14 <div class="whatis-block"> 15 <img src="../img/sales.jpg" alt=""> 16 <p>案件獲得に必要な<br> 17 営業力</p> 18 </div> 19 <div class="whatis-block"> 20 <img src="../img/document.jpg" alt=""> 21 <p>見積もり作成から<br> 22 納品までの知識</p> 23 </div> 24 <div class="whatis-block"> 25 <img src="../img/plusone.jpg" alt=""> 26 <p>自分の付加価値を<br> 27 高めるスキル</p> 28 </div> 29 <div class="whatis-block"> 30 <img src="../img/connection.jpg" alt=""> 31 <p>フリーランス同士の<br> 32 横のつながり</p> 33 </div> 34 </div> 35 </div> 36 </article>

CSS

1 2.key-brackets{ 3 padding:5rem 0; 4 text-align: center; 5 position:relative; 6 font-size:1.4rem; 7} 8 9.key-brackets:before { 10 position:absolute; 11 12 content:""; 13 box-sizing: border-box; 14 15 top: 3rem; 16 left: 4rem; 17 18 width: 50px; 19 height: 50px; 20 21 border-top: 4px solid #ebb94d; 22 border-left: 4px solid #ebb94d; 23} 24 25.key-brackets:after { 26 position: absolute; 27 content: ""; 28 box-sizing: border-box; 29 30 bottom: 3rem; 31 right: 4rem; 32 33 width: 50px; 34 height: 50px; 35 36 border-bottom: 4px solid #ebb94d; 37 border-right: 4px solid #ebb94d; 38} 39 40 41.circle-about{ 42 position:relative; 43 bottom:3rem; 44 font-size:1rem; 45 color:white; 46 width:5rem; 47 height: 5rem; 48 border-radius: 50%; 49 background:orange; 50 text-align:center; 51 line-height: 5rem; 52 margin-left:46%; 53 } 54 55.whatis-isara{ 56 text-align:center; 57 font-size:1.2rem; 58 font-weight:bold; 59 } 60 61.whatis-surround{ 62 margin:2rem 2rem 0; 63 padding:2rem 0; 64 border-width:0.2rem; 65 border-color:orange; 66 border-style: solid; 67 } 68 69.whatis-detail{ 70 display:flex; 71 justify-content:center; 72 } 73 74.whatis-block{ 75 margin-top:2rem; 76 padding:1rem 0.5rem; 77 } 78 79.whatis-block p{ 80 font-size:0.7rem; 81 text-align:center; 82 padding-top:1rem; 83 line-height:0.8rem; 84 } 85 86.whatis-block img{ 87 padding:0 1.5rem; 88 } 89 90.whatis{ 91 padding:1rem 0; 92 background-color: #ebb94d; 93 } 94

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

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

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

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

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

guest

回答1

0

ベストアンサー

<article class="whatis"> ↑ ここの全角空白を半角空白に修正すればいいでしょう。

投稿2020/12/15 12:09

hatena19

総合スコア33620

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

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

sharara

2020/12/15 12:12

見逃してしまっていました・・・。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問