HTMLとCSSはコンビです。

2020年4月28日 20:05

・HTML　　　 HyperText Markup Language
　　　　　　　ウェブサイトに表示される情報を記載するもの。
　　　　　　　ファイル名は　〇〇.html　になります。
・CSS　　　 Cascading Style Sheets
　　　　　　　HTMLに記載された情報を装飾するもの。
　　　　　　　ファイル名は　〇〇.css　になります。
・タグ　　　　HTMLにおける要素のかたまりを示す。
　　　　　　　開始タグと終了タグで括る。
　　　　　　　上下でも左右でも括れるが、上下の場合は高さを揃える。
　　　　　　　どのタグで括られるかでタグの中身の役割が変わる。

基本的な記述を解説します。
ファイル名　sample.html

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTMLとCSSはコンビです</title>
   <link rel="stylesheet" href="〇〇.css">
 </head>
 <body>　
   <h1>
     ここは見出しです。
   </h1>
   <p>
     一段目です
   </p>
   <p>
     二段目です
   </p>
   <p>
     三段目です。<b>この部分は太字になります。</b>
   </p>
 </body>
</html>

・<!DOCTYPE HTML>
HTML文章であることを宣言する要素です。閉じタグはありません。
必ず記載する程度の認識で。

・<html></html>
HTML文章の始まりと終わりを示します。

・<head></head>
ウェブサイトの情報や、参照CSSファイルを記載する部分になります。
ここに記述した情報は画面上には表示されません。

・<meta>
文章に関する情報を指定する時に使用します。閉じタグはありません。charset="UTF-8"は文字コードを指定するもので、文字化けを防ぎます。

・<title></title>
タイトルを記述する場所。ウェブサイトの画面上には表示されません。Googleでの検索結果や、ブラウザのタブに表示されます。

・<link rel="stylesheet" href="〇〇.css">
対応するCSSファイルを指定します。
hrefには実際のファイル名を記載します。
relは「relation（関係）」の略。

・<body></body>
HTML文章の始まりと終わりを示します

・<h1></h1>　見出しと判断されて文字が太く大きく表示されます。
　　　　　　　　 h6まであり数字をあげるごとに見出しが小さくなる。

・<p></p>　　　文章の段落を表します。

・<b></b>　　　囲まれている部分だけ太字になります。

・ブロックレベル要素
ウェブデザインにおける箱となる要素の事をいいます。
<h1></h1>や<p></p>はブロックレベル要素です

・インライン要素
箱にはならず、主に文字の修飾などに使われる。
<b>...</b>はインライン要素です。

よく扱うタグ一覧
ブロックレベル要素
header ページのヘッダー部分を指します
footer ページのフッター部分を指します
section Webページのセクションを指します
div 　Webサイトのレイアウトを作成する際に使用します
table 　　表を作成する際に使用します
p 　　　　段落を表す時に使用します
li 　　　　リストの項目を作成する際に使用します
h1~h6 　見出しを作成する際に使用します

インライン要素
a 　　リンクを作成する際に使用します
b 　　文字を太文字にする際に使用します
img 　画像を埋め込む際に使用します
small フッターで著作権表記などの注釈を表示するために使用します
span 　文字の装飾で多く使用、div要素と同じで特定の意味を持たない

・class属性
要素をグループ分けして個別に名前を付けることができる機能です。
1つのHTMLファイルに複数存在して良い。

<h1 class="red">redと名前をつけました。</h1>

・id属性
要素に固有の名前を付ける。1つのHTMLファイルに1つ。
特に注目してもらいたい要素にid属性を使うようなイメージ。

<h1 id="first-message">first-messageという名の見出しです</h1>

タグの種類→参考サイト
HTML/CSS全般→参考サイト

この記事が気に入ったらサポートをしてみませんか？