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

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

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

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

CSS

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

Q&A

1回答

969閲覧

positionを使った2行以上ある文章を画像の中央に配置させる方法

Erunoa

総合スコア61

HTML5

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

CSS

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

0グッド

0クリップ

投稿2021/04/28 12:05

編集2021/04/29 05:42

画像の上に2行以上ある文章を中央に配置させたい

htmlで模写の練習をしているのですが、positionを使った方法でcssを試したのですがうまく実装できませんでした。

発生している問題・エラーメッセージ

h1タグとpタグを横に並べて画像の中央に並べたいのだがh1の文字だけ中央配置される

pタグだけデフォルトの左側に表示されるもしくは重なったりする。

該当のソースコード

index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shotcaticon" href="img/favicon.ico"> <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> </head>
<body> <header> <div class="header-title"><a href="#">30日Daysトライアル</a> </div> <nav> <ul class="header-right"> <li><a href="#">デイドラとは</a></li> <li><a href="#">コース一覧</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <div class="container"> <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1> </div> <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p> <!-- wrapper --> </body>
</html>

style.css
@charset "UTF-8";

html {
font-size: 100%;
}
body {
color: black;
}
header {
display: flex;
justify-content: space-between;

}
.header-title {
float: left;
}

.header-right {
display: flex;
float: right;
list-style: none;
margin-right: 20px;
}

.container {
position: relative;
background-image: url(../img/main-vsual-nontitle.png);
background-size: cover;
height: 300px;
}
.copy {
top: 50%;
left: 50%;
display: block;
position: absolute;
transform: translate(-50%,-50%)
}
.copy p {
top: 50%;
left: 50%;
display: block;
position: absolute;
transform: translate(-50%,-50%)

}

ソースコード

試したこと

サルワカのページを見ていろいろ試した
ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
模写 デイドラからの練習問題から

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

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

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

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

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

meg_

2021/04/28 12:57

該当のhtmlとcssを載せてください。
Erunoa

2021/04/29 00:10

index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shotcaticon" href="img/favicon.ico"> <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="header-title"><a href="#">30日Daysトライアル</a> </div> <nav> <ul class="header-right"> <li><a href="#">デイドラとは</a></li> <li><a href="#">コース一覧</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <div class="container"> <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1> </div> <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p> <!-- wrapper --> </body> </html> style.css @charset "UTF-8"; html { font-size: 100%; } body { color: black; } header { display: flex; justify-content: space-between; } .header-title { float: left; } .header-right { display: flex; float: right; list-style: none; margin-right: 20px; } .container { position: relative; background-image: url(../img/main-vsual-nontitle.png); background-size: cover; height: 300px; display: block; } .copy { top: 50%; left: 50%; display: block; position: absolute; transform: translate(-50%,-50%) } .copy p { width: 100%; display: block; position: absolute; transform: translate(-50%,-50%) } こんな感じのコードになります。よろしくお願いいたします。
meg_

2021/04/29 00:17

お手数ですが、質問に追記してください。ここですと他の回答者の方に伝わりにくいです。※「コードの挿入」で記入ください。
guest

回答1

0

CSSに下記を追加してはどうでしょうか?

CSS

1p { 2 text-align: center; 3}

※コメント欄に記載のコードに対する最小の追加で済むものを提示しました。
※必要に応じてクラスを追加するなどしてください。


【追記】
質問者さんのやりたいことが見えてきましたので回答を変更します。

1.htmlを一部修正しました。

html

1<div class="container"> 2 <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1> 3 <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p> 4</div>

2.CSSに下記を追加しました。

CSS

1.container p { 2 position: absolute; 3 top: 75%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6}

イメージ説明

投稿2021/04/29 01:27

編集2021/04/29 11:24
meg_

総合スコア10760

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

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

Erunoa

2021/04/29 02:45

text-align: center;をあてたのですが、画像からはみ出してしまいました。
meg_

2021/04/29 04:35 編集

同じ画像が手元にないので再現出来ませんが、画像のサイズはいくつでしょうか? 私の環境で試した限りでは問題ありませんでした。
Erunoa

2021/04/29 11:29

すいません。画像がすでにフォルダーにあるのに気づかないで進めてました。皆様ありがとうございました。お手数かけました。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問