HTML備忘録 / 記述メモ1

  • 2003年7月18日：作成
  • 2018年10月26日：全面改訂

ここから先が本来の備忘録で、時間が経って記述が元に戻ったり折角作り上げたCSSを壊したりしないように、解決した問題の根拠を残し今後のマニュアルとする事を第一目的としている。

また、手打ちは結構ほんとうは辛いので、コピー＆ペーストの元ページとする事を第二目的とする。もし文章や例文が不自然な場合は、コピーの都合を優先したからと考えて頂きたい (^_^;)

第三目標として、ブラウザのテストページも兼ねるので「時代おくれ」で使用されないものも含んでいる。また特殊事情が多いためタグ内直接記述を多用している。

記述方法は主に、HTMLクイックリファレンスを参考とさせて頂いている、感謝 m(_ _)m

トップページ index.shtml

トップページ（表紙）は個別ページと構造が根本的に異なり、CSS共通化のメリットが無いため、独立した設定となっている。今のところ思い付きの集大成レベル、始めて書いたHTML5でもあり、大幅なhtml見直しとCSS整理が必要なのは確実。

SSI（Server Side Include）カウンターを設置したトップページのみshtmlとなっているが、単にSakuraサーバの設定の都合（SSI機能はshtmlファイルのみ有効）で、それ以上の意味は無い。サーバの設定としては古い（今時そんな事が問題になる貧相なサーバはない？）らしい。

ページ構造

各ページは<body>で黒背景白文字を設定、そこに<div id="page">を配置、その内部に<div id="side">サイドメニューと<div id="main">本文を配置している。サイドメニューと本文は文字色など極基本的な部分を除き別設定としているので、独立した修正が可能であるが、同一設定でも両方に記述しなければならない面倒さはある。

body {text-align:center; background-color:#000000; color:#ffffff;}
#page {width:780px; margin:0 auto; text-align:left;}
#side {width:180px; float:left; position:relative;}
#main {width:580px; float:right; overflow:hidden;}

レイアウトの基本

マージン {margin}

オブジェクト間の空きは前のオブジェクトのmargin-bottom（ボトムマージン）と次のmargin-top（トップマージン）の和ではなく、大きい方で設定される。混乱の元なので、原則、全てのmargin-topを0emとし空きの調整はmargin-bottomで行う。調整には余白0emのclass="nlf"と0.5～2emのclass="space_*"を用いる

このmarginに限らず、指定単位は本文文字サイズを基準とするemを主として用い、かつデフォルト文字サイズを指定せず、可能な限りブラウザの相対的な表示に任せる。なお、小数値による指定は規則上認められるが、整形の可否は別問題、それは対象オブジェクトの種別とブラウザによる。

.nlf {margin-bottom:0em;}		/* no line feed */
.space_h {margin-bottom:0.5em;}		/* half */
.space_f {margin-bottom:1em;}		/* full */
.space_fh {margin-bottom:1.5em;}	/* full+half */
.space_ff {margin-bottom:2em;}		/* full+full */

space_0でなくnlfなのは自分の中で意味が違うから。

良く使うプロパティ <div>

HTML5のページレイアウトは、ほぼ<div>コンテナの配置であり、これがページ記述の出発点となる。

<div>コンテナにはCSSプロパティで多岐にわたる詳細な体裁設定が可能であるが、その多くは他のオブジェクトでも利用できる。以下のサンプルには、その極一部、自分が使いそうな物を抜き出している。

{width:75%; padding:0.5em; margin:0 auto; margin-top:0em; 
	margin-bottom:1em; border-style:dotted; border-width:1px; 
	border-color:#00ff00; border-radius: 5px;}

width/height ― %/px/emで指定
margin:0 = margin:0 0 0 0 ― ゼロの単位は無くても良い
margin-top -bottom -right -reft ― 個別指定も可
margin:0 auto ― 中央配置、上下は別途指定
padding ― 内部余白 px/emで指定　個別指定可能
float ― left/right 左右に配置
color ― 文字色指定
background-color ― 背景色指定
border-style ― solid/double/dashed/dotted
border-width border-color ― 線の太さと色
border-radius ― 丸角の半径
この太さ1pxのdottedはIE11で非常に見辛い。

コンテナのheightは、内部オブジェクトの分量で自動的に決まるので（通常）指定しない。CSS指定の順番（上書きの順番）で表示が崩れる場合があるので気を付ける。float機能で右寄せ、左寄せも可能で、その解除用にclass="clear"を定義している。

.clear {clear:both;}

この丸角囲みは非CSSのTableレイアウトでは超高難度、<table>使いの憧れだった、丸角を画像で貼り付けたりして・・・それがあっさり実現できた事に感動し、非常に気に入ったので使いまくる事に決定した (^^ゞ

区切り線 <hr>

HTML5では<hr>の属性はすべて廃止、飾りではなく内容の区切りで使用する事が決められている。

hr {width:80%; border-style:dotted/dashed/solid; 
	border-width:1px 0 0 0; border-color:#808000;}

各ページの最下行に、ページの終わりを示す区切り線を置いているが、それとブラウザのステータスバーが接近して圧迫感があったので、id="page_end"で「隙間」を作っている。なお、1ページに1個しか存在し得ないのでidにした（下のサンプルはstyle直接記述、ここでページは終わらない！）。

#page_end {clear:both; border-width:3px 0 0 0; 
	border-color:#0000ff; margin-bottom:5em;}

見出し <h1～4>

<h1>はページ左上の「時代おくれ」ロゴ、<h2>はページタイトル、<h3>は項目、<h4>は細目と使い分けている。<h1>は旧スタイルを踏襲し背景画像で、<h2>はページ幅の囲みで、<h3と4>は文字列幅の囲みで見出しを補強している。

改行せずに文章を継ぐため、細目<h4>には{float:left}と文字サイズ1em（本文に揃える）を指定してある。

h1, h2, h3, h4 {font-weight:normal;}

	/* 枠等で視覚補強するので太字は解除 */

h1 {width:180px; background-image:url("../common/bar2.gif");}
h1 {padding-left:2px;}	/* 表紙との謎のズレを吸収するため */
			/* これはサイドメニュー用の設定 */
h2 {padding:3px; border-style:solid; 
	border-width:2px; border-radius: 8px; 
	border-color:#0000ff; margin:0em 0em 1em 0em;}
h3 {display:table; padding:3px; border-style:solid; 
	border-width:1px; border-radius: 6px; 
	border-color:#0000ff; margin:0em 0em 0.5em 0em;}
h4 {display:table; padding:2px; border-style:dotted; 
	border-width:1px; border-color:#0000ff; 
	border-radius:4px; float:left; font-size:1em; 
	margin:0em 0em 0em 0em;}

	/* display:table;で文字のみに囲みを付ける */

段落

基本設定 <p>

トップマージン0em、ボトムマージン1em、行間175%、文頭1文字下げ、行末揃えを<p>の基本とする。行末揃えは行末がピッチリ揃い（松文書.bunのようで ^_^;）美しいが、英単語行送りなどの都合で超マヌケになる場合もあるが、それは我慢しよう。バリエーションとして、class="noindent"字下げなし、"center"中央揃え、"right"右寄せを使用する。

class="nlf"ボトムマージン0emの改行あり行送りなしを流用して、HTML（欧文）に存在しない形式段落（のモドキ）を表現しているが、次の<p>に対する設定である事に留意する。これはコメント枠などの、最下行空白消しにも使用している。

p {line-height: 175%; text-indent: 1em; 
	text-align:justify; text-justify:inter-ideograph; 
	margin:0em 0em 1em 0em;}

p.noindent {text-indent:0em;} 
p.center {text-align:center;} 
p.right {text-align:right;}

なお次の.brのバリエーション{content:"\A \20 \20";}的物を作り、形式段落とすることも考えたが、正しいインデント1emを作ることができず微妙に不細工だったので（今回は）不採用となった。

段落中改行 .br

一文字だけ次行へ送られてしまった、表の折返しが変、そんな時には段落や単語の途中で強制改行したくなる。

font-size未指定の「時代おくれ」では各ブラウザのデフォルトで表示は変るので、その恣意的な改行は無駄であり、時にもっと変になる。そんな事は理屈でも経験でも十分に承知しているが・・・その誘惑は極めて強力で抗い難い (^_^;)

HTML4.01時代の乱用の反省から<br>は撲滅対象になっているが、廃止された訳ではなく、段落の切れ目で正しく使えば問題はない。

しかし、今問題の段落や単語の途中で<br>を使うと閲覧側の再整形や自動文書処理の障害となるので、class="br"を設定しCSSで疑似改行を挿入する。この擬似改行であれば再整形にも文書処理にも無関係なので、誘惑に負けた場合にはこれを使う事にする、既に負けて何ヶ所か使っている (^^ゞ

.br::before {content:"\A"; white-space:pre-wrap;}
/* 下の使い方ならbeforeでもafterでも結果は同じ */

<span class="br"></span> <-- これを改行箇所に挿入 -->
項目の目次に戻る サイトのトップに戻る