HTMLの事

HTMLとは？

目当て　←この絵も当然ここに描いている訳ではなく、他所に準備している物をここに表示させています。つまりHTMLとはこういう「置き方の指示書」であり、家の間取りの設計図と同じです。
　実際に配置するコンピュータが、ちゃんと動く様に書かねばなりません。

<html>
<head>
<title>ひな形</title>
</head>
<body>

これでひな形だ、悪いか？<br>
これでイイのだ。

</body>
</html>

　↑これが何かと言えば、実はこれだけでWebページの「ひな形」なのですよ。

<　***（タグの要素・名前）　>

というのが「タグ」（名札の事）と言いますが、それが幾つか並んでいます。

</　***（タグの要素・名前）　>

　「 / 」を入れると「終了タグ」になります。
　<***>（開始タグ）～ </***>（終了タグ）と組合わせになるのが普通です。つまり「ここからここまで」という印なのです。終了タグが無い要素もあります。（ <br> 等）
　囲う要素がクロスしない「入れ子構造」なのは判っておられましょうか？

HTMLの信念　例えば index.htm とか何か好きな名前で保存してブラウザで見てみれば：

これでひな形だ、悪いか？
これでイイのだ。

　…と表示されるハズです。
　後の方の .htm または .html という拡張子を忘れずに。

　表示される部分は<body> ～ </body>（これを「ボディタグの間」と言う）だけです。ヘッドのタグの間はコンピュータが読む所で、現段階では不問です。
　上記例をコピペして、ボディタグの間を書き直せば、もうページが出来ています。
　まぁカンタン。

　※これは「メモ帳」等で直接書いてる人向けの話。いまどきエディタもタダだし…
　でもHTMLを知っていれば何かとお得だという信念から続けるのです。
　（未だに手書きの人っている？管理者はそうです新設：自作支援のページ）

目当て　index というファイル名は、「目次」という意味で1ページ目に常識的に付ける名前です。
　またコンピュータの方も、ファイル名の指示が無い場合（最後が / で終わる場合など）は index という名を探すようになっています。
（ http://ww22.tiki.ne.jp/~phalsail/ の様な場合）

HTML段階での小細工

ヘッダ

目当て　新しい時代のHTML講座はSEO対策に直結します。SEO対策の第一歩は、「正しい」HTMLを書く事です。
　まぁ確かにエディタ任せで十分なのですが、場合によっては要らないタグが乱立する様なモノもあったり無かったり…
　だから逆に最低限知っておけば良い事をダラダラと書こうかと思います。

　上のひな形で「コンピュータ向け」とされているヘッドタグの間、通称「ヘッダ」は、こっそりサーバ上で書き換えられる事があります。（もちろん悪意は無かろうが）
　確認は、Windowsなら「右クリック」→「ソースの表示」で見られます。コンピュータ用なので、常人の読めない様な記述で埋まっているでしょう。
　「タイトル」以外の記述が無ければ勝手にデフォルト設定になります。逆にタイトルは絶対に書く様に心掛けて下さい。しかも遊んではいけません。ふざけるとスパム認定されるかも知れません。
　検索サイトのブラックリストに載りかねない（相手されない）と言う事ですよ。
　（スパムとは、簡単に言えば「ズル」という事）

　ヘッダで目に付くMETAタグとは、見栄えには一切関与しません。しかし「文字セットはこうしろ」「このページの大まかな内容」「誰が作ったか」…などの情報を検索側等に流しています。
　何も無ければ、サーバの方で勝手に判断してしまうから「無くても良い」と書きました。ただし時に勘違いされる事（文字化けなど）があります。
　※私は「GENERATOR」の項目に「手」と書いてますが、無意味です。

本文（ボディ）

目当て　さて本文部分ですが、「題名」－「章」－「節」－「本文」…という階層構造にされているモノが良いとされています。
　このページも多少ワザとらしくそうしていますし、ちょっと書き換えただけですぐにGoogle検索の1ページ目！（←つまりランクが上がった）になった、元鳴かず飛ばずのページ、なんてウチにもありますよ実際。

　何もしていないウチのとあるページが、何だか判りませんが常にランキング五位以内に留まっています。自分で不思議なんですが、解析出来ません。あんまり余計な事はするなという警鐘かも。

　「題名」は<title>としてヘッダへ書き込みます。ブラウザの左上に表示されます。このページなら「HTMLの事」です。ブックマーク（お気に入り）のタイトルになりますよ。一つしか書いてはなりません。複数書くとスパムになります。
　「題名」は<h1>としてボディにも書きます。文字も大きくなり、絶対に一つだけです。
　「章」は<h2>として書き込むのが普通です。これ以降は複数可（当たり前）。
　「節」は<h3>辺りが妥当でしょう。数字で階層が判ります。

<title>大元帥</title>（ヘッダに書く・一つのみ）

　　<h1>将軍</h1>（一つのみ）

　　　　<h2>将校</h2>

　　　　　　<h3>隊長</h3>

　　　　　　　　　<p>兵隊</p>　↑上ほどエライ（重視される）

他に下っ端として<strong>や<em>、<a>などがある。

　とにかく、この軍隊じみた階層構造を正しく踏襲していれば見た目もスッキリ受けも良い訳です。
　上の例、<p>以上は「ブロック要素」と言って勝手に行替えしますので注意。

　当方では画像の扱いに苦慮しています。ただし一貫して画像は添え物という態度であり、そういう使い方なら問題ありません。
　画像を置く場合は、出来るだけALTを記述するように心掛けましょう。絵にポインタを乗せると出て来る注釈の事です。
　←ポインタを重ねると「何よこれわッ！」と出て来るのがALT。
　（視覚障害者用のブラウザや事故時の代替記述だとか）
　W3Cによれば、書いておく方が行儀が良いのだそうですよ。

画像と文章の相関関係

目当て ←今こうして画像を漫然と表示させていますが、これにも知っていると便利な色んな小細工があります。
　ところで、ここの文章が画像の右下から出ているのにお気付きでしょうか。こういう画像をただ単に漫然と置くと、単なる大きな文字として並べられるからです。
　行の途中に置くと、メガネメガネ… の様にみっともなくなります。

実験台「 align="top" 」画像の上端

「 align="middle" 」画像の真ん中付近（ "center" も可）

「 align="absmiddle" 」画像のど真ん中

「 align="bottom" 」画像の下端（事実上無意味）

目当て　とまぁ、備忘録のように書かせて頂きました。ただ普通は、ここの文の様に文字の回り込みをご所望の方が多いのではと思います。
　この場合は align="left" の様にすると画像が文字の左に避けるような表示になる訳です。←は左避け、↘は右避け align="right" です。
実験台　ただし気を付けないと以下の文章を遠慮無く引っ張り込んでしまいます。
　そこで画像の途中で回り込みを解除したい場合は <br clear="all">
　の如くに記述すれば、回り込みは↑この様に途中で解除されて画像の下（次の行）から続く事になります。all は left, right どちらにも効力のある書き方なので、当方ではこう書く事にしています。
　ダラダラと話（文章）を伸ばしたのは、効力を明示化する為でした。

SEOとしての問題

メガネメガネ… 　ページの作り方ですが、基本は1ページ1テーマです。しかも簡潔に。ダラダラと挨拶などもっての外。いきなり内容・結論から入っても良いぐらいです。余計な事を書くと、それだけ「キーワード」の重要度が薄まります。
　ただしあんまりブツ切りなのも考えモノです。本文が一画面分しか無くて、前書きみたいな事をチョロッと書いてて「次へ」なんてウザイでしょ？
　だから一応は五分で読めるぐらいの長さを目安にすれば良いと思います。

　「キーワード」単語を忘れずに。<strong>という太字タグがあります。強調したいという気持ちのこもったタグです。使いすぎると気持ちが分散されて薄まりますので、そこは注意です。似た様なのに<em>というタグがあります。斜体になります。
　他に<b>というのがありますが、これは単なる太字です。使い分けましょう。
　SEO ←strong / SEO ←em / SEO ←b

　仮に全文を<strong>や<em>タグで囲ったら…全体を強調したら単語の強調にはなりませんよ。

　「パンくず」というのをご存知？いちばん左上に「ホーム＞J-CONT＞談義ホーム＞HTMLの事」みたいに書いてるヤツです。
　ヘンゼルとグレーテルで山に捨てられる際に帰り道が判る様にパン屑を捨ててった話に由来するそうで。（が、たしか小鳥に食べられて役に立たなかったんじゃ？）←ヤボ
　これがあると閲覧者が現在位置に惑う事が減り、ホームへの来訪も容易になって便利ですし、SEO的な評価も高くなるそうです。
　<a>タグは案外と見られています。ふざけた名前でリンクるのはやめましょう。

　いくら凝ったページを作っても扱い方が判らないのでは無いのと同じです。ページそのものはベタに作って良いと考えます。このページなど、正にベタですね。

　なおここでは被リンク（リンクされ）などについては関知外とさせていただきます。一言で言うなら「有名な所からリンクされろ」です。

ページトップ

スタイルシート CSS

見られます？目当て　画面の見栄えの設定は、CSSで行うのが主流となりつつあります。
　HTMLから見栄えの要素は排除されつつあります。ただし未だ行き渡っていません。
　ただ、それに甘えていると時代遅れになりかねません。率先して勉強しましょう。

←そぐわぬ暴走マンガ（15禁？）を：
見たい　消えて

　CSSでは、ヘッダでタグの種類ごとに一括して指定出来ます。
　つまり<p>タグや<div>タグの幅は500pxだぞと決めれば、どこでも勝手に500pxで折返しします。

　このページは
　「文字領域はウィンドウ中央寄せ、その内容は500px折返しの左寄せ」です。

←←赤はウィンドウの広さ→→

　黒ワクは中央寄せ。
　本文はこの様に左寄せである。

　指定の無いページではウィンドウの端から端までダラリと文字が並び、ウィンドウの幅で改行の具合が変わります。
　製作哲学の相違を言うのであり、それがイケナイと言うのではありません。
　その操作方法は：

<style type="text/css">
<!--
div	{ width: 500; text-align: left; }
.deka	{ font-size: 25pt; }
-->
</style>

　こういうのをヘッダに書き込むのです。するとこの例通りなら、全ての<div>タグが指定の働きをします。
　また、なんの働きもしない<span>タグに class="deka" と乗せ、その範囲内の文字の装飾も出来る訳です。
　この、「一ヶ所から不特定複数を操作出来る所」が便利なのです。

　私は無秩序が嫌いです。　←「class="deka"」の例

　外部ファイルといって、別ファイルにして置いておく方法もあります。

　<link rel="stylesheet" type="text/css" href="jsd.css">

　jsd.css という名前の外部ファイルから参照してますよ、という呪文です。これをヘッダに書き込んでおけば、どのファイルでも使えるのです。
　サイト全てのページを共通デザイン・レイアウトにする事も可能ですし、変えたくなった時にはその外部ファイル一枚を変更すれば済みます。

ページトップ

目当て　さて例えば次の様なハコはどうでしょう？枠線が1pxで引かれています。
　普通テーブルborder設定はゼロにするか、でなければ数で幅を決めます。ゼロ以外（枠線あり）だと、最低2px幅は出て来る筈なんですが…
　（よく見かけるんでサンプルとします）

　判りやすい様に色分けしてみました。テーブル枠線はゼロですが、それぞれの枠内に別にCSSで個別にborder設定をしているのです。
　最左は四方向とも、他三つは「コ」の字型に設定します。設定は四方向ともの方が "border" 一言で略せて楽です。

<td style="border: solid 1px red;">　←四方向は "border" 一言で略せる

<td style="
border-top: solid 1px blue;
border-right: solid 1px blue;
border-bottom: solid 1px blue;">　←「コ」の字では一辺ごとに設定

※以下、ﾌﾞﾗｳｻﾞ・OSの仕様によっては作動しません※

　CSSにはフィルタというのがあって、上手く組み合わせれば左の様な事も出来ます。（ウチでは「キルリアン写真」と呼んでいる）
　ただし基本的にIE系ブラウザでしか見られないという欠点もあります。調子に乗ってると、素の絵を晒して一人で騒いでるという図になります。

<img src="絵のURL.gif"
style="
filter:　←フィルタ指定
Chroma(color=#82dc00)　←透明色らしいが、無くてもなるよ。
Mask(color=#000000)　←キャラの型抜き・黒指定（背景黒はテーブル設定）
Glow(color=#00ffff,strength=5);"　←なぜか内側へ噴出す炎
alt="キルリアン">

					←その他の例
素	モノクロ	色反転	明度反転	ぶれ	←その他の例

フィルタマンガ

ワープ！	（シュッ）	ビヨ～ン	とぁああ…ぁ？	（ドスッ）	あたた…（汗）

ページトップ

	HTMLの事
	「へてめる」←ウチでの呼び方 WEBサイト（ホームページ）の「ページ」を作るのがHTMLという言語（呪文）です。　ただし現在はエディタで作るのが当たり前なので、SEOやCSSにも重点を置いた書き方になりました。
	JavaScript 談義　サイトホーム　履歴転進　自作支援