html, css, JavaScriptの基礎

Last-modified: 2024-01-02 (火) 22:23:56


マークアップ

  • タグで囲むことをマークアップと呼ぶ
  • HTMLはプログラミング言語ではなく、マークアップ言語
  • CSSとJavaScriptはプログラミング言語

タグの概要と代表的なタグ_em, h1, a, p

  • HTMLは基本的に以下のような型をとる 
    <タグ名>内容</タグ名>
  • また、「<タグ名>」を開始タグ、「</タグ名>」を終了タグと呼ぶ
    • em：強調(イタリック文字になる)
    • h1(からh6まで)：見出し(数字が小さいほうが大きい見出しになる)
    • a：リンク
    • p：段落

HTMLレンダリングエンジン

  • HTMLを理解して描写する機能のことを「HTMLレンダリングエンジン」と呼ぶ
  • 代表的なHTMLレンダリングエンジンを備えたアプリケーション:InternetExplorer(IE) , GoogleChrome , Safari , メールクライアント
  • HTMLレンダリングエンジンがどのようにHTMLファイルを描写するかはアプリによって異なる→ブラウザによって表示に差が出る原因

改行させるには_p, br

  • HTMLファイル内に記述された「改行」や「連続する空白(半角スペース)」は、すべて「半角スペース」として描写されるため、改行するためには、段落タグで囲んだり、改行タグを挟む必要がある
  • 原則として、段落内で改行したい場合に<br>タグ(改行タグ)を用いる
  • <br>は「空要素」と呼ばれ、要素内容を持たないため、終了タグを必要としない
    • ただし、<br/>のように「空要素」であることを記述しなければならないフレームワークも存在する

入れ子構造

  • HTMLでは基本的に「入れ子構造(タグの階層化、h1の下にh2を入れるなど)」が許可されているが、一部のタグは入れ子が制限されている

ページ内リンク_<a href>

  • ページ内リンクを貼る場合は、「<a href = "URL">文字列</a>」という形式をとる(アンカーエイチレフ、と読む)
    • 「a」が要素名、「href」が属性名

要素と属性

  • 開始タグと終了タグを含む間の文字列を「要素」と呼び、要素に対して情報を追加するものを「属性」と呼ぶ

画像を表示する_img

  • 画像を表示する場合は、「<img src="URL">」と記述する(イメージソースと読む)
  • imgタグは画像を表示する「空要素」なので終了タグを必要とせず、また、src属性(どの画像を表示するのか)の記述が必須となる

DOCTYPE宣言_<!DOCTYPE html>

  • このファイルがHTML(正確にはHTML5)で記述されたものであることを伝える
  • タグではない
  • 「DOCTYPE」は大文字でも小文字でもどちらでも良いが、「html」は小文字でなければならない

本文を記述する前の準備_html, head, body

  • html:文書全体を囲むタグ
  • head:文書に関する情報を記述する部分を表すタグで、title要素(titleタグ)の記述などが代表的
  • body:文書本文を記述する部分を表すタグ

文字コードの宣言_<meta charset>

  • 誤動作を防ぐため、head内で文字コードを宣言するのが望ましい
  • meta要素(空要素)のcharset属性に文字コードを記述する(メタキャラセット、と読む)
  • 基本的に指定する文字コードは「UTF-8」で、記述する際は「utf-8」と小文字にする
  • title要素よりも先に記述することで、タイトルが文字化けすることを防げる

style属性について_background-color, color, border, padding, font

  • 背景色などの見た目を装飾する場合は、要素に対してstyle属性を使用する
  • style属性はすべてのタグに追加することができる
    • background-color:blue; → 背景色を青にする
    • color:white; → 文字色を白にする
    • border: solid 1px black; → 黒色の枠線をつける
    • padding-left:10px; → 左端の余白を10pxとる
    • font-weight:bold; → 文字を太字にする
    • font-style:nomal; → フォントスタイルを通常に戻す(イタリック → italic)
  • backgroundは背景に関する複数の設定を含むため、背景の色を変えたいのであれば「background-color:」と記述するのが良い
  • style属性に複数の定義を行なう場合は、 
    <h1 style = "background-color:blue; color:white; padding-left:10px;">
    • 「;」で各定義を区切る
  • 末尾の「;」は不要だが、慣習的に記述することが多い

スタイルを見易く分離_セレクタとプロパティ

  • styleが複数あって見易くない場合、styleを分離して記述することができる
  • head内にセレクタを記述することで、その文書におけるすべての要素を変更することができる

idセレクタ

  • 「id」それ自体は、属性のひとつ
  • すべての要素を変更したいのではなく、一部の要素を変更したい場合に用いる符号のようなもの
  • 「#id名{ }」のように記述することでセレクタとして成立し、名前が一致したidにプロパティを適用する
  • 指定先には属性としてidを記述する 
    <em id= "example">
  • 重複しない

classセレクタ

  • idは重複しないため、複数の要素に同じスタイルを適用することはできない→class属性を用いる
  • 指定先には、属性として記述する 
    <p class="class01">
  • 空白(半角スペース)で区切ることによって、ひとつの要素に対して複数のclassを指定することも可能 
    <p class="class01 class02">
  • 「.class名」のように記述することでセレクタとして成立し、名前が一致したclassにプロパティを適用する
  • 指定先には属性としてclassを記述する(例:<em class= "css">)
  • 重複できる

型セレクタ(要素セレクタ)

  • タグ名で要素を指定する 
    h1 {
 background-color: blue;
 color: white;
 padding-left: 10px;
}
  • 上記の例の場合、「h1」が「型セレクタ」、「{ }」の中身が「プロパティ」になる
    • なお、これらセレクタはhead内に記述する

インラインスタイル 

<h1 style = "なにかしらのプロパティ">

のように記述することを、インラインスタイルと呼ぶ

styleのファイルを分離する_CSSファイルを読み込む

  • <link>タグを用いてhrefでファイルを指定し、relで形式をstylesheetに固定する
  • 複数のページに同じcssを適用したいときに便利 
    <link href="style.css" rel="stylesheet">

Bootstrapの利用

  • 外部のcssファイルを読み込む手順と同じだが、リンク先は単純なcssファイルではなくURLを模した(ブラウザ上にある)cssファイルになる
  • Bootstrapなどの公開ライブラリをホストしているサイトのことを「CDN」と呼び、CDNにて公開されているライブラリは誰でも自由に、かつ直接参照することが可能

イベント_JavaScript_button, onclick, alert

  • buttonタグがクリックされたときなどに、「イベントを発生させる」のは「JavaScript」の役目
    • JavaScriptはフロントエンド言語であり、Javaはサーバーサイド言語なので、両者はまったくの別物 
      <button onclick="alert('文字列')">

scriptを分離して記述する_function

  • functionを用いることで、<script>要素内にJavaScriptの処理をまとめて記載することができる 
    「function doClick(){ alert("文字列")}」
  • 呼びだすときは、属性値として上記のscriptを指定する 
    「button onclick="doClick()"」

スクリプトだけで完結させる方法_イベントに関数を関連付ける 

document.getElementById("button1").addEventListener("click", doClick);
...
<button id="button1">ボタン</button>


scriptのファイルを分離する_外部からscriptを読み込む

外部からscriptを読み込むことも可能

<script src="URL.js"></script>

jQueryの利用

  • BootStrapのJavaScript版

Tips

  • 昔の拡張子は三文字だったため、「.html」という拡張子のほかに「.htm」という拡張子が使われている場合もある
  • HTMLにおける属性名は大文字と小文字を区別しない