[スクラップ] WEB の勉強のために「ウェブ開発を学ぶ | MDN」 を読む
へぶんWEB の勉強するために色々と調べていて MDN の初心者向けのコンテンツが、めちゃくちゃ充実していて、しかも説明が丁寧で感動した。
このスクラップでは主に気に留まったことをメモしていく。
へぶんHTML 入門
へぶん
ブロックとインライン
- ブロック要素
- 新しい行として出力される
- ブロック要素の次にくる要素は必ず次の行に出力される
- インライン要素
- ブロック要素の中で使われて、改行されない
- <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 で
<,>などの特殊文字を表示したい時は<>などに置き換えが必要
へぶん
-
titleタグはお気に入りのデフォルトタイトルにも使われる
<meta> 要素
- <meta charset="utf-8"> だとエンコードを指定できる
ダウンロードへのリンクは 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>
へぶん
引用に関する要素と属性
- 引用した文を囲うする要素
-
<blockquote>を使用する - 文の一部分が引用であることを示す場合は
<q>を使用する -
<blockquote>,<q>それぞれにcite属性があり、引用元の URL を入れる
-
- 出典を表す要素
-
<cite>を使用する - 以下のように引用元の名前の
<a>,<cite>で入れ子で書くっぽい。
-
<a href="http://someurl.com">
<cite>Bookman</cite>
</a>
- 無知なことが理由だけど、紹介されてる構成として header が nav (navigation bar) と別になってるのに少し驚いた
- 確かに Zenn のサイトも別になってる。
- 分かれてることでレスポンシブに作りやすそう。モバイルでは nav を消すなど
-
<aside>(余談要素) が謎だと思ったけど、Zenn だとサイドバーとかで使われてる。
- HTML がルールに沿ってるかどうかチェックしてくれる
Markup Validation Serviceが紹介されてる。- https://validator.w3.org/
- CI でこういうバリデータ通してるプロジェクトもあるんだろうか
へぶん
- 当分使う事はないと思うので流し読みする
- 正しい HTML の構造を書こう
- メールの独自のルールを把握しておこう
- HTML 入門の最終課題。一番面白い。
- Zenn がお手本の通りの構成になってるので覚えておこう。
へぶんマルチメディアとその埋め込み方
へぶん
img 要素の alt 属性
- 読み上げのみに使うと考えてたけど、画像が取得できないなどの画像が取得できない場合にも alt で設定された文言が表示される
- 気が散るからよくTwitter の画像を拒否してるけど、代わりに alt 出てるわ
title 属性は使わない方がいい
これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。
しかし、これは推奨されていません — title には多くのアクセシビリティ上の問題があります。
title の説明の直後に「推奨されてない」って書いていて、結構びっくりした。
以下を読む限り、マウスホバーくらいしか活躍するところがないので、マウス使ってない、かつ、マウスオーバーを使っているユーザーには無意味、とのこと。むしろない方がいい的な論調。
img に関しては、alt 設定しておくので十分そう。
知らんけど、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>
- controls は指定する必要がある。
- video タグではタグ内にテキストを配置することで、動画が取得できない場合の代替コンテンツを表示する
- iframe でコンテンツを提供する場合は
sandboxを提供する
へぶん
- img タグでも svg を読み込めるけど、svg の方が良さそう
へぶん
-
テーブルレイアウトはページ全体のレイアウトでは使わないようにしましょう
- 古くさいし、アクセシビリティも低下する
-
<tr>,<td>,<th>を使用する
- その他、下段に計算結果の行を追加するとか、特殊な使い方を想定したタグもあるので、記憶の片隅に置いておく
へぶん
へぶん-
<form>-
<form>を親に置く - method 属性には
postまたはgetを置く - form に入れ子にする形で
inputやtextareaを配置する。
-
-
<input>- input の type はアクセシビリティだけでなく、使い勝手にも影響する。スマホのキーボードの適切な出し分けにも関係する
- input の value はデフォルトの hintText の表示に使う
-
<label>- label の for 属性は対応する input の id を指す
-
<button>-
type=button- デフォルトのやつ。何も起こらない
-
type=submit- form 要素の送信を行う
-
-
input,textareaの装飾- :forcus でフォーカス時のスタイリング
- エラー時のスタイリング
へぶん若干脱線するけど、以下の本併せて読んでてすごくいい。各要素にどんな意味があるのか、どう使えばいいのか教えてくれる。ザッと読んでコーディングするときに近くに置いとくと良さそう。
- input に label をつけることで, label もクリック領域になって押しやすくなる
とか知らなかった。なんでわざわざ label とか用意したんだろうとか若干思ってたけど、普通に <p> タグとかで置くよりいい。
へぶんXSS 対策は普通に React の form タグ使ったとけば大丈夫そう。
へぶんZenn 上で以下の記事を見つけた。FlexBox と GridLayout について網羅的に図解されていて、これはいいと思った。
最近 Web フロントエンドに入門して、Tailwind CSSのドキュメントが非常に理解しやすく、
素の HTML/CSS もこんな風に図解でわかりやすい説明があれば「"CSS 怖い" ってならなそうだけどな」と思っていたので、見つけて嬉しかった。
以下の BOOTH の本をポチったのでやっていく。
コード例が沢山載ってるのでコピって動かしながら読んでいくのが良さそう。
Kindle 版もあったけど BOOTH で買った。kindle と比較してコピーしやすいから、こっちで良かった気がする。
へぶん読んだおかげで flex に関しては、普通に書けるようになった。
grid は GridItem そのものの配置の仕方は覚えたけど、整列周りは忘れそう。