Q&A
コードと画面が違いませんか？
テキストの位置を直したいです
<p class="txt-contents">の位置がおかしくなってしまいます。 自分ではもう一度 classなどを見直しました ```ここに言語を入力 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progate</title> <link rel="stylesheet" href="progate-css.css"> </head></html> ``` ```ここに言語を入力 html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; }<body> <header> </header> <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE</h1> <h1>LEARN TO BE CREATIVE</h1> <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> </div> <a href="#" class="btn sign-up">新規登録はこちら</a> <p>or</p> <a href="#" class="btn twitter">twitterでログイン</a> <a href="#" class="btn facebook">facebookでログイン</a> </div> <div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> </div> <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>jQuery</p> </div> <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> </div> <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> </div> </div> <div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative</h3> </div> <a class="btn message" href="#">さっそく開発する</a> </div> </div> <footer> </footer> </body>
body {
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.top-wrapper {
background-image: url("https://prog-8.com/images/html/advanced/top.png");
padding:180px 0px 100px;
color:white;
text-align: center;
background-size:cover;
}
.container{
width:1170px;
margin:auto;
padding-bottom:30px;
font-size:30px;
font-weight:bold;
letter-spacing:5px;
}
.btn {
display:inline-block;
color:white;
border-radius:20px;
padding:8px 24px;
}
.twitter {
background-color:#55acee;
margin-left:10px;
}
.facebook{
background-color:#3b5998;
}
.sign-up{
background-color: #239b76;
}
.lesson-wrapper {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
}
.lesson {
float:left;
width:25%;
}
.lesson-icon {
position: relative;
}
.lesson p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}
.txt-contents {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
}
.message-wrapper {
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
}
.message {
padding: 15px 40px;
background-color: #5dca88;
/* box-shadowをつけてください */
box-shadow: 0 7px #1a7940;
}
 ](f6a782fb709e6ed6c90611be48e5d8bb.jpeg)
下の画面が違いました
申し訳ございません
では差し替えてください
回答2件
0
ベストアンサー
コードと提示されたコードと画面が合ってませんのでどちらが正しいのかこちらには分からないのですが、
コードを正とした場合、他にも気になる点は沢山あります。
ところどころ全角スペースが入っています。
文章中でないところの全角スペースはHTMLではレイアウトに致命的な影響を与えることがあります。
もちろん、正しくないタグ（閉じ忘れ含め）も同様です。
言語によっては「そもそもコンパイルできない」「実行時エラーで何も表示されない」とか普通にあります。
（質問者さんはC言語の質問されてるようですし、知らないはずがない概念ですね）
前の回答があまり活きていないようです。CSSのことだけ書いたから関係ないとしたのかもしれませんが、当然HTMLにも構文チェックサービスはあります。
例：Another HTML-lint
正しい構文（タグの閉じ忘れも構文の内）ができてようやくまともにレイアウトの話ができるようになります。
書いた通りにしか動かないので、ちょっとしたミスが致命的になるのもまたプログラミングの特徴です。
毎回この手のチェックサービスを利用するのもいいとは思いますが、面倒であれば構文チェック機能が入っているエディタを使いましょう。
何がいいかは個人や要件次第なのでそれこそ自分で使って選ぶべきです。
全角スペース程度なら一般的なテキストエディタで見つけられます。Windows付属のメモ帳では区別できませんのでご注意を。
前の質問からするとプロゲートを利用している？ようですが、調べたら開発環境の準備でAtomを利用するように書いてありますね。(HTML & CSS の開発環境を用意しよう！)
ちゃんとありますね。構文チェックのパッケージ。
プログラミングは環境構築が肝心です。
マラソンの準備運動に相当するものです。準備運動なしには走れません。
投稿2020/09/11 21:24
総合スコア80850
0
.lesson p で position: absolute になっているからです。
.lesson p ではなく、.lesson-icon p とすれば想定通りのレイアウトになるのではないでしょうか。
CSS
1.lesson p { 2 position: absolute; 3 top: 90px; 4 width: 100%; 5 color: white; 6}
どうして .lesson-icon p にすれば上手くいくのか分からない場合は、cssの適用範囲を理解せずにcssを書いている可能性があります。
css-selectorを学んでみてください。
投稿2020/09/11 14:13
総合スコア305
回答ありがとうございます
あなたの回答
tips
プレビュー
