HTML/CSSのメモ

全般メモ

  • xxx 全体を要素と呼び,"html"をタグと呼び,タグで囲まれる部分をタグボディと呼ぶ。タグには,xxxのように,属性を適時与えることが出来る。
  • HTMLのコメントは\。CSSのコメントはC言語と同じで/ hogehoge /。
  • CSSとHTMLの役割分担はHTMLが部品を列挙して,そのレイアウトや色,大きさをCSSで設定する,というイメージ。
  • CSSで要素に装飾を施す場合に,各要素はclassにより名前を独自に付与することが出来る。
  • HTMLのレイアウトは基本的に上から順番に構成されていく。横に並べたい時はfloatで横レイアウトをいじる。
  • 画像を挿入する場合に,全てをfigure>指定する必要は無い。キャプションを付けたい場合や,本文から参照したい場合にfigureで指定する。画像=img,図=figureという感じなのかな。

用語

HTMLの基本用語

  • タグとか属性とかどれがどれか普段書かないので忘れる。
<a href="index.html">Hoge</a>を例に。
用語 意味
タグ a
属性 href
コンテンツ Hoge
要素 全体

DOM:Document Object Model

  • DOMはJavascriptでHTMLの要素を操作する仕組みであり,HTMLやXMLをJSから操作するAPIと考えるとわかりやすい。
  • HTMLなどのドキュメントをツリーとして扱う。
  • document.getElementById('hogehoge');などがDOM操作の例。
  • XpathはDOMの上にある,より高位なラッパー。複雑な条件による要素の抽出が,より容易に書けるようになっている。
  • 最近は仮想DOMというのも出てきている。

jQuery(write less do more)

  • 当時(2006年)の課題は,ブラウザ間の非互換性,Javascriptの低レベル性があった。
  • jQueryはブラウザ間のDOM(API)の差を吸収し,アニメーションや非同期処理(deferred)など,より高位な機能を提供した。
  • 最近はサーバ主体からクライアントサイド(ブラウザ)に処理が移行しており,HTML5, CSS3, JS自体の進化もありjQueryで実現していたことがブラウザ側で処理されつつある。それら,クライアントサイドの開発を支援するものが,Angular, React, Vueなど。
  • 2018年時点では,jQueryは古くて使うべきではないとされ,Reactなどのフレームワークを使うべし,という風潮があるみたい。Web系はライブラリやツールの栄枯盛衰が速いなー。

SPA (Single Page Application)

  • 単一ページで閉じたアプリケーション。ページ遷移による表示コンテンツの一切替えではなく, HTMLの一部を切り替えて表示コンテンツを切り替える。GoogleMapとかがまさにそれ。

Ajax

実行方法

  1. HTMLのscriptタグに直接記載する。ブラウザの開発コンソールから確認する。 scriptタグはheadタグもしくはbodyタグのどこに書いても良いが,一般的にはbodyタグの最後に書かれる。
  2. javascriptファイル(script.js)を別途用意しておいて,index.htmlにscript.jsを読み込ませる。

いずれの場合においても,HTMLの上にあるscriptタグから順に実行される。

HTML主要タグ

タグ 意味 属性・備考
h ヘッダ
p パラグラフ
a リンク href
img 画像 src
li リスト
ul アンオーダードリスト
ol オーダードリスト
div 意味は無い spanと違い前後に改行が入り,幅・高さを指定可能。
span 意味はない divと違い前後に改行が入らず,大きさは文字で決まる。
br 改行(break) 終了タグが不要

CSSの書き方

  • CSSの書き方は辞書データ(JSON)をそのまま書くような書式。
  • "p {font-size: 12px;}"のような形式であり,"p"をセレクタ,font-sizeをプロパティ,14pxを値と呼ぶ。
  • セレクタにタグを指定するとタグ全体に,クラスを指定するとクラス全体に適用される。タグとクラスを組合せる(p.hoge=pタグのhogeクラス)ことも可能。また,要素毎に指定するには,idによって指定することも可能。クラスは"ドット"で指定,idは”#”で指定する。
  • レイアウトはfloatで横に並べて,それを縦に並べて,という感じ。Tkで言うところの,packでやるようなイメージ。グリッド配置は無いようだ。
  • コメントはCの/.../形式。(//は駄目。)
p {font-size: 12px;}  /* 全てのpタグの,フォントサイズを12ピクセルに指定。*/
.header-a {font-size: 12px;}  /* クラスで指定は.で始める。/
h2.header-b {font-size: 14px;}  /* タグとクラスで指定。*/
#hoge {font-size: 10px;} /* idで指定は#で始める*/

CSSプロパティ

プロパティ 意味 例,備考
font-size フォントサイズ 12px
color red
background-color 背景色 white or #FFFFFF
border-[bottom/top/left/right] 境界線 solid 5px #FF00FF
padding 余白 2px 3px (上下,左右)

テンプレート

<!DOCTYPE html>  // HTML5を指定
<html>
    <head> // ヘッド部分=ページの設定情報
        <meta charset="utf-8">  // 文字コード
        <title>PageTitle</title> // ページタイトル
        <link rel="stylesheet" href="stylesheet.css">  // CSSファイルの指定
    </head>

    <body> // ボディ部分=ブラウザに表示される部分
    xxx
    </body>
</html>