🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

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

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

2087閲覧

Progate道場編中級について,エラー出てますが該当箇所がわかりません

Itosse

総合スコア5

CSS3

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

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/12/08 14:19

```Progateの道場編中級をやっております。レッスンラッパーという部分を作成していてエラーが発生しました。 見本コードは見ずに、見た目の近さだけでやっていたので、だいぶソースコードにズレがございますが、 見た目は完コピに近いと思っています。ですがエラーが出てしまい進めません。 どこで引っかかっているかわかる方、教えていただけないでしょうか。よろしくお願いします。 (その他、私の質問の仕方などで至らない点などご指摘いただけますと嬉しいです。) ### 発生している問題・エラーメッセージ どこで引っかかって前に進めないのかわからない。 エラーメッセージ ![イメージ説明](460fded8ca1f30942a9ecd3879e0fe1c.png) ### 該当のソースコード ```<!--大枠lesson-wrapper--> <div class="lesson-wrapper"> <!--中枠コンテナ--> <div class="container"> <!--ヘッディングメッセージ--> <div class="heading"> <h2>Learn Where to Get Started</h2> </div> <!--ここから4つを囲う「レッスンズ」--> <div class="lessons"> <!--各レッスン×4--> <!--HTML & CSS--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png" /> <p class="icon-title">HTML & CSS</p> </div> <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <!--jQuary--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png" class="lesson-icon" /> <p class="icon-title">jQuary</p> </div> <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <!--Ruby--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png" class="lesson-icon" /> <p class="icon-title">Ruby</p> </div> <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <!--PHP--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png" class="lesson-icon" /> <p class="icon-title">PHP</p> </div> <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> <!--ここまでが各レッスン×4--> </div> <!--ここまでが中枠コンテナ--> </div> <!--ここまでが大枠レッスンラッパー--> ```以下、私のCSSです /*ここからレッスンラッパー*/ .lesson-wrapper { background-color: #f7f7f7; text-align: center; - height: 580px; } - .lesson-wrapper container { - width: 1170px; } .heading h2 { font-weight: normal; - text-align: center; - color: #5f5d60; - padding: 80px 0 50px 0; } - .lesson { width: 25%; - float:left; - margin: 0 auto; } - .text-contents { - width:80%; - font-size: 13px; - color: #b3aeb5; - margin: 15px auto 0 auto; - } - - /*ポジション調整*/ .lesson-icon { position: relative; } - .icon-title { - color: white; position: absolute; top: 44%; width: 100%; ```ここに言語名を入力 HTML & CSS ソースコード 下記のリンクは中級編の最後ですので、完成形が記載されております。 [リンク内容](https://prog-8.com/html/study/2/18#/54) ### 試したこと 見本では下記のようにインラインブロックになっていたので、こちらも試したのですが変化なしでした。その他は全て組み込んでいるので、足りないものは無いはずです。 .text-contents { width: 80%; display: inline-block; margin-top: 15px; font-size: 13px; color: #b3aeb5; } ### 補足情報(FW/ツールのバージョンなど)```ここに言語を入力 コード ```

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

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

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

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

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

guest

回答2

0

ベストアンサー

昔やってたものです。完コピと言ったって、仕様書を見て作りますよね? ちなみに、答えと同じコードを書いてもエラーが起きたりします。フォントの種類が未指定であることや、opacity が足りないことが原因かもしれませんね。

投稿2019/12/08 21:03

taiyakix

総合スコア427

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

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

Itosse

2019/12/09 10:51

仕様書を確認したら完コピとは言わないんですね。フォントの種類やopacityなど確認しましたがダメだったので、「答えと同じコードでもエラー出る可能性」だということでリセットしました。 初めて質問を投稿しましたが、ご回答下さってありがとうございました。
guest

0

灰色で書かれた各言語の説明文の色が微妙に違う気がします。
opacityが間違っていないな確認してみてください。

投稿2019/12/08 17:19

FoyLand

総合スコア72

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

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

Itosse

2019/12/09 10:48

文字色は仕様書通りなので、opacityも含めて再度全体を細かく確認しましたが発見できませんでした。私の初めての質問投稿でしたが、ご回答くださりありがとうございました。精進いたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問