全般メモ
- 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は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とかがまさにそれ。
実行方法
- HTMLのscriptタグに直接記載する。ブラウザの開発コンソールから確認する。
scriptタグはheadタグもしくはbodyタグのどこに書いても良いが,一般的にはbodyタグの最後に書かれる。
- 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の書き方は辞書データ(JSON)をそのまま書くような書式。
- "p {font-size: 12px;}"のような形式であり,"p"をセレクタ,font-sizeをプロパティ,14pxを値と呼ぶ。
- セレクタにタグを指定するとタグ全体に,クラスを指定するとクラス全体に適用される。タグとクラスを組合せる(p.hoge=pタグのhogeクラス)ことも可能。また,要素毎に指定するには,idによって指定することも可能。クラスは"ドット"で指定,idは”#”で指定する。
- レイアウトはfloatで横に並べて,それを縦に並べて,という感じ。Tkで言うところの,packでやるようなイメージ。グリッド配置は無いようだ。
- コメントはCの/.../形式。(//は駄目。)
p {font-size: 12px;}
.header-a {font-size: 12px;}
#hoge {font-size: 10px;}
プロパティ |
意味 |
例,備考 |
font-size |
フォントサイズ |
12px |
color |
色 |
red |
background-color |
背景色 |
white or #FFFFFF |
border-[bottom/top/left/right] |
境界線 |
solid 5px #FF00FF |
padding |
余白 |
2px 3px (上下,左右) |
テンプレート
// HTML5を指定
<html>
<head> // ヘッド部分=ページの設定情報
<meta charset="utf-8"> // 文字コード
<title>PageTitle</title> // ページタイトル
<link rel="stylesheet" href="stylesheet.css"> // CSSファイルの指定
</head>
<body> // ボディ部分=ブラウザに表示される部分
xxx
</body>
</html>