html

{html} htmlの難しさ。

htmlをとりまく、把握すべき項目はそれなりに多いと思う。
クリーンhtml?初めて聞く。
つぶやき読み込み。音楽が気持ちイイ。
CSS複数コラムレイアウトモジュールについて調べる。
htmlにまつわる基本的な話が続く。htmlとは何かを学び直す良い機会。
覚える量が多い。web制作業界が今まで以上に混乱していく予感。
全要素・全属性完全収録、だったんだ。これは読みごたえありそう。
一冊は即買いですね。

テンプレート作成準備。

<dl>
<dt>見出</dt>
<dd>説明</dd>
</dl>

リスト → トップ → ダウン
と、覚えよう。

数年前までは19インチワイド1つあれば事足りてたのに、最近作業領域が狭く感じるのはそういう理由だと思う。と、大きなモニターを買ういいわけを考えついた。モニターもすごく安くなってるしね。

↓実はこの機種がすごくきになっている。パネルがVA。

プロパティの値としては、無い機能。しかし、display:inline;にすると実現する。
ブラウザによって点線の外観が微妙に変わるのが欠点。

暗記できないので。。
最低これを入れておけば文字化けは解消!

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

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

はっきり仕様には書いてますね。気づかなかった。

書くとどうなるか。

pタグの中にdivを書くとこうなる。赤いボーダーがpタグ。pタグがdivをかこっているが、floatしたみたいに高さが消えている(Fx3[mac])。divの中にあるpタグは正しい挙動をしているのもわかる。そして、ブラウザによってタグの挙動が違う。

pタグの中にdivを書くと変な感じになる。

ブラウザ比較

p_div2.gif

firefox3.5

p_div1.gif

safari4

p_div3.gif

opera9

text-indent:-9999;やdisplay:none;で実現できないデザインをCSSだけでロールオーバーを実現。
あと、javascriptが禁止の時などに使える方法。

  • 動作確認済みブラウザ
    [mac]Safari3,Firefox3,Opera9
    [Win]IE6,IE8,Firefox3,Safari3

使った素材

z-indexでロールオーバーサンプル

ポイントはボタンの両端の線をかぶらせている点。

正規表現、フォルダ内ファイルの一括処理。
Dreamweaverって安心して使える。
バージョン8からはコードを折たたむ機能が実装され、超使ってます。

emeditorもいいけど、ワンストップという意味ではドリには勝てないですね。

「手軽さ」という点では、起動を含めた諸々の処理はテキストエディタに負けますが。

膨大なファイルの中からリンク切れをおこした孤立ファイルの検索&リスト化もできる。

dreamweaver.jpg

フリーのフォルダ内置換ができるソフトも何種類か使ったけど、ドリの安心感と使用感には及ばなかった。

tableタグの検証

サンプルソース

テーブルにボーダーを指定するときのサンプル。

cssソース table.type01 { border-collapse:collapse; margin-left:1px; width:371px;}
table.type01 th { background:#eeeeee; font-weight:normal;}
table.type01 td { width:;}
table.type01 th,
table.type01 td { border:1px #666 solid; padding:8px; line-height:1; vertical-align:top; text-align:left;}
htmlソース <table class="type01" cellspacing="0">
<tr><th>テーブルのサンプル</th><td>htmlサンプル</td></tr>
<tr><th>ああああああ</th><td>いいいいい</td></tr>
</table>
表示結果
テーブルのサンプルhtmlサンプル
ああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
The Web KANZAKI -- Japan, music and computer
すごくわかりやすい。
なお、こちらのhtmlのソースを見るととても勉強になります。

よくやるのはjavascriptやphpで外部htmlファイルを読み込む方法でしょうか。
SEOを気にしなければframeタグを使用して読みこんでも実現できます。

on the center line.
JavaScriptを使ってHTMLのインクルードを実現
javascriptの方法だとブラウザでjavascriptが動いていないときは不具合が発生してしまいますが、2009年現在の各ブラウザではそんな事態が発生する事の方が稀なのでしょうか。
javascriptでhtmlを操作するサイトも増えて来たように感じます。
ネットマニア
php3行でhtmlファイルを読み込む方法
こちらはサーバーでphpが使える事が使用条件。
phpとして認識させる為に拡張子をphpに変更する。

html4.0 実体参照

HTMLで使える文字実体参照
水無月ばけらさんのページ。
いつも使わせていただいていますm(_ _)m

http://www.ne.jp/asahi/minazuki/bakera/html/reference/charref

ふとした瞬間に使うんですよね。

よく使うhtmlタグの実体参照

&amp;&(半角のアンド)
&lt;<
&gt;>

あわせて読みたいブログパーツ