by shigemk2

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

トップ > HTML

ページ内リンク

HTML

HTML5/テキスト/a要素 ページ内リンクを設定する - TAG index Webサイト

リンク元

<a href="#abc">ABCの位置へジャンプ</a>

リンク先

<h2 id="abc">ここがABCの位置</h2>

リンク先にはidを設定しないといけない。

<a href=".abc">ABCの位置へジャンプ</a>

リンク先

<h2 class="abc">ここがABCの位置</h2>

上のようにclassだけを設定してもページ内リンクは効かない。

HTMLを作成しつつ、CSSを書くための手順

Coding Tips HTML CSS

HTMLを書くにあたっての大まかな注意

HTMLがあって、CSSがあたり、webページになる
そのため、まずHTMLから書く。

本来レイアウトはどうでもよくて、HTMLが本当に正しいものになっているかが重要である。
CSSのあたっていないHTMLを上から読んで意味が通じるものかどうかでHTMLを書くべきである。

CSSを一から書くときの大まかな注意

body content sidebarとかあると思うんだけど、
こちらはHTMLの順にCSSを書くのではなく、

bodyの部分 contentの部分 sidebarの部分で、全体のレイアウトから詰めていく
全体から書いていって、詳細をどんどん詰めていくのがよい。

あと、ブラウザごとの差異を潰すreset cssも忘れずに。

特にwordpressで(出回っているテーマを使わずに)サイトを構築するときは

  1. まずHTMLを書く
  2. CSSやJSを書く
  3. 最後にphpのテンプレートを整える

phpテンプレートからHTMLを書くのは、phpの挙動とHTMLのレイアウトを同時に取り扱うことになるため、
タスクが二重三重になるからやめといたほうがいい。

b vs strong vs em

HTML

4.6.3 The strong element — HTML5

b と strong と emってどう違うのだろうか。

コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <em>今日でブログの毎日連続投稿がまる1年</em>
    <strong>完全に日刊になってしまいました</strong>
    <b>Nice Boatから5年</b>
  </body>
</html>

表示結果

上を見ていただけたら分かるように、emは斜体になりstrongとbは太字になっている。

w3cのemのページによると、

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.

と書いてある。
4.6.2 The em element — HTML5

またbタグのページでは、

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

と書いてある。
4.6.17 The b element — HTML5

つまり、単純に斜体や太字にしたいだけならiタグ bタグを使えばよいのだが、
マークアップに意味を持たせ、「強調」したい部分はem、「重要」である部分はstrongタグを使う。

  • マークアップにどういう意味を持たせるのか
  • ブラウザ上でどのように表示されるか

は別次元の問題であることを頭に入れておかねばなるまい。

ABBR

HTML

<ABBR>−HTMLタグリファレンス

Abbreviationの略で、このタグで囲まれた語句が略語であることを表します。

とのこと。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <abbr title="Extensible Markup Language">XML</abbr>では、タグを自分で作ることができます。簡単にいうと<abbr title="Hypertext Markup Language">HTML</abbr>
  </body>
</html>

まあまあこんな感じで表示されます。

そんなマークアップもあったのね。
こんな風にabbrをspanに変えてborder-bottomつけるとか野暮なことをせんでもいいわけですよ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <span class="XML" title="Extensible Markup Language">XML</span>では、タグを自分で作ることができます。簡単にいうと<span title="Hypertext Markup Language">HTML</span>
  </body>
    <style type="text/css">
    span.XML {
      border-bottom: dashed 1px #000000;
    }
    </style>
</html>

フォームにおけるINPUT type="submit" と type="button"の違い

HTML

ボタンを押すとフォームの内容がPHPファイルに送信されて、
POSTデータを出力させるHTMLを作成してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hoge</title>
  </head>
  <body>
    <form method="POST" action="./hoge.php">
      <p>
	名前：<input type="text" name="namae">
      </p>
      <p>
	<input type="submit" value="送信する">
	<input type="reset" value="入力内容をリセットする">
      </p>
    </form>
    <form method="POST" action="./hoge.php">
      <p>
	名前：<input type="text" name="namae">
      </p>
      <p>
	<button name="button2" value=""><font size="30">送信</font>する</button>
	<input type="reset" value="入力内容をリセットする">
      </p>
    </form>
  </body>
</html>

表示されるページはこんな感じです。

同じところ

  • ボタンをクリックするとデータが送信される
  • フォームにフォーカスが当たっている状態で、エンターキーを打鍵すると、データが送信される
  • ボタンにフォーカスが当たっている状態で、ボタンをクリックすると、データが送信される
  • ボタンにフォーカスが当たっている状態で、エンターキーを打鍵すると、データが送信される

違うところ

buttonはタグであり、囲むことが出来るので、ボタン上のテキスト表示をCSSで変えることが出来る。また画像を表示させることが出来る。

list-style-type マーカー文字の種類を指定する

HTML

list-style-type−スタイルシートリファレンス

黒丸

<ul style="list-style-type: disc">
 <li>いちご</li>
 <li>人参</li>
 <li>サンダル</li>
 </ul>

小文字のローマ数字

<ol style="list-style-type: lower-roman">
 <li>いちご</li>
 <li>人参</li>
 <li>サンダル</li>
 </ol>

カタカナのアイウエオ順

<ol style="list-style-type: katakana">
 <li>いちご</li>
 <li>人参</li>
 <li>サンダル</li>
 </ol>

とりあえず、Operaではkatakanaが効かなかった。
いちおうこういうやりかたがあるってことくらいは
知っておいてもいいんじゃないだろうか。

wrapper

HTML

wrapperは必須？：CSS 3分コーディング

body以下の全てをdivで囲み、wrapperやcontainerという名前をつけておくケースはよくある。
1つのセレクタでページ全体の幅や色、配置などを一括指定できる点がメリットである。

<div id="wrapper">
	<div id="header">
	....
	</div>
	<div id="main">
	....
	</div>
	<div id="footer">
	....
	</div>
</div>

こんな風にしてページ全体を一括指定するとか。

/* wrapperで幅、中央寄せ、背景色一括指定 */
#wrapper {
	width: 850px;
	margin: 0 auto;
	background: #ccc;
}

でもマークアップ的には必要のない構造なので、理論上必ず必要となるわけでもないが、
HTML5をコーディングするときのいくつかのTips - by shigemk2
こっちにもあるけどnavの横一面に背景色とかを設定したいときは、やっぱりwrapperが必要になったりする。

bodyの一般属性

HTML

<body> - 本文

属性 意味
class=class H4+/e3+/N4+。クラスを指定します。
dir=dir H4+/e5+/N6+。文字の表示方向を指定します。
id=id H4+/e3+/N4+。ID を指定します。
lang=lang H4+/e4+/N4+。言語を指定します。
style=style H4+/e3+/N4+。スタイルシートを指定します。
title=title H4+/e4+/N6+。タイトルを指定します。
accesskey=key H5+。アクセスキーを指定します。
tabindex=n H5+。タブインデックスを指定します。
contenteditable=bool H5+。要素を編集可能にします。
contextmenu=id H5+。コンテキストメニューを指定します。
draggable=bool H5+。ドラッグを可能にします。
dropzone=value H5+。ドロップを可能にします。
hidden H5+。要素を非表示にします。
spellcheck=bool H5+。スペルをチェックします。
IE拡張属性 他にもIEで拡張された属性が指定可能です。

このように、bodyにもidやclassをつけることが出来るのだ。

id と class その2

HTML

その1
id と class - by shigemk2

idは1つのページに1つしか存在してはいけない。
Ajaxなどで複数生成されてもダメなので、
idのタグを作成する場合は注意すること。

なお、複数のHTMLページに同じ名前のidがあるのは問題ない。
(同じページに同じ名前のidがつけられたタグが複数つけられるのが問題である)

と言ってclassをつけると変なCSSが当たる可能性もありうるので、
エレメントの名前はよりユニークにすることが望まれる。

idをつけると、href="#アンカー名"でページ内リンクも可能になる利点がある。
そのため、CSSの当たっていないclassやidがあっても問題ではない。

span

HTML

<SPAN>−HTMLタグリファレンス

タグはそれ自身は特に意味を持っていませんが、
〜で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。
インライン要素。

<p>
<span style="background-color: #0099FF">青色</span>と 
<span style="background-color: #FFFF00">黄色</span>を混ぜると 
<span style="background-color: #33CC33">緑色</span>になります。
</p>