Labs
HTML/CSS/Javascriptの基礎を学ぶことができます。
HTML
30件1. HTMLとは(役割と全体像)
HTMLの役割、最小コード、よく使うパターン、HTML/CSS/JavaScriptの使い分け、実務のコツをまとめます。
beginnerHTML入門基礎2. HTMLの基本構造(doctype / html / head / body)
HTMLの基本構造を押さえると、「ブラウザが正しく解釈するページの土台」を毎回迷わず作れます。
beginnerdoctypehtmlhead3. meta charset / meta viewport(文字化け・スマホ対応)
`meta charset`で文字化けを防ぎ、`meta viewport`でスマホでも読みやすい表示倍率にできます。
beginnermetacharsetviewport4. 見出し(h1〜h6)と文章構造のルール
見出し(h1〜h6)を正しく使うと、ページの「目次」が整い、読みやすさ・SEO・アクセシビリティが良くなります。
beginnerheadingsstructureseo5. p / br / hr(段落・改行・区切りの使い分け)
pで段落、brで文中の改行、hrで話題の区切りを作ると、読みやすい文章構造を迷わず書けます。
beginnerpbrhr6. aタグ(リンクの基本)
aタグでページ遷移・外部サイト・ファイルなどへの「行き先」を作れます(=Webの回遊の核)。
beginneraanchorhref7. href(相対/絶対/#/mailto/tel/download)
hrefを使い分けると「どこへ飛ぶか(ページ/位置/メール/電話/ダウンロード)」を正確に指定できます。
beginnerhrefrelativeabsolute8. target と rel(別タブと安全・nofollow含む)
target="_blank"で別タブ表示にでき、同時にrelを正しく付けると安全性とSEOの意図(nofollow等)をコントロールできます。
beginnertargetrelnoopener9. 画像:imgタグ
imgタグで画像を表示でき、srcで場所、altで代替テキストを指定して「伝わる画像」にできます。
beginnerimgsrcalt10. src と alt(画像パス・代替テキスト)
srcで「画像の場所」を正しく指し、altで「画像の意味」を言葉で渡すと、表示・SEO・アクセシビリティが揃います。
beginnerimgsrcalt11. リスト:ul/ol/li(箇条書きの基本)
ul(順不同)とol(順序あり)でリストの骨組みを作り、項目は必ずliで書けるようになります。
beginnerlistulol12. nav とメニュー構造(nav + ul/li + a)
navの中にul > li > aでメニューを組むと、「ここがナビだ」と機械にも人にも伝わるメニューが作れます。
beginnernavmenuul13. div と span(箱とインライン)
divでブロックのまとまり、spanで文章の一部(インライン)を包む。意味を持たない要素だからこそ使い分けが大事。
beginnerhtmldivspan14. class(CSS/JSの接点と命名のコツ)
classはCSS/JSの“目印”。複数要素へ再利用でき、命名を役割寄りにすると壊れにくく保守しやすい。
beginnerhtmlclasscss15. id(唯一性とページ内リンク)
idはページ内で原則ユニーク。#でのジャンプやlabelとinputの紐付けなど、1点ものに効く属性。
beginnerhtmlidanchor16. セマンティックHTML(header/main/section/article/footer)
divより意味のある要素で組むと、構造が伝わりやすくなり保守・SEO・アクセシビリティが強くなる。
beginnerhtmlsemanticheader17. button(aとの使い分け・押す操作)
ページ移動はa、その場の操作はbutton。意味で使い分けると意図どおりに動いてアクセシビリティも崩れない。
beginnerhtmlbuttona18. 画像リンク/カードリンク(aの中に入れられる要素)
aの中に画像や見出し・説明文を入れてカード全体をリンク化。押しやすいUIを、入れ子リンクNGなどのルール込みで身につける。
beginnerhtmlalink19. テーブル入門(table/thead/tbody/tr/th/td)
行×列のデータはtableで正しく表現。thead/tbody、th/td、caption、scope、スマホ横スクロールまで一気に押さえる。
beginnerhtmltablethead20. フォーム入門(formの役割)
formは入力をまとめて送る箱。action/method/name、button type、GET/POSTの使い分けまで最短で理解する。
beginnerhtmlformaction21. label(アクセシビリティと紐付け)
labelで入力に名前を付けて紐付ける。for/id、包む方式、checkbox/radio、required、aria-describedbyまで。
beginnerhtmlformlabel22. input基本(type=text/email/password)
inputのtypeを正しく選ぶと、入力補助(キーボード)と簡易バリデーションが効いてフォーム品質が上がる。required / name / autocomplete もセットで習得。
beginnerhtmlforminput23. inputの種類(checkbox / radio)
複数選べるcheckbox、1つだけ選ぶradio。name/value/labelの関係を理解して“自然に送れる”選択UIを作る。
beginnerhtmlforminput24. textarea(複数行入力)
長文・複数行入力はtextarea。終了タグ/初期値の書き方/name・rows・labelを押さえて“自然に送れる”フォームにする。
beginnerhtmlformtextarea25. select / option(選択UI)
候補が決まっている選択はselect。nameとvalueの関係/未選択防止の定番パターン/optgroupやdisabledも押さえて誤送信を減らす。
beginnerhtmlformselect26. name / value / required / placeholder(フォームで重要)
フォームが“ちゃんと送れる”かはname(送信キー)とvalue(送る値)とrequired(必須)で決まる。placeholderは例で、ラベルの代わりにはならない。
beginnerhtmlformname27. data-*属性(JS用データの渡し方)
data-*でHTMLに“JSが読むための値”を持たせる。datasetで読める(ハイフンはキャメル化)/型は基本文字列/機密を入れない/ariaと役割分担。
beginnerhtmldata-attributesdataset28. script(読み込み位置 / defer / type=moduleの触り)
scriptはJSの読み込みタグ。基本はhead + deferでDOM未読み込み事故を減らす。asyncは順番が崩れやすく用途限定。type=moduleはimport/exportが使えて実行タイミングもdefer寄り。
beginnerhtmlscriptdefer29. link(CSS読み込みとパス)
<link rel="stylesheet" href="...">でCSSを読み込む。headに置く/詰まりやすいのはhrefのパス/404はNetworkで確認。外部CSSでHTMLと見た目を分離して管理する。
beginnerhtmllinkstylesheet30. よくあるHTMLのNG集(入れ子/閉じ忘れ/構造崩れ総まとめ)
崩れの原因はだいたい「閉じ忘れ/入れ子NG/意味の取り違え/id重複/フォームのname不足」。典型NGを潰すだけでクリック・送信・レイアウトが一気に安定する。
beginnerhtmldebugnesting