Lecture Notes

HTMLとCSSの基礎知識

事前にインストールするアプリケーション

HTML

DOCTYPE宣言

DOCTYPEは文書がHTMLであり次にはじまるHTML文書がどのバージョンを利用して、文書型定義に従って記述されているかをブラウザに伝えるためのものです。

HTML5のDOCTYPE宣言

 

基本的なタグ

<タグ名>を「開始タグ」、</タグ名>を「終了タグ」と呼び、開始タグと終了タグの間に内容を入れます。

使用例:<タグ名>内容がここに入ります</タグ名>

Memo特殊なタグには、終了タグが無いものもあります。

Webサイトの文章構造

Webサイトの基本的な文章構造は下記の通りです。

<!DOCTYPE html> 一行目。先ほど記載した通り、XHtML文書型定義の宣言
<html>〜</html> HTML文章であることを宣言しているタグ
<head>〜</head> ページの基本情報を入れるタグ
<title>〜</title> ページのタイトルを指定
<body>〜</body> ブラウザに表示される内容を入れるタグ

MemoHTML文章にはコメントを入れることができます。『<!––』と『––>』で囲んだ範囲がコメントとして扱われます。

 

body内の基本タグ

一番基本的なタグです。

<h1>〜</h1> 文章や段落の見出しを付ける時に使用するタグ。一番大きな<h1>は大見出しと呼ばれます。h1タグは基本的に1ページで一回の使用で抑え、数字の順序をしっかり守ります。
 <h2>〜</h2> 二番目に大きな見出しを付ける時に使用するタグ
<h3>〜</h3> 三番目に大きな見出しを付ける時に使用するタグ
<h4>〜</h4> 四番目に大きな見出しを付ける時に使用するタグ
<h5>〜</h5> 五番目に大きな見出しを付ける時に使用するタグ
<h6>〜</h6> 六番目に大きな見出しを付ける時に使用するタグ
<p>〜</p>  ひとつの段落(パラグラフ)であることを表すタグ

 

その他にも、文章の構造を表すタグとしては

<section>〜</section> 一つの節(セクション)であることを示すタグ
<hgroup>〜</hgroup> セクションの見出しを表す、見出しをまとめるタグ
<article>〜</article> 一つの記事であることを示すタグ
<aside>〜</aside> 余談・補足情報のセクションであることを示すタグ
<nav>〜</nav> ナビゲーションであることを示すタグ
<header>〜</header>  ヘッダであることを示すタグ
<footer>〜</footer> フッタであることを示すタグ
<address>〜</address> 連絡先・問合せ先を表すタグ

 

また、コンテンツの分類を表すタグとして、下記のタグなどがあります。

<hr>〜</hr> テーマや話題の区切りを表すタグ
<blockquote>〜</blockquote> 引用・転載セクションであることを表すタグ
<ol>〜</ol> 順序のあるリストを表示するタグ
<ul>〜</ul> 順序のないリストを表示するタグ
<li>〜<li> リストの項目を記述するタグ
<figure>〜</figure> 図表であることを示すタグ
</figcaption)〜</figcaption> 図表のキャプションを示すタグ
<div>〜</div> ひとかたまりの範囲として定義するタグ
<main>〜</main> メインコンテンツであることを示すタグ

 

コンテンツを埋め込む時に使用するタグは下記などがあります。

<img> 画像を表示するタグ
<video> 動画を再生するタグ
<audio> 音声を再生するタグ
<iframe>〜</iframe> インラインフレームを作るタグ

例えば画像を表示させたい場合は下記ように、src属性で画像ファイルのURLを指定し、alt属性で代替テキスト(画像が利用できない環境向けのテキストを指定)を行います。

 

スタイルシートの場所を指定する

通常はWebサイトのコンテンツの見た目は、外部スタイルシートを使用するのが一般的です。HTMLの見た目を外部スタイルシートでコントロールするために<link>タグを使用してスタイルシートの指定を行います。

必須な属性は、rel属性で値をstylesheetとしてスタイルシートのリンクタイプを指定します。href属性で読み込むスタイルシートファイルを指定します。任意属性は、type属性でリンク先のCSSのMIMEタイプを指定します。

CSS

CSSの書き方で基本的なのは、セレクタ {プロパティ:値;}です。
セレクタとはスタイルを適用する値のことで、プロパティはどんなスタイルを適用するかの指定です。はスタイルの設定値になります。

例えば、下記の場合は、セレクタ「p要素の」、プロパティ「マージンを」、値「15px」設定するということです。

 

CSS記述の注意点

  • 半角小文字で記述すること。
  • 半角スペースやタブ、改行はスタイルには影響しないので、見やすいように活用しましょう。

MemoCSSにコメントを入れる場合は、『/*』と『*/』の間に書きます。

 

CSSのセレクタの使い方

『*』アスタリスク

アスタリスク(*)ですべての要素にスタイルを適用することができます。

『.』ピリオド

クラス名を指定した要素にスタイルが適用されます。

『#』シャープ

基本的には先ほどのクラスと一緒です。ただidの場合は1つの要素にしか適用されません。

半角スペース

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

『>』大なり

セレクタを『>』で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

『+』プラス

『+』で隣接している要素にスタイルを適用することができます。

『~』ダッシュ

『~』である要素の後にある要素にスタイルを適用することができます。

 

CSSプロパティ

CSSプロパティは沢山あるので、一般的な頻度の高いものを載せておきます。

文字色・背景色
color 文字色(前景色)を指定する
Webセーフカラー216色
http://www.htmq.com/color/websafe216.shtml
background-color 背景色を指定する
background-image 背景画像を指定する
GIF、JPEG、PNG画像
例 <link rel=”stylesheet” href=”sample.css” type=”text/css”>
フォント・テキスト
font-family フォントの種類を指定する
「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( ” )またはシングルクォーテーション( ‘ )で囲むようします。
sans-serif …… ゴシック系のフォント
serif …… 明朝系のフォント
cursive …… 筆記体・草書体のフォント
fantasy …… 装飾的なフォント
monospace …… 等幅フォント
font-weight フォントの太さを指定する
100、200、300、400、500、600、700、800、900でフォントの太さを指定か、normal、boldのように指定します。
font-size フォントのサイズを指定する
数値で指定する場合は数値にpxやemやexなどの単位をつけて指定します。%値で指定することも可能です。
line-height 行の高さを指定する
数値で指定する場合は数値にpxやemやexなどの単位をつけて指定します。%値で指定することも可能です。
また、単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。
text-align 行揃えの位置・均等割付を指定する
left…左揃え
right…右揃え
center…中央揃え
justify…均等配置
text-indent 一行目のインデント幅を指定する
行の高さを指定する
数値で指定する場合は数値にpxやemやexなどの単位をつけて指定します。%値で指定することも可能です。
幅・高さ
width 幅を指定する
auto(自動設定)や数値やパーセントで指定します
height 高さを指定する
auto(自動設定)や数値やパーセントで指定します
マージン・パティング
margin マージン(領域間のスペース)に関する指定をまとめて行う
値を1つ指定した場合は、指定した値が上下左右のマージンになります
値を2つ指定した場合は、記述した順に上下・左右のマージンになります
値を3つ指定した場合は、記述した順に上・左右・下のマージンになります
値を4つ指定した場合は、記述した順に上・右・下・左のマージンになります
margin-top 上マージンを指定する
margin-bottom 下マージンを指定する
margin-left 左マージンを指定する
margin-right 右マージンを指定する
padding パディング(領域内のスペース)に関する指定をまとめて行う
値を1つ指定した場合は、指定した値が上下左右のマージンになります
値を2つ指定した場合は、記述した順に上下・左右のマージンになります
値を3つ指定した場合は、記述した順に上・左右・下のマージンになります
値を4つ指定した場合は、記述した順に上・右・下・左のマージンになります
padding-top 上パティングを指定する
padding-bottom 下パティングを指定する
padding-left 左パティングを指定する
padding-right 右パティングを指定する

Bookmark
その他、HTMLタグやCSS属性の指定は参考サイトを載せておきます。

Pocket
LINEで送る

Return Top