記事No.464 へのコメントです。
>そこで指導いただいたサンプルをそのまま該当箇所にコピペしてみたらエラーが出ましたので、サンプルのテーブルタグ位置を参考にして手を加えていたものに書き足していったら、思い通りの表示になりましたのでご報告いたします(^-^)すみません、コードをコピペするときに、余計な改行が入ってしまったようです。
# エディタの折り返し位置に改行が入ってしまいました。
>>ただ、横並びだと、カテゴリの数が増えたときに、画面からはみ出させるか、カテゴリ名の表示幅を縮めるかする必要があるので、そこをどうするか考えどころですね。
>そうですね、うちは今のところはカテゴリが4つ以上に増える予定はないので、とりあえずカテゴリのセルを幅指定して対応しています。ただ、カテゴリ・サブカテゴリ共に増やす時は表示が崩れないかどうか、チェックの必要がありそうです。
>リスト表示、管理用、検索窓などはこれから縦並びにして追々位置の微調整をする予定です。…こう考えると、やっぱり左右表示の方が理に適っていますね(笑)
WEBブラウザだと、横のスクロールはあまり使わないので嫌がられるんですよね。
でも、mimiさんのように、それを理解して使われるなら安心ですので。(^^
>ブラウザだけではなく解像度とかモニタとか、人によってwebを見る環境って全然違いますものね。せめて少しでも多くの環境で見やすいようチェックしたいのですが、なかなか上手くいかず出先で自分のHPを見て後ろにひっくり返りたい気持ちになることが多々あります・・・(^ ^;
表示が崩れても見えるのならいいのですが、JavaScriptだとメニューの展開すらできないときがあるので、その先に進めなくなっちゃってすごく悲しかったりします。(^^;
>お陰様で、これでリンク・日記・エッセイと全てこちらでお世話になることができそうです。タグ打ち無し、FTPソフトを立ち上げなくても簡単更新、ものぐさな私には理想かもしれません(笑)
面倒くさがりの私が作ったので、ものぐさな方向けなのかもしれません。（笑
以下に、改行位置を修正したサンプルコードを書いておきます。
sub menu {
&head;
my ($tmp_catid, $tmp_subid, $catdata, $subdata);
my (%tmp_list, %tmp_sublist) = ();
my ($cat_max) = &LoadCategory;
my ($cols) = $cat_max + 1;
$html .= <<_HTML_;
<table width="100%">
<tr>
<td colspan="$cols" <img src=\"$imgdir/$menu_image\"></td>\n
</tr>
<tr valign="top">
_HTML_
@tmp_cat = split (/\:/, $in->{'catid'});
$tmp=0;
foreach $tmp_catid (keys %category) {
$catdata = &GetCategory ($tmp_catid);
$tmp_list{$catdata->{'group'}."_".$catdata->{'catname'}."_".$catid} = $tmp_catid;
}
foreach (sort keys %tmp_list) {
$catdata = &GetCategory ($tmp_list{$_});
$tmp_count=0;
foreach $tmp (@tmp_cat) {
if ($tmp eq $catdata->{'catid'}) {
$temp = $in->{'catid'};
$temp =~ s/:$tmp:/:/g;
$temp =~ s/^$tmp://;
$temp =~ s/:$tmp$//;
$html .= "<td><a href=\"$script?mode=menu&catid=$temp&\" target=\"menu\" class=\"menu\"><img src=\"$imgdir/$dot_open\" border=0> $catdata->{'catname'}</a>\n";
$tmp_count++;
my ($scat_max) = &LoadSubCategory;
foreach $tmp_subid (keys %subcategory) {
$subdata = &GetSubCategory ($tmp_subid);
$tmp_sublist{$subdata->{'group'}."_".$subdata->{'subname'}."_".$tmp_subid} = $tmp_subid;
}
foreach (sort keys %tmp_sublist) {
$subdata = &GetSubCategory ($tmp_sublist{$_});
if ($subdata->{'catid'} eq $tmp) {
$html .= "<br><a href=\"$script?mode=vew&subid=$subdata->{'subid'}\" target=\"vew\" class=\"menusub\"><img src=\"$imgdir/$dot_image\" border=0> $subdata->{'subname'}</a>\n";
}
}
$html .= "</td>\n";
}
}
if ($tmp_count == 0) {
$temp = $in->{'catid'};
$temp .= ":$catdata->{'catid'}";
$html .= "<td><a href=\"$script?mode=menu&catid=$temp\" target=\"menu\" class=\"menu\"><img src=\"$imgdir/$dot_close\" border=0> $catdata->{'catname'}</a></td>\n";
}
}
$html .= <<_HTML_;
<td>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$script?mode=text target="vew" class="menu"><img src=\"$imgdir/$dot_image\" border=0> テキスト表示</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$script?mode=list target="vew" class="menu"><img src=\"$imgdir/$dot_image\" border=0> リスト表示</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$script?mode=vew&cmd=newlist target="vew" class="menu"><img src=\"$imgdir/$dot_image\" border=0> NEWLIST</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$info target="vew" class="menu"><img src=\"$imgdir/$dot_image\" border=0> INFO</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$admscript class="menu" target="vew"><img src=\"$imgdir/$dot_image\" border=0> 管理用</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<a href=$home target="_top" class="menu"><img src=\"$imgdir/$dot_image\" border=0> HOME</a><br>
<div><img src="$imgdir/line2.$ext" width=150 height=5></div>
<form action="$script" method="post" target="vew">
<input type="hidden" name="mode" value="vew">
<input type="hidden" name="cmd" value="search">
<input type="text" name="word" value="" style="width:150px;"><br>
<div align="center"><input type="image" src="$imgdir/search.$ext" border=0 width=80 height=21 alt="search!"></div>
<br>
</form>
</td>
</tr>
</table>
</body></html>
_HTML_
}
[ この記事にコメントを返信する ] [ 原文引用 ]