Videos · 動画
Web Basics — HTML & CSS · Web基礎 — HTML & CSS
Pick a topic to watch. · 視聴したいトピックを選んでください。
21 video lessons · 21 ビデオレッスン
2:20
最初のWebページ
あなたが開いてきたすべてのページは、誰かがタイプしたファイルです。描画でも、アプリでのデザインでもなく、タイピングであり、次の5分以内にあなたも1つ作ることができます。Webページ…
2:28
見出し
同じ大きさの段落が並んだページは「文字の壁」となり、読者はそこに留まりません。見出しは、読者が目的の部分を見つけるための道標です。見出しとは…
2:07
太字、斜体、改行
これまでタグはブロック全体を囲んでいました：この行は段落、あの行見出しです。ここ一个新的東西——単なる1つの単語だけを囲むタグです。
2:17
リスト
3つの項目を別々の段落で書くと、ブラウザはそれらが関連していることを知りません。「リスト」と言えば、それは行います。リストには2種類のタグが必要で、それが…である
2:31
リンク
これまで書いた要素はすべて1ページの内に留まります。あるタグを使うことで、それはウェブの一部になります。リンクタグはa（アンカーの略）で、…への接続を提供します。
2:25
画像
タグはブラウザに「それが何か」を伝えます。このタグは「どこに行って取得するか」を伝える必要があり、新しい情報の形式が必要です。画像を…表示するには
2:18
本物のウェブサイト
これまで、あなたはページの断片を書きました。本物のページは、それらをフレームに収めます。世界中のほとんどのサイトで使われるのは同一のフレームなので、それについて…知る価値があります。
2:29
コメントとネスト
これまで、すべてのタグは直前に置かれた隣接関係でした。実際のページではタグを他のタグの内部に配置し、その瞬間から順序が重要になります。コメントとは、あなたが…するメモです。
2:17
テーブル
これは学生が最も間違えやすいタグで、必ず同じ理由で間違えます：順序を読んでいないため推測してしまいます。テーブルには3つのタグをネストして…必要です。
2:08
形態
これまで作成した要素はすべて読まれる内容です。フォームは異なります：これは訪問者が操作するものです。type=
2:19
セクションとクラス
小さなページなら1つのタグの積み重ねでも問題ありません。大きい場合はそうではありません：訪問者はタイトル、コンテンツ、下部の注釈を見ますが、あなたのHTMLが単なる…であれば
2:21
最初のCSS
コースの途中、第二言語が現れます。HTMLは各ものが何であるかを言います—これは段落で、あれは見出しです。CSSはそれがどのように見えるかを言います—これ…
2:18
セレクター
先回のImplemented、セレクターはタグ名で、ページ上のすべての段落を変更しました。それは時に多すぎます。そこで、さらに2つあります。ドットを含む名前で…を書く
2:19
色
ページが宿題っぽくなくなるのが色の領域です。一方で初心者が12個の色を選んでしまうと、ページが崩壊します。simplestな書き方は…
2:16
テキストのスタイリング
Implemented2でブラウザが自動で見出しサイズを選びました。今はfont-sizeでピクセル単位で自分で選択できます。40ピクセルで…という見出し
2:27
ボックスモデル
2つの要素が意図した位置に配置できず、どんな入力をしても直りません。ほぼすべての場合、これが理由です。CSSはすべての要素を箱として扱い、…
2:17
マージン
マージンとはボックスの外側にある余白であり、ここで重要な点があります：周囲に何もないボックスの場合、マージンは目に見える任何东西を変化させません。2つのボックスを…置く場合
2:16
表現
三番目の授業からこの名前のないものを観てきました。ある要素は自分専用の一行を取り、ページ全体に広がります：div、a…
2:09
幅と中央揃え
気づいていなかったかもしれません：ブロック要素は既にページの幅いっぱいです。常にそうでしたが、ボーダーなしでは端が見えません。
1:58
Flexbox
これまで作成した要素はすべて下方向に積み重ねられます。ブロック要素就是这样设计的。しかし、ナビゲーションバー、カードの列、ツールバーなどは…配置する必要があります。
2:19
プロフィールカード
先回のImplemented、そして今回は新しいアイデアではなくプロジェクトです。プロフィールカードを作成しています：上部に画像、選んだ色で名前、そして1行の…テキスト。