Q&A
ちょっとお聞きしたい
>異なる要素に同時にスタイルを当てるのはあまり良くないです。
これはなぜですか？
完成イメージ図
現在
文字の重なりだけ直したいです。
cssのpositionタグに問題があるような気がします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Dotinstall Paneを使ってみよう</title> 6 <link rel="icon" href="favicon.ico"> 7 <link rel="stylesheet" type="text/css" href="css/styles.css"> 8</head> 9<body> 10 <div class="topimage"> 11<img src="img/bg.png" alt="背景画像" width="100%"> 12<h1>Dotinstall Pane</h1> 13<p> 14 ドットインストールを見ながら<br> 15 コーディングができるAtomパッケージ 16</p> 17 18</div> 19 20</body> 21 22</html> 23
CSS
1.topimage{ 2 position: relative; 3} 4 5.topimage h1,p{ 6 position: absolute; 7 color: white; 8 9 10 11 top: 0; 12 left: 0; 13 margin:0; 14 15} 16 17img{ 18 width: 100% 19} 20
質問に足りないところがあれば直しますのでご指摘のほど待ってます。
回答もよろしくお願いします！
回答2件
0
ベストアンサー
まず、あなたが書いたであろうこのコード
意味はわかりますかね？
css
1.topimage h1, p { 2 position: absolute; 3 color: white; 4 5 6 7 top: 0; 8 left: 0; 9 margin:0; 10 11}
これの意味は、.topimageの中にあるh1タグと、HTMLファイルの中にある全部のpタグに{から}までのスタイルを設定しているっつーことだよね？
今回、.topimageにposition: relativeが設定されているね？
んで、.topimage h1, pにtop: 0とleft: 0を設定してるね？
っつーことは、.topimage h1と.topimage pは.topimageの領域の左上を基準にしたときの左上部分に配置される
そんで、.topimage p以外のpタグは、画面の左上を基準にしたときの左上部分に配置される
ってことになるんじゃないですかね？(一度このレッスンを見るといいかもしれないね)
んで、今回は.topimage h1と.topimage pはどちらも左上に配置されるってわかったんだから、こんな感じでスタイルを上書きしてどちらかの要素をずらせばいいだろうね
css
1.topimage p { 2 top: 100px; 3}
もっとも、完成イメージ図のとおりにするには、今のままじゃ画像素材とかが足りないと思うんで、もうちょっとレッスンを進めてみてくださいな
まぁ、その前に一回ドットインストールのCSS基礎文法入門を一通り見ておいたほうがいいと思うかなー
投稿2018/08/30 11:31
編集2018/08/30 11:32総合スコア2009
0
css
1.topimage h1,p{ 2 position: absolute; 3 color: white; 4 5 6 7 top: 0; 8 left: 0; 9 margin:0; 10 11}
となっているところをまず、
css
1.topimage h1{ 2 position: absolute; 3 color: white; 4 5 6 7 top: 0; 8 left: 0; 9 margin:0; 10 11} 12 13.topimage p{ 14 position: absolute; 15 color: white; 16 17 18 19 top: 0; 20 left: 0; 21 margin:0; 22 23}
と分けましょう。異なる要素に同時にスタイルを当てるのはあまり良くないです。
その上で、
css
1 top: 0; 2 left: 0; 3 margin:0;
の数値をいろいろと変えてみて下さい。
投稿2018/08/30 10:30
総合スコア213
kouheiszkさん、お早い回答ありがとうございます。
試してみた結果、私の思った通りにできました。
ありがとうございました！
説明が言葉足らずで申し訳ないです。
異なる要素に同時にスタイルを当てるのが良くない理由を説明したいと思います。
h1とpはタグの名前の通り役割が違います。h1は見出しで、pは段落を意味していますね。
例えば、見出しは太文字にするけど段落内は文字の太さを普通にしたいなど、異なる要素には異なるスタイルを当てたくなるはずです。
今回でいう要素の位置がそれに当てはまると思います。同時に定義することもできますが、別々のスタイルを反映したい際に結局分けるので、はじめから分けておいたほうが良いという理由です。
異なる要素に同時にスタイルを当てるケースとしてパット思いつくのは、すべてのタグで異なるブラウザ感でスタイルを標準化するreset.cssやnormalize.cssなどの場合でしょうか。
これも興味があれば調べてみてください。
それ以外の場合で異なる要素に同じスタイルを当てたい場合はクラスセレクタを利用すると便利です。
.title {
color: #333;
}
とタイトルに対する共通スタイルを定義しておき、
<h1 class="title">Dotinstall Pane</h1>
の様に使います。このように共通なスタイルを定義しておくことで
<h2 class="title">Sub Pane</h2>
<span class="title">Sub Pane</span>
のように、様々なタグに同じスタイルを当てることができます。
h1, h2, span {
color: #333;
}
などとするよりもいい方法です。
レッスンを進めるとそういう説明がでてくると思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/30 11:53