Q&A
提示されたCSSは本当にそのままですか？閉じが2つあるので構文的には正しくありません
参考書を見ながら勉強をしていて、以下のようなHTMLがありました。
このhtmlに対して、簡単にcssを適用すると以下のような画像になりました。
# 前置き
html
1 <a href="#" class="article-box"> 2 <h3 class="title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 3 <p class="desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしましょう！</p> 4 <time class="date" datetime="2015-06-17">2015.06.17 WED</time> 5 <img class="image" src="./images/article.jpg" alt="コーディング画面"> 6 </a>
css
1.article-box { 2 display: block; 3 width: 320px; 4 height:360px; 5 box-shadow: 0px 6px 4px -4px rgba(0, 0, 0, 0.15); 6 margin-bottom: 30px; 7}
# 本題
上記のhtml cssは最終的に、imgタグをposition:absoluteを用いて、top: 0に固定し、画像が一番上に来るようにするのですが、それなら初めからhtmlのimgを以下のように一番上にすればいいのではと思ったのですが、どうでしょうか？<h3>タグを一番上に書くべきなどというルールがあったりするのでしょうか？
回答いただけると幸いです。
html
1 <a href="#" class="article-box"> 2 <img class="image" src="./images/article.jpg" alt="コーディング画面"><!--imgタグを一番上へ移動した--> 3 <h3 class="title">実務で使えるHTML/CSSモダンコーディングTIPS</h3> 4 <p class="desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしましょう！</p> 5 <time class="date" datetime="2015-06-17">2015.06.17 WED</time>
mac 10.14.4
google chrome
参考書 HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
すみません、こちらのミスです。
あと書籍参考であれば書籍名を提示されたほうが良いです。書籍に何かしら意図が記載されているかもしれませんし。ただ、その書籍を持っている人しか確認できないので難ですけどね。
何も解説はありませんでしたか？
ご指摘ありがとうございます。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
という本です。
この部分に関しては、画像はこのように配置しますといって、cssが提示されただけでした。
質問を編集して追記願います。
ただ、詳しい解説がないのであればいったん飲み込み、自身で色々変えてみて挙動確認してなんとなく納得するでも良いと思います。
ひとつのことを実現するための手段はひとつではありませんので
了解致しました。
そうですね、いろいろと試しながら、納得していきます。
回答1件
0
ベストアンサー
その参考書を読んでないので推測ですが、absoluteの説明のために
あえてHTMLをそう書いているのではないでしょうか？
投稿2019/10/24 02:39
総合スコア5158
回答ありがとうございます。
自分もそう思ったのですが、htmlの順番に何か意図があるのかと思いまして。
不都合ないなら、後者の方でやっていこうと思います。
親切な本ならたぶん文章にその理由が書いているんじゃないかなと思います。
作りたい構造によって書き方はケースバイケースですし、
表現方法が１つとは限らないのでいろいろ試して見るとよいかと思います。
理由は書いてなかったので、どういう意図で書いたのかわかりませんが、盲目的に写すだけでなく、いろいろ試すことで、今回のようにいろいろと発見ができるので、今後も試してみます。
あなたの回答
tips
プレビュー
