カテゴリー別アーカイブ: HTML

文字実体参照の例(コピーライトマークなど)

コピーライトマーク(©)は、機種依存文字なので、環境によっては正しく表示されない場合がある。

HTMLでその文字を使いたい場合は、文字実体参照という表記方法を使うことができる。

他にも、アンパサンド(&)や不等号(<、>)など。

よく使われる文字実体参照

表示される文字 文字実体参照
& &amp;
< &lt;
> &gt;
© &copy;

例えば、コピーライトマークの場合は「&copy;」と記述したら「©」と表示される。

何度も言うが、「こぴーらいと」と入力して変換して「©」と出てもこれは機種依存文字なのでそのまま使わないほうが良いということです。

ブラウザにキャッシュさせない設定

更新頻度の高いページなどではブラウザにデータをキャッシュされては都合が悪い。

ということで、metaタグに以下を設定してキャッシュさせないようにする。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

もちろん、実際にキャッシュをしないかどうかは、各ブラウザの解釈に依存する。

【上記タグの解説】
一行目と二行目

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

は、どちらもブラウザに対してページキャッシュを無効にする設定。
※一行目は古いブラウザのために未だ残されているコードと思っておけば良いか。

上記だけではキャッシュが無効にならない場合(なんちゅうブラウザなんだ!)、
キャッシュの有効期限を指定することでキャッシュ情報を消去させる方法が、
三行目

<meta http-equiv="expires" content="0">

さらにキャッシュの有効期限を0秒に指定している。
例えば content=”3600″ と指定すれば、一時間キャッシュすることになる。

[HTML5]セクショニング要素

※HTML5の要素の定義はこれからも変更点が出てくることがあるので注意 ( 2011/6 現在 )。

HTML5には、以下のようなセクションを表すためのセクショニング要素がある。

  • article要素
  • 内容が単体で完結するセクションであることを示す際に使用する。
    フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、コメント、その他コンテンツの独立した項目。
    【使用例】

    <article>
    <h1>ブログタイトル</h1>
    <p>ブログ記事・・・</p>
    <article>
    <h1>コメント</h1>
    <p>コメント内容・・・</p>
    </article>
    </article>
  • section要素
  • 通常はヘッダーを伴う。ヘッダーが伴わないならsection要素を使用するべきではない。
    また、section 要素を利用することで、どこにでも h1 要素を使うことができるようになる。
    article, aside, nav の方が適切な場合には section 要素は使わない。
    【使用例】

    <section>
    <h1>見出し</h1>
    <p>文章など文章など・・・</p>
    </section>
  • nav要素
  • 重要なナビゲーションブロックからなるセクションだけが、nav 要素に適している。
    サイト内リンクのリストをフッターに入れることが一般的であるが、このような場合においては、footer 要素のほうが適している。

  • aside要素
  • あまり重要でないコンテンツに使っても良い。
    例えば、サイドバーによく見るブログロール、補助的なナビゲーション、ページに関連する広告など。
    article 要素の中で使うときはその記事に関連した補助的なコンテンツとするべきである。

レストランが作るこだわりの逸品から会議弁当やピザチェーンまで、出前・宅配の総合グルメサイト『ぐるなびデリバリー』

[HTML]ブロックレベル要素とインライン要素

HTML・CSSを深く理解しようとする前に知っておきべき概念があります。
それは、HTMLのブロックレベル要素インライン要素です。
この概念を理解して頭に入れちゃえば、あとの勉強が楽チンです。
知らないよりも格段にコーディングのセオリーが身に付くと思います。

ブロックレベル要素

ブロックレベル要素とは、改行を伴う要素です。
特徴としては、親要素の内容幅全体に広がって配置されます。
つまり、基本的にはブロックレベル要素の隣に他の要素は並べることができません(通常フローの場合)。
ブロックレベル要素は横幅いっぱいの矩形(四角形)で表現されると考えると理解しやすくなります。

【ブロックレベル要素】

h1 h2 h3 h4 h5 h6 p div table dl ul ol form address blockquote fieldset hr pre

インライン要素

インライン要素は、文中の一部分に対する意味付け、書式設定などを行うものです。

【インライン要素】

a abbr acronym b bdo big cite code dfn em i kbd label q samp small span strong sub sup tt va

インライン要素中に改行が行われるとがあると思います。
改行によって分割された面にはborder, margin, padding はその表示が行われません。
また、原則として、インライン要素はブロックレベル要素をその子孫要素として持つことができません。

XHTML と HTML の違い

【HTML】
SGML という言語をベースに作成されたマークアップ言語。

【XHTML】
XML を使ってHTML を再定義したマークアップ言語。
XML は仕様が厳格。
XHTML を使ったWebページの作成では、要素名の記述は小文字のみ。終了タグの省略は認められない。
文書の理論構造が正しく記述できる。
CSS と組み合わせることで視覚表現にかかわる内容と理論構造を分離して記述できる。