HTML・CSS
記述ミス 優先度の影響 構造が違う→例 クラス名なら「.」は付いてるかなど キャッシュが残ってる
１HTML構造作成 ・thタグ→表の中の項目名・tdタグ→内容 サイト作成の流れ・HTMLで構造を組む→CSS作成 サイト構造・ヘッダー・トップバナー・セクション・フッダー ２問い合わせフォーム作成＆CSS作成 ・placeholder属性→フォームの中に文字を表示させる・lin…
ボックスの配置を指定する時に使うコード・position・float position ・４種類の指定方法・static→デフォルトの状態・absolute→ボックス全体が移動する、指定したボックスは上に重なる・relative→元の要素のボックス領域は残ったまま指定したボックスが移動…
スタイルシートで指定できる単位には２種類ある ・大きさ ・色 大きさの指定 ・px→「解像度」によって大きさが変わる ・%→「親要素」によって大きさが変わる ・親要素とは、自分の要素を含んでいる直近の要素→pタグの中のaタグなら、pタグが親要素→親要素（p…
・ボックスの周囲の境界（余白）を指定する ・「margin」と「padding」を使うことで、境界を広げることができる ・margin→ボックスの外側の境界を指定する ・padding→ボックスの内側の境界を指定する ・インライン要素は上下の余白を指定できない ・インライ…
・ホームページ→各タグ（要素）で囲まれたもの ・内部はブロック（ボックス）で囲まれている ・ブロックには２つの種類がある ・スタイルがズレる場合、「ブロック要素」と「インライン要素」をチェックする ブロックレベル要素 ・横幅全て適用 ・例：p <h1>~<h6> <ul> <table> <div></div></table></ul></h6></h1>…
スタイルには優先順位がある 指定したスタイルと違うスタイルが適用されている場合、スタイルの優先度をチェックする 要素の特定が高いほど（絞りこまれてるほど）優先度が高くなる １番：「!important」→p{color:red; !important} ２番：<p style="color:red;"></p> → タグの中に直接…
htmlファイル —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title><link rel="stylesheet"type="text/css"href="style.css"></head><body><h1 id="title">ホームページの見出し</h1><p class="bg-color1">これは段落です</p><h2 class="bg-color1">これは２番目の見出しです。</h2><p>これは２番目の段落です。</h2>
htmlファイル —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title><link rel="stylesheet"type="text/css"href="style.css"</head><body><h1>ホームページの見出し</h1><p>青い文字になるよ</p><p>ここも青い文字になるよ</p></body></html> —————————————————————— titleタグの直下に「
・CSSとは、指定したファイル内の文章の「見た目」を変える言語（コード）のこと ・CSSを使わないと、文章がただの文字の羅列で見づらくなる ・CSSを使う時は、HTMLファイルと分ける ・CSSファイル１つで、全てのファイルの文章を装飾できる ・CSSファイルを…
htmlファイル —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p> <form>E-mail<br><input type="text" name="email"><br>Password<br><input type="text" name="pass"><br><input type="submit"name="submit"> <…</form></body></html>
—————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p> <ul><li>1つ目</li><li>2つ目</li></ul> </body></html> —————————————————————— 「ul」「li」タグを使う liタグ１つで１リスト分作る リストはホームページのメニューでよく使われる
—————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p> <table border="1"><tr><td>エコノミーコース</td><td>200円</td></tr><tr><td>スタンダードコース</td><td>800円</td></tr></table> <table border="1"><tr><td>エコノミーコース</td></tr></table></body></html>
htmlファイル名「index.html」 —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し1</h1><p>1ページ目です。</p><a href="sample.html">次のページへ</a></body></html> —————————————————————— htmlファイル名「sample.html」 —————————————————————— <…
htlmファイル —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p><img src="sample.jpg"alt="花の写真"></body></html> —————————————————————— 解説 ・画像を表示させるコード → <img src="ファイル名"alt="名前"> ・「img 」→画像を指す ・「””」→ パ…
htmlファイル —————————————————————— <html><head><meta charset="utf-8"><title>ホームページのタイトル</title></head><body><h1>ホームページの見出し</h1><p>最初のホームページが完成しました！！</p></body></html> —————————————————————— 解説 —————————————————————— → HTML形式で書くことをコンピューターに伝えている<html> ———ブラウザのタイトルに</html>…
・「HyperText Markup Language」の略 ・ホームページを作成するために開発された言語 ・文章に目印をつける→例 「見出し」「小見出し」「内容」 ・目印をつけるからMarkup（マークアップ）言語と呼ばれる ・文章に目印として付ける記号を「HTMLタグ」という
