HTML・CSS
①HPの構成（HTML構造） HTMLで構造組む⇨CSS作成 ⑴ヘッダー <header> <nav~> ⇨メニューを作る </nav> <ul~> ⇨リストを作る <li></li> </ul> </header> ⑵トップバナー （画像） ⑶セクション <section> ⇨1つのまとまりを表す（HTML5から導入） <h1></h1> ⇨タイトル <p></p> ⇨段落ごとでpタグを囲む </section> ⑷フッター <footer> Copyright<a href="~">サンプルHP</a>.All Ri</footer>…
ボックスの周囲の境界（余白）を指定 「margin」・・・ボックスの“外側”の余白指定 「padding」・・・ボックスの“内側”の余白指定 ※インライン要素は指定不可（上下余白指定できない） ＞インライン要素「imgタグ」は縦のmarginを指定できないので、cssでブ…
スタイルがズレてる場合は、「ブロックレベル要素」「インライン要素」を確認する 【ブロックレベル要素】 一行全てのボックス （例）p<h1>~<h6><ul><table><div> 【インライン要素】 文字の装飾で使用 （例）<a><img><br><span> ※インライン要素の中にブロックレベル要素は入れることができない</span></a></div></table></ul></h6></h1>
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」タグ1つで1リスト分作る ・リストはホームページの…
htmlファイル ============ <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ファイル ============ <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形式で書くことをPCに宣言している <html> ============ブラウザのタイトルに表示されるコ</html>…
・「HyperText Markup Language」の略 ・ホームページを作成するために開発された言語 ・文章に目印をつける→例 「見出し」「小見出し」「内容」 ・目印をつけるからMarkup（マークアップ）言語と呼ばれる ・文章に目印として付ける記号を「HTMLタグ」という
