Closed23

[スクラップ] WEB の勉強のために「ウェブ開発を学ぶ | MDN」 を読む

WEB の勉強するために色々と調べていて MDN の初心者向けのコンテンツが、めちゃくちゃ充実していて、しかも説明が丁寧で感動した。

https://developer.mozilla.org/ja/docs/Learn/HTML
このスクラップでは主に気に留まったことをメモしていく。

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started
ブロックとインライン
  • ブロック要素
    • 新しい行として出力される
    • ブロック要素の次にくる要素は必ず次の行に出力される
  • インライン要素
    • ブロック要素の中で使われて、改行されない
    • <p>タグの中で <a> <em> <strong> など、一部表現を変えたい時などに使われる
空要素 (Empty Element)
  • <img> とか閉じタグがないもの
  • Void Element とも呼ばれる
  • <a> タグの title 指定するとツールチップが出るようになるのいいな
真偽値属性
  • <input> の desabled とか値がないもの
  • 属性があるだけで true の意味になる
head 要素
  • HTML ページに入れておきたいが見せたくないすべてのものを入れておくコンテナー
  • 検索結果に出したいキーワードや CSS やエンコーディングを含める

=> 上記から、表示情報以外のそのページに関するあらゆる関連情報を入れておく場所と理解する

  • body 要素に表示したいものを詰める
ページ内リンクの仕組み
  • ページ内で遷移したい箇所に <a> タグを仕込む
  • href に #始まりで命名する
    • 例: <a href="#some_content">
  • 上記で href で設定した #some_content に遷移する
  • HTML で <, > などの特殊文字を表示したい時は&lt; &gt; などに置き換えが必要

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
  • title タグはお気に入りのデフォルトタイトルにも使われる
<meta> 要素
  • <meta charset="utf-8"> だとエンコードを指定できる

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
ダウンロードへのリンクは download 属性を使う

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
引用に関する要素と属性
  • 引用した文を囲うする要素
    • <blockquote> を使用する
    • 文の一部分が引用であることを示す場合は <q> を使用する
    • <blockquote>, <q> それぞれに cite 属性があり、引用元の URL を入れる
  • 出典を表す要素
    • <cite> を使用する
    • 以下のように引用元の名前の <a> , <cite> で入れ子で書くっぽい。
 <a href="http://someurl.com">
    <cite>Bookman</cite>
 </a>

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
  • 無知なことが理由だけど、紹介されてる構成として header が nav (navigation bar) と別になってるのに少し驚いた
    • 確かに Zenn のサイトも別になってる。
    • 分かれてることでレスポンシブに作りやすそう。モバイルでは nav を消すなど
  • <aside> (余談要素) が謎だと思ったけど、Zenn だとサイドバーとかで使われてる。

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
  • HTML がルールに沿ってるかどうかチェックしてくれる Markup Validation Service が紹介されてる。

https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
img 要素の alt 属性
  • 読み上げのみに使うと考えてたけど、画像が取得できないなどの画像が取得できない場合にも alt で設定された文言が表示される
  • 気が散るからよくTwitter の画像を拒否してるけど、代わりに alt 出てるわ
title 属性は使わない方がいい

これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。
しかし、これは推奨されていません — title には多くのアクセシビリティ上の問題があります。

title の説明の直後に「推奨されてない」って書いていて、結構びっくりした。
以下を読む限り、マウスホバーくらいしか活躍するところがないので、マウス使ってない、かつ、マウスオーバーを使っているユーザーには無意味、とのこと。むしろない方がいい的な論調。
img に関しては、alt 設定しておくので十分そう。

https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/

知らんけど、HTML でこういう仕様山ほどありそう。広く使われていて後方互換性維持してる背景ありそう。

画像の説明 - `<figure>`

<figure>, <figcaption>` を使って画像に説明埋め込めるらしい。

<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
 alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
 width="200"
 height="171"
 title="A T-Rex on display in the Manchester University Museum">
 <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption>
</figure>

https://developer.mozilla.org/ja/docs/Learn/HTML/Tables/Basics
  • テーブルレイアウトはページ全体のレイアウトでは使わないようにしましょう

    • 古くさいし、アクセシビリティも低下する
  • <tr>,<td>,<th> を使用する

https://developer.mozilla.org/ja/docs/Learn/HTML/Tables/Advanced
  • その他、下段に計算結果の行を追加するとか、特殊な使い方を想定したタグもあるので、記憶の片隅に置いておく
  • <form>
    • <form> を親に置く
    • method 属性には post または get を置く
    • form に入れ子にする形で inputtextarea を配置する。
  • <input>
    • input の type はアクセシビリティだけでなく、使い勝手にも影響する。スマホのキーボードの適切な出し分けにも関係する
    • input の value はデフォルトの hintText の表示に使う
  • <label>
    • label の for 属性は対応する input の id を指す
  • <button>
    • type=button
      • デフォルトのやつ。何も起こらない
    • type=submit
      • form 要素の送信を行う
  • input, textarea の装飾
    • :forcus でフォーカス時のスタイリング
    • エラー時のスタイリング

若干脱線するけど、以下の本併せて読んでてすごくいい。各要素にどんな意味があるのか、どう使えばいいのか教えてくれる。ザッと読んでコーディングするときに近くに置いとくと良さそう。

https://www.amazon.co.jp/dp/4862464513/ref=cm_sw_r_tw_dp_YTS93ZTMKGSFSSHHXASH
  • input に label をつけることで, label もクリック領域になって押しやすくなる

とか知らなかった。なんでわざわざ label とか用意したんだろうとか若干思ってたけど、普通に <p> タグとかで置くよりいい。

Zenn 上で以下の記事を見つけた。FlexBox と GridLayout について網羅的に図解されていて、これはいいと思った。

https://zenn.dev/umatoma/articles/e6c4051f4c882d
https://zenn.dev/umatoma/articles/b970bdd3a148cd

最近 Web フロントエンドに入門して、Tailwind CSSのドキュメントが非常に理解しやすく、
素の HTML/CSS もこんな風に図解でわかりやすい説明があれば「"CSS 怖い" ってならなそうだけどな」と思っていたので、見つけて嬉しかった。

以下の BOOTH の本をポチったのでやっていく。

https://booth.pm/ja/items/3232149

コード例が沢山載ってるのでコピって動かしながら読んでいくのが良さそう。
Kindle 版もあったけど BOOTH で買った。kindle と比較してコピーしやすいから、こっちで良かった気がする。

読んだおかげで flex に関しては、普通に書けるようになった。

grid は GridItem そのものの配置の仕方は覚えたけど、整列周りは忘れそう。

残りは Javascript のセクションだけど、ほとんどプログラミングそのものの説明なので要らなそう。

formonsubmit で呼ぶ e.preventDefault() だけちゃんと理解してないけど、いくつかパターンがあるし、その都度あるなしの挙動確認していけば良さそう。

ってことで、完。

Zenn のページの構成がお手本みたいな構成になってるから、クローンしてみるのも良さそう。

このスクラップは5ヶ月前にクローズされました
ログインするとコメントできます