1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

「HTML&CSSとWebデザイン 入門講座」Chapter5のメモ

Posted at

本記事の内容

タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。
(理解が間違っていたら教えてほしいです)

p209「potisionメソッドのrelativeとabsoluteがよくわかんない」

参考URL「CSSのposition:absolute;とは?要素を思いのままに配置する方法」
https://www.sejuku.net/blog/53016

参考書では、
post-infoクラスにposition: relative;を設定し、
post-dateにposition: relative;としている。
まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。
potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。
(のかな?)

p210,215「displayメソッドのblockって何?」

参考URL「【初学者必見】displayについて知ろう!」
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e5%88%9d%e5%ad%a6%e8%80%85%e5%bf%85%e8%a6%8b%e3%80%91display%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%9f%a5%e3%82%8d%e3%81%86%ef%bc%81/

親子関係の整理
親:news-contentsでdispaly:flex;
子:post-dateでdisplay:block
この関係は、p要素の中にスパン要素「2019」が入っているのでこのままだと横並びになる。
今回は、青丸の中に上下に日付と年を入れたいのでspan要素をblockにすることで縦並びなるようにした。

sub-menuのdispaly:blockの意図
元々li要素にしているので縦並びだが、block要素にしてクリックした時の範囲を文字のみから文字が含まれるブロックに広げている。クリックしやすい。
→クリックするやつはブロックにした方が良いのだろうなぁ。

p211「font-weight:normal」にする理由

参考URL「h1タグの太字をやめる方法」
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1484134829

h要素はデフォルトが太字(bold)だから、太字解除のため

p213「paddingで(0 , 8px , 8px)ってある時の上下左右の指定はどうなるの」

参考URL「スタイルシートリファレンス padding」
http://www.htmq.com/style/padding.shtml

値を3つ指定した場合: 記述した順に[上][左右][下]のパディングになります。
→へ〜

以上。

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?