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

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

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

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

Q&A

解決済

1回答

1144閲覧

htmlでimg要素を下段に配置する理由がわからない

gunmed

総合スコア55

HTML5

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

0グッド

0クリップ

投稿2019/10/24 02:31

編集2019/10/24 04:50

参考書を見ながら勉強をしていて、以下のような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つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

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

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

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

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

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

m.ts10806

2019/10/24 02:43

提示されたCSSは本当にそのままですか?閉じが2つあるので構文的には正しくありません
gunmed

2019/10/24 02:57

すみません、こちらのミスです。
m.ts10806

2019/10/24 03:01

あと書籍参考であれば書籍名を提示されたほうが良いです。書籍に何かしら意図が記載されているかもしれませんし。ただ、その書籍を持っている人しか確認できないので難ですけどね。 何も解説はありませんでしたか?
gunmed

2019/10/24 03:14 編集

ご指摘ありがとうございます。 HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 という本です。 この部分に関しては、画像はこのように配置しますといって、cssが提示されただけでした。
m.ts10806

2019/10/24 04:06

質問を編集して追記願います。 ただ、詳しい解説がないのであればいったん飲み込み、自身で色々変えてみて挙動確認してなんとなく納得するでも良いと思います。 ひとつのことを実現するための手段はひとつではありませんので
gunmed

2019/10/24 04:50

了解致しました。 そうですね、いろいろと試しながら、納得していきます。
guest

回答1

0

ベストアンサー

その参考書を読んでないので推測ですが、absoluteの説明のために
あえてHTMLをそう書いているのではないでしょうか?

投稿2019/10/24 02:39

dice142

総合スコア5158

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

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

gunmed

2019/10/24 02:56

回答ありがとうございます。 自分もそう思ったのですが、htmlの順番に何か意図があるのかと思いまして。 不都合ないなら、後者の方でやっていこうと思います。
dice142

2019/10/24 03:01

親切な本ならたぶん文章にその理由が書いているんじゃないかなと思います。 作りたい構造によって書き方はケースバイケースですし、 表現方法が1つとは限らないのでいろいろ試して見るとよいかと思います。
gunmed

2019/10/24 03:16

理由は書いてなかったので、どういう意図で書いたのかわかりませんが、盲目的に写すだけでなく、いろいろ試すことで、今回のようにいろいろと発見ができるので、今後も試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問