こんにちは、マツダです。
今日は先週からの「ふたば図書館」というサイト作成課題でスライスとコーディングをしました。
転職に向けて、制作時間も気にかけながら作成しました。
（それと実習も残すところあと２日しかないのでCSSを明日までに完成させないといけないので･･･！泣）
所要時間はおおよそスライス1時間、HTML1時間、というところでした。もう少し基本的な詰まるところを減らしていきたいです。
まずしばらくやらない間にスライスのやり方をちょっと忘れているという失態！
就職する企業によって、アセットで書き出すのかスライスするのか、異なるとは思いますが、「この作業はスライスの方がはやい！」「アセットのほうが正確！」など状況によって異なるので、どちらもちゃんと使えないといけない、というアドバイスを頂いたので、できるほうでやる・・・のではなく、どちらにも慣れていけるよう頑張ります。（また、アセットの機能はCCからなので、やはりスライスはマストで理解しないとですね！）
今日は、HTMLでならべるところまでしかできませんでしたが、その中で
すこし理解が曖昧な部分があったので、おさらいも兼ねてまとめていきたいと思います。
■ブロックレベル要素とインライン要素とのおさらい
まずは基本のおはなしからです。
この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められます。
◇ブロックレベル要素
・文書を構成するにおいての見出し・段落・表などの基本要素で、1つのブロックとしてブラウザで認識される
・改行される
→よく使うブロックレベル要素：div、p、ul、h1～h>、dl、ol、table…等
◇インライン要素
・主にブロックレベル要素の内容部分として用いられ、文章の一部として扱われる
・文章の一部であるため、改行はされない
→よく使うブロックレベル要素：a、br、em、img、input、label、small、span、strong…等
◇配置ルール
ブロックレベル要素の中にインライン要素→○
インライン要素の中にインライン要素→○
インライン要素の中にブロックレベル要素 →× ※重要POINT
◇注意点
HTML5より「インライン要素とブロックレベル要素」という考え方は廃止されています。
しかし、「インラインの役割のもつ要素の中にブロックレベルの役割をもつ要素を入れてはいけない」といったルールが無くなったわけではありません。
したがって、これまでのコーディングのルールを理解して作り進めていけば、それらの仕様変更があったとしても問題は無いということです。
■imgタグはそのままでいいの？囲むの？
この問題については、サイトを作るたびなやんできました泣
上記に書いたとおり、imgタグはインライン要素なので、ブロックレベル要素で囲んだほうがいいの･･･？
でもimgだけしかはいってないブロックレベル要素もなんかヘンじゃないの･･･？
HTML5からインラインもブロックレベルも廃止されたわけだから、いらないの･･･？
という問が無限ループでした笑
様々な記事を参考にさせて頂いても、2018年現在とバージョンが異なっていたりでぐるぐるしていました。笑
では結局、imgタグは囲むのか、囲まないのか･･･！
結論から申しますと
「時と場合にあわせて囲んだり囲まなかったり」です！笑
すみません、ちょっと言葉がうまくまとまりませんでしたが、つまり、
imgを「絶対にブロックレベル要素で囲まなければならない」というわけではないのです。
imgを置く以外に特に理由のない不必要なdivやpが増えてしまうのであれば、そのままでいいのです。
ですが、CSSで特定の余白をつけることが必要であったり、文字を重ねたりするなど、画像を配置する以外に
手を加えなければならない場合は、ブロックレベル要素で囲んだほうがいいということです。
ブログの記事で調べながら「むむむ・・・」と悩んでいましたが、
ふたっぱさんに考え方を教えていただき、とてもすっきりしました！
引き続き、明日はCSSがんばります★
（追記）
2025年万国博覧会の開催場所が大阪に決定しましたね！！！
先日、株式会社人間さんと、株式会社BYTHREEさんプロデュースの「はじめて万博」という展示会を見に行っていて
大阪万博についての妄想が膨らんでいたところだったので尚のこと嬉しかったです！
7年後の万博に向けて、私もWEB業界で力をつけていきたいです！
