![イメージ説明]### 前提・実現したいこと
html及びcssを練習しています。
そこで<h>を使用した際中の文字が中央によってしまいます。
発生している問題・エラーメッセージ
<h4>の文字が中央によってしまう →左寄せにしたい
該当のソースコード
<html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <div class="header"> <h1 class="header-title">Progate</h1> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> <div class="main"> <h1>HELLOWORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> <div class="contents"> <h3 class="contents-title">学べるレッスン</h3> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" /> <p class="contents-mokuji">HTML</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" /> <p class="contents-mokuji">PHP</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" /> <p class="contents-mokuji">Ruby</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" /> <p class="contents-mokuji">Swift</p> </div> </div> <div class="form"> <h4 class="form-title">お問い合わせ</h4> <p class="contents-list">メールアドレス(必須)</p> <input> <p class="contents-list">お問い合わせ内容(必須)</p> <textarea></textarea> <p class="contents-list">※必須項目は必ずご入力ください</p> <input class="button" type="submit" value="送信"> </div> </div> </body> </html> <css> /* CSSのリセット(消さないでください) */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } li { list-style: none; } body{ font-family:"Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif; } /* ここからCSSを記述してください */ .header{ background-color:#26d0c9; height:90px; color:white; } .header-title{ font-size:36px; padding:20px 40px; float:left; } .header li{ float:left; font-size:20px; padding:33px 20px; } .main{ float:left; padding-left:80px; } .main h1{ font-size:140px; padding-top:100px; } .main span{ color:red; } .main h2{ font-size:60px; } .contents{ height:500px; } .contents-title{ font-size:28px; padding-top:100px; padding-bottom:15px; border-bottom:solid 2px #dee7ec; margin-bottom:50px; } .contents-pic{ float:left; padding-right:40px; } .contents-mokuji{ padding-top:30px; font-size:24px; padding-bottom:100px; } .form{ margin-bottom:100px; } .form-title{ font-size:28px; padding-top:100px; padding-bottom:15px; border-bottom:solid 2px #dee7ec; margin-bottom:50px; } input,textarea{ padding:20px; margin-bottom:30px; width:400px; border:1px #dee7ec solid; } .contents-list{ margin-bottom:10px; } .button{ color:#889ead; font-size:18px; background-color:#dee7ec; }
試したこと
・cssでpadding-left:0;
・align="left"
補足情報(FW/ツールのバージョンなど)
CSSもご提示ください。
あと、現象が確認できる画面キャプチャもご提示ください。
cssとキャプチャを追加しました。
ご教示いただけますと幸いです。
解決されたのでしたらベストアンサーを選び「解決済み」とされては?
https://teratail.com/help/question-tips#questionTips4
回答3件
あなたの回答
tips
プレビュー