by shigemk2

当面は技術的なことしか書かない

トップ > HTML

画像ファイルをアップロードするときに気をつけること

HTML

画像ファイルをアップロードするときは、
画像のサイズに気をつけること。

特にでheightとwidthを指定しているとき、
画像ファイルがそれより小さいときは、画像ファイルが
imgで指定したサイズに強制的にリサイズされる。

もしリサイズを嫌うなら、
SmillaEnlarger.appとかでリサイズしてくれたらいいと
思うよ。

インデントについて

HTML

HTMLのインデントについてだが、
個人的な信条からインデントを付けない派と、
サーバが圧縮してくれてるから別にいいや派がいる。

インデントは慣れれば慣れるほど不要になっていくらしい。
HTMLは文章を書いてマークアップしていくスタイルなので、
タグを作って、タグを閉じる。
(WordPressとかはインデントをつけると挙動がおかしくなることがある)

タグを出した瞬間に閉じタグを出せば
マークアップがずれることがない。

また、インデントつけない派は、タグと閉じタグを1行で完結させることが多い。

HTML5のヘッダと小見出し

HTML

ヘッダ部分について。
今まではこのように書いていたが、

<div id="header">
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
 </div>

HTML5はこのように書ける

<header>
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
</header>

でも、taglineクラス(小見出し)は色々な人が結構な頻度で使っているにも関わらず、
本来の見出しとくっついてしまっている。とはいえHTML5になる前まで標準的な
マークアップがなかった。

では、taglineを使わずに小見出しを出すにはどうしたらよいのか。

<header>
  <h1>My Weblog</h1>
  <h2>A lot of effort went into making this effortless.</h2>
</header>

ただ小見出しを出したいだけなのに、セクションが増えて文書構造が
変わってしまっている。

ではこうとか?

<header>
  <h1>My Weblog</h1>
  <h2>A lot of effort went into making this effortless.</h2>
</header>
<h3>Article1</h3>
<p></p>
<h3>Article2</h3>
<p></p>

あるべきでないノードが殘っている上に、本来ルートノードに属すべき子要素を
奪ってしまっている。これはすごくよくない。

というわけで、HTML5で、小見出しを使いたいときは、
hgroupという要素を使う。
hgroupは、2個またはそれ以上の関連する見出し要素をグループ化する働きがある。

<hgroup>
   <h1>My Weblog</h1>
   <h2>A lot of effort went into making this effortless.</h2>
</hgroup>

入門 HTML5

入門 HTML5

DOM

HTML

DOMとは何か

文書オブジェクトモデル(DOM)とは、
HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。
また、ページ上のHTML要素を表現するオブジェクトの集まりである。
つまり、

<p>

や

<div>

や

<span>

のひとつひとつは、DOMのなかで異なるオブジェクトとして表現される。

すべてのDOMオブジェクトには、どの要素にも共通するプロパティがいくらか存在している。
しかし、一部のオブジェクトはこれに加え他よりも多くのプロパティを持っている。

DOMを用いて、プログラマは文書を構築し、その構造をナビゲートし、
要素や内容を追加、修正、削除することができる。
HTML文書やXML文書の中で見つかるものは何でもDOMを使ってアクセスし、変更、削除、追加することができる。

入門 HTML5

入門 HTML5

ブラウザが不明な要素を取り扱う方法について

HTML
  • 不明な要素には一切特別なスタイルを適用しない
  • 明示的に要素を認識できない場合、その要素を子要素を持たない空ノードとしてDOMに挿入する

あとこんなのを書くとか。

<!--[if lt IE 9]><script src="../j/html5.js"></script><![endif]-->

入門 HTML5

入門 HTML5

セクション

HTML

HTML5の新機能。

section 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

section

要素は文書またはアプリケーションの汎用的なセクションを示す
この文脈でのセクションとは、主題ごとに纏められたコンテンツ、
通常は見出しを伴う。セクションの例としては、章、タブインターフェイスの各タブ、
論文中の番号つきセクションなどがある。webサイトのホームページでも、例えば
導入部、ニュース記事、連絡先などいくつかのセクションに分割できる。

section 要素を利用することで、ウェブ制作者はどこにでも
h1 要素を使うことができるようになる。
該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのか
どうかについて心配する必要はない。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="テストファイル (html5)" />
    <title>テストファイル(html5)</title>
  </head>
  <body>
    <article>
      <hgroup>
	<h1>Apples</h1>
	<h2>Tasty, delicious fruit!</h2>
      </hgroup>
      <p>The apple is the pomaceous fruit of the apple tree.</p>
      <section>
	<h1>Red Delicious</h1>
	<p>These bright red apples are the most common found in many
	  supermarkets.</p>
      </section>
      <section>
	<h1>Granny Smith</h1>
	<p>These juicy, green apples make a great filling for
	  apple pies.</p>
      </section>
    </article>
  </body>
</html>

注意： ウェブ制作者は、その要素のコンテンツがシンジケーションにふさわしい場合には、section 要素ではなく article 要素を使うことが推奨される。

入門 HTML5

入門 HTML5

リンクタイプ

HTML

リンクタイプは、別のページを参照する理由を説明するためである。

  • ブラウザがこの文書へ適用すべき、CSSを含むスタイルシートだから
  • このページと同じ内容を持つフィードフォーマットだから
  • このページの翻訳だから
  • このページのPDF版だから
  • このページはオンラインブックの一部で、参照先のページは次の章だから

などなど。

HTML5は、リンクによる関連付けを2つのカテゴリに分類している。

  • 外部リソースへのリンク
  • ハイパーリンクとしてのリンク(別の文書へのリンク)

rel="stylesheet"などがこれである。

で、HTML5では以下のように書く事が可能となる。
(typeは省略可能なのだ)

<link rel="stylesheet" href="style-original.css">

また、もよく使われる。

type属性えのRSSまたはAtomメディアタイプの指定を組み合わせることによって、
「フィードの自動通知(feed autodiscovery)」と呼ばれる機能が有効になる。

Google Readerみたいなフィードリーダーは、大概これを使ってサイトの
新着記事のニュースフィードを見つけている。

入門 HTML5

入門 HTML5

文字エンコーディングについて

HTML

コンピュータは文字や記号を処理しているわけではない。ビットやバイトを
処理しているのだ。
実際には特定の文字エンコーディングを使って保存されている。
文字エンコーディングにはたくさんの種類がり、特定の言語、例えば
ロシア語や中国語や英語に最適化されているものもあれば、複数の言語を
取り扱えるものもある。

文字コードを指定するときは以下のように書いていたと思われるが、

<meta http-equiv="Content-Type" content="text/html; charset="utf-8">

HTML5では以下のように書ける。

<meta charset="utf-8">

このように書くことが可能なのは、UAですでに実装されている上に、
引用符を忘れる人が多いから。

そして、すべてのHTML文書には常に文字エンコーディングを指定すべきである。
これをやらないと、いろいろまずいことが起こるから。

P39

入門 HTML5

入門 HTML5

ルート要素

HTML

HTMLはマークアップ言語なので、HTMLページは要素が入れ子になって出来ている。
ページ全体の構造は木に似ている。
「兄弟」要素とは、つまり同じ木の幹から伸びる2本の枝のことだ。
ある要素が他の要素の「子」要素であることは、
つまり大きな枝から延びる小さな枝だということだ。

子要素を持たない要素は、「リーフ」ノードと呼ばれる。
最も根源の要素、つまりページ上のすべての他の要素の先祖である
要素は、「ルート要素」と呼ばれる。
HTMLページのルート要素は常にである。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

これ自体には悪い点はないが、この部分を削ることでバイト数が多少節約出来る。

xmlnsについてだが、HTML5の全ての要素は常にこの名前空間に属するので
明示的にこの宣言を行う必要はない。

また、xml:langとlangで同じものを宣言しているが、これもXHTMLの残滓であり、
HTML5ではlangのみが意味を持つ。(xml:langを残しておいてもいいけど、
そのときはlangと同じ値にする必要がある)

というわけで、HTML5ではルート要素は以下のように書ける

<html lang="en">

入門 HTML5

入門 HTML5

DOCTYPE

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

はDTDを宣言するために、文書の先頭（タグよりも上）に記述する。
DTDはHTMLのバージョンとその仕様を宣言するわけなので、
その文書内では宣言したDTDに従ったソースの記述をしなくてはなりません。

ということで、DOCTYPEhtmlを読み込ませるための最初のおまじないだが、
DOCTYPEには長い黒魔術の歴史が這いよる。
DOCTYPEに対応していないページはエラーを起こすし、
DOCTYPEを採用していても一部のページの表示がおかしかったり
したので、ブラウザはページを表示するのにあたり
3つのモードを搭載した。

  • 後方互換(quirks) DOCTYPEのないページに対応
  • 標準(standards) 規格に沿ったページについては規格に沿って対応する
  • ほぼ標準(almost standards) 表のセルの高さ方向の調節をCSS2規格には厳密には準拠していない従来の方法で行う

でも実を言うとHTML5の標準モードのDOCTYPE宣言は、以下のように書くだけでよい。

<!DOCTYPE html>

P35

入門 HTML5

入門 HTML5