layout-check

改行コード自動追加位置の検証

2009-03-20T22:44:35+09:00

1234567890
12345678901234567890
123456789012345678901234567890
1234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

文字参照

2009-03-20T22:25:06+09:00

文字参照しない半角スペースを連続3
><& ><&
文字参照　nbsp　#0160　#x00a0　という３個の半角スペース
><&   ><&
nbspタイプ連続
1234567890
12      90
0160タイプ連続
12      90
x00a0タイプ連続
12      90

change-pagename_effect-upload-file-uri

2009-03-17T23:52:51+09:00

画像等のファイルをアップロード後ページ名を変更した場合、アップロードファイルがどうなるかについて

アップロード画像はページ番号からも呼び出せる。このページにhttp://www32.atwiki.jp/layout-check?cmd=upload&act=open&pageid=21&file=test.jpgというファイルがアップロードされている。
またページ名を利用した呼び出し方も存在する。http://www32.atwiki.jp/layout-check/?cmd=upload&act=open&page=pagename_upload-file-uri&file=test.jpg というのがそれである。「アップロードファイルをもつページ一覧」に表示されるのが、このページ名を利用するもののようだ。
現在はページ名変更の影響によりhttp://www32.atwiki.jp/layout-check/?cmd=upload&act=open&page=change-pagename_effect-upload-file-uri&file=test.jpgにて呼び出すように自動変更されていた。

フォーム関連プラグインのテスト

2009-03-15T20:29:31+09:00

#search #search2(or) #search2(and,title=Search,size=10) #search3(and,title=Search,size=10) #tagsearch() #tagsearch2(title=たぐけんさく,or,show_page)

border-width:medium;

border:solid medium #3366cc;

border:dotted medium #3366cc;

border:dashed medium #3366cc;

border-width:thick;

border:solid thick #3366cc;

border:dotted thick #3366cc;

border:dashed thick #3366cc;

border-width:1em;

border:solid 1em #3366cc;

border:dotted 1em #3366cc;

border:dashed 1em #3366cc;

要素レンダリング確認

2007-09-24T23:07:16+09:00

ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεζηθικλμνξοπρστυφχψω

見出しh1

見出しh2

見出しh3

見出しh4

見出しh5

見出しh6

弱調のem要素、強調のstrong要素

定義リストのdtのように説明する対象となるdfnは、dfn要素の周辺でそれに関する説明がある事を示す。

短いコンピュータ言語やhtmlタグを記述した場合付与するcodeタグ。このプログラムは不正な処理を行ったので強制終了されます。CtrlAltDelete変数[0-255]

cite要素

フォントにOsaka-Monoは無意味？http://www.remus.dti.ne.jp/~a-satomi/nikki/2004/02a.html#d05n01-CSS-badOsaka-monoが正しい名称？http://daisei.jpn.org/blog/2007/02/osaka.html

略語

abbrについてググると、abbrは略語全般に使用するという意見が多い。acronymは複数語の頭一文字を取った略語でIEも対応しているが、NATOのように頭文字を続けて特殊な読みになるものだけを対象とするとも言われる。

blockquote q

w3cに次の記述がある。

These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.

また著作者は、その著作物及びその題号の同一性を保持する権利を有し、その意に反してこれらの変更、切除その他の改変を受けないものとする。との記述が著作権法にある。引用範囲が小さ過ぎれば引用文章に誤解を生じさせる可能性もある。

sub sup p pre ins del

CO₂の炭素原子が¹²Cか同位体の¹⁴Cか判断しづらい。

日本では独自の改行文化が根付いており、英文的パラグラフは一朝一夕では習得できない。パラグラフライティングどころかリーディングすら不慣れで、洋書のパラグラフを保ち忠実に日本語化すると、改行の少なさに違和感を覚えるほどである。

改行のbr要素を
２つ続けて記述した場合

ブラウザによっては連続改行を無視し空行はできない事がある。

通常、全角文字は適当な所で折り返される。だがＰＲＥ要素では基本的に折り返さない。とはいえソース上改行していれば同じように行が変わる。スタイルシート次第で行途中で折り返す事もある

cssには半角文字列の折り返しに関するプロパティがる。~~全てのブラウザがそのプロパティに対応している。~~

果物グループと野菜グループ100gあたりの栄養価
	林檎	バナナ	柿	パイナップル	モロヘイヤ	パセリ
	林檎	バナナ	柿	パイナップル	モロヘイヤ	パセリ
ビタミンＢ１	0.02mg	0.05mg	0.03mg	0.08mg	0.18mg	0.12mg
ビタミンＢ２	0.01mg	0.04mg	0.02mg	0.02mg	0.42mg	0.24mg
ビタミンＣ	1mg	16mg	70mg	27mg	65mg	120mg
カルシウム	3mg	6mg	9mg	10mg	260mg	290mg

栄養価簡易表
	林檎	バナナ	柿	パイナップル	モロヘイヤ	パセリ
ビタミンＢ１	0.02mg	0.05mg	0.03mg	0.08mg	0.18mg	0.12mg
ビタミンＢ２	0.01mg	0.04mg	0.02mg	0.02mg	0.42mg	0.24mg
ビタミンＣ	1mg	16mg	70mg	27mg	65mg	120mg
カルシウム	3mg	6mg	9mg	10mg	260mg	290mg

internet explorer
インターネットエクスプローラー

IE6.0
インターネットエクスプローラー７
mozilla
マック版safari
konqueror

win
1. IE6
2. モジラ
3. internet explorer7
マッキントッシュ
1. safari
2. ネスケ
3. iCab
4. opera

番号付きリスト
順序ありリスト

リスト
オーダーリスト

番号付きリスト
番号付きリスト

dl要素: dtタグが付けられた用語をddタグが付けられた箇所で定義する
dfn要素: dfnタグが付けられた用語を説明している点でdt要素に近いが、dd要素のようなものを持たない

やたら横長のPRE要素

2007-09-18T23:43:50+09:00

preはソースの改行を反映してくれる
ただし基本的に表示領域末端での文章自動折り返しを行なわない。そのため改行なしの文章をpre要素化した場合、横に長いボックスになりカラム落ちの原因を作ったりする。それを防ぐため overflowプロパティをつけたりする。しかしoverflow:autoと指定したpre要素はmacIE5で記述内容が見えなくなるのだそうな。
overflow-xというIE由来の特殊プロパティならmacIEでも大丈夫という噂を聞いた事がある。overflow-xはIE専用プロパティからcss3のプロパティへと昇格し、Firefoxなども対応を進めているようだ。Firefoxの対応は不完全なようで、先祖要素にoverflow-xを指定し、その中のpre要素にまたoverflow-xを指定すると、下スクロールでpre要素に無数の罫線が発生する。winIEすらpre要素の下端に発生した横スクロールバーの制御に問題がある。つまり結局overflow-xをpreにつけるより、親要素のdivにoverflow-xを与えるだけが最善であるように思える。











ついでだから
無駄に改行して縦長にしてみた。



現在、先祖のdivにoverflow-xを指定、pre要素のoverflow-xを無効化中。


よって
たぶんFx2でも邪魔な罫線は発生しない。

010old

2007-06-25T23:56:46+09:00

リキッドレイアウトを目指している他サイトのレイアウトが、携帯端末用ブラウザ”NetFront”で表示したとき崩れる。その原因を探るため作ったページでありコンテンツは特にありません。
また、浮動ボックス自体にoverflow:visible;をしたことにより、Netfrontバージョン3.3での崩れは改善されました。
浮動要素を包含するボックスにoverflowプロパティを使う手法は有名ですが、浮動要素自体にoverflowプロパティを使うことで、どんな特殊効果が発生したのかは不明です。

把握している問題

Netscape7.1への最適化を目指し、IEのカラム落ち対策としてoverflow-xを施しているため、スクロール操作性が悪くなっているかもしれません。Firefoxも何故かoverflow-xに対応しているので、操作性が悪いでしょう。
operaでこちらの意図したfont-family、font-size、line-heightになっていない事も確認。
アップロードファイル名を#attachに表示すると、IEでカラム落ち。#attachの中に#attachが入っているのが要因か？

コンテンツっぽいもの

010oldのレイアウト

010old/ページ構造

2007-04-22T21:49:43+09:00

010old(新デフォルト)の構造

作業中

body
┣#head-bar
┣#overDiv
┣#top
┗#wrapper●○▲△
　┣#head_editmenu
　┗#wrapper2●○▲△
　　┣#header●○▲△
　　┃┗#header2●○▲△
　　┣#content●○▲△
　　┃┣#main●○▲△
　　┃┃┣#mainbody●○▲△
　　┃┃┃┣#mainbody2●○▲△
　　┃┃┃┗#ad
　　┃┃┣#attach●○▲△
　　┃┃┗#footnote●○▲△
　　┃┗#menu●○▲△
　　┃　┗#menu_body●○▲△
　　┃　　┗#menu_body2●○▲△
　　├＜br clear="all"＞
　　┣#foot_editmenu●○▲△
　　┗#footer●○▲△
　　　┗#recommend

ボックスイメージに色をつけた場合

サムネイル画像をクリックすると大きなサイズを表示します

解説

#head-bar: ページ最上部にある「＠Wiki　[PR] 匿名掲示板を無料レンタル」などの部分。外部cssではなくhtmlソース上で指定されている。
#overDiv: 役割不明
#top: ＆nbsp;≒半角スペースが入る。役割不明
#wrapper: レイアウト制御の包み。背景はピンク色。多数のdivを中に持ち、中に入るdivの色で大部分が隠されている。
#head_editmenu: 「ログイン、ログアウト」などが表示される。色指定が無いため、#wrapperのピンク色が透けて見えている
#wrapper2: 包み。背景色に緑を指定したが、中に入るdivの色で大部分が隠されている。黄色の#foot_editmenu上部に、色指定のない＜br clear="all"＞があり、一行分、緑色が見える。また黄色の#foot_editmenuに6pxの下マージンがあり、そこも緑になる。
#header: 包み。紺色を指定したが、#header2の色に隠されている。
#header2: 背景は銀色。この中に、サイト名とページ名が表示される。
#content: 包み。背景は青色。一行だけのページで青色がはっきり見える。これは#content:afterにより#contentボックス内の最後に、floatしていない擬似要素を生成したため、その擬似要素の位置まで#contentが青色で包もうとするからである。#content:afterがない場合
#main: 包み。背景は灰色。通常のfloatなら左メニュー側にこの色は見えないのだが、#mainの幅を100％にして、ネガティブマージンを使ったため、左メニュー側に灰色が見える。この灰色部分はメイン側の縦長さに連動する。他サイトのps-one_ggeneでは#mainと#menuの色を揃えることで、左メニューバーがずっと下まで続いているかのように偽装している。
#mainbody: 包み。オリーブ色。親ボックスの#mainの内容領域にネガティブマージン分#menuが侵入してくる。親の#mainの内容領域線に対して、子の#mainbodyに左マージンを設け、侵入した#menuに重ならないようにしている。
#mainbody2: 背景は白色。このなかに編集した文章が現われる。
#ad: JavaScriptによる広告が現われる。背景色指定なし。
#attach: アップロードされたファイル（添付ファイル）がある場合、リスト表示する。サイト管理人が表示・非表示を選択できる。ページ毎の表示・非表示は選べない。アップロードファイルを表示すると、#attachの中に#attachが現われるというバグがある。
#footnote: 役割不明。いちおう背景は白色。
#menu: 包み。背景色はteal（鴨色）という緑っぽい色。中に入るdivの色で隠されている。幅をpx指定してfloatさせているので、当サイトはハーフリキッドレイアウトである。
#menu_body: 包み。背景は紫色。
#menu_body2: サイト管理人がメニュー指定したページが表示されている。どのページがメニューページに指定されたかは判りづらいが、そのページさえ判れば、容易に編集できる。
＜br clear="all"＞: htmlソース上に記述されているタグ。ソース上先行する浮動要素（floatした要素）より下方に表示される……らしい。NetFrontが対応しているか不明なタグ。
#foot_editmenu: 背景は黄色。「新しいページ」「差分」などのリンクが入る。NetFrontでの表示が変な箇所でもある。
#footer: 包み。背景は水色。
#recommend: 色指定が無いので#footerの水色が見える。「おすすめリンク」「 | 転職ならen |」などが入る。エン・ジャパンという会社と＠ウィキを運営するアットフリークス関連のリンクである。