[HTML][CSS] [HTML][CSS]リード文とは/デザイン豆知識/line-heightの性質/CSSの書き方

はじめに

今日は基礎のまとめとして、ワンカラムサイトのレイアウト演習を行いました。
ちょっとしたテクニックについて備忘録的にまとめました。

リード文とは

　HTMLではp.leadでクラス指定することがありますが、リード文自体の意味をはっきり理解できていないのでまとめました。

リードというのは「イントロ」と呼ばれる場合もあり、この文章の冒頭にある言葉の集合体のことを指します。それはイントロダクションであり、切り込み隊長であり、読者をより深い世界へと誘って行く招待状でもあります。リードは基本的に全てのメディアに存在していて、通常はリードがないことは罪な行為であると考えられています。ウェブ用の文章で魅力的なリード文を書く5つのステップ ｜ ライフハッカー［日本版］

• 文書の性質を簡単・明確に伝える
• 書き手と読者の架け橋となる
• 短くまとめるほうがいい（１〜２段落)
• 読者にアピールするようなフックを入れる
• リード文は記事の内容がまとまってから最後に書く

デザイン、レイアウト

• 文中を太字にして強調するのは素人っぽい
• 安易な強調表現に極力頼らないのが重要
• a:link→a:hoverなどリンク時の色を極端に変えるのも素人っぽい
• hover時には若干色を薄くする＋アンダーラインを追加してわかりやすくする、など
• 文字のレイアウトは縦のラインを揃えていくのが大切
• 無駄な改行で視線の流れが途絶えるのもよくない

CSS

line-heightの性質

line-heightの値をemで設定することでレイアウト崩れが発生したため、性質について振り返りました。

line-heightに単位を指定すると、子要素に親要素で計算された値が継承されるので、単位を指定しない方が望ましい。【CSS】CSSのline-heightで単位を指定しない理由 - Qiita より詳しい解説→line-height の値には単位なしが良いとされる理由 - lucky bag まとめ：単位ありで指定すると、その要素の子孫要素で行ボックスが意図しないものになる可能性がある。 指定しないでおくと子孫要素でフォントサイズを代えても行ボックスの高さはその都度計算される。

わかりやすいCSSの書き方

• header,グループごとに記述していく
• 基本的に上から記述していく、あちこちから書くのは駄目
• margin値などは混乱しやすいので、上からmargin-bottomをひとつひとつ積み重ねていくようにする
• 第三者にコーディングの意図を分からせるような内容にする