人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページビルダー19に関する質問です。
以前の質問と一部かぶってますが、既存のページに縦・横の
フレームがあります。その右側に入れ子で私がホームページ
をつくるのですが、社員紹介のリンクをいれて、座席表を
つけたいと思ってます。エクセルでは、コピペをすると
太いテーブルになり、私の目標が達成できない状態です。
座席表の線は細くしたいです。なお、座席表には、名前を
いれて、名前にリンクをはって、リンクをクリックすると
同一ページの座席表の下部に社員の紹介がでるように、したいです。
社員の紹介は、エクセルでいいです。
どうか、ご教示ください。よろしくお願いします。


●質問者: meichi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●200ポイント ベストアンサー

表の枠線を細くするには、表の属性を編集するといいようです。

・表の枠に色をつけたり、太さを変更する
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=047821

「罫線の幅」を「0」ピクセル、「枠表示」にチェックが入った状態のままで「1」ピクセルに設定してみてください。
※「セル内の余白」にも適当な数値を設定しておいた方がいいと思います。(枠線とセル内のテキスト等との間隔です。)


※CSSでも設定できるようですので、参考情報としてどうぞ。

・表の枠や線の色、種類を部分的に変更したい
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=054066


社員紹介についてですが、そのような動作はjavascriptを使う事になると思います。
ホームページビルダーには、そのような動作を行うサンプルスクリプトは含まれていないようです。

・サンプル スクリプトの機能一覧
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=046607


希望のような動作を行うスクリプトを書いてみたので、編集スタイルを「エディターズ」にして、HTMLソースを編集してみてください。(jQueryを使います。)

・HTML例(※名前にリンクを張る必要はありません)

<table id="seating-plan" border="1" cellspacing="0" cellpadding="3">
 <tr>
 <td class="a">A</td><td class="b">B</td><td class="c">C</td>
 </tr>
 <tr>
 <td class="e">E</td><td class="f">F</td><td class="g">G</td>
 </tr>
</table>
<div id="profile">
 <table class="a">Aのプロフィール</table>
 <table class="b">Bのプロフィール</table>
 <table class="c">Cのプロフィール</table>
 <table class="d">Aのプロフィール</table>
 <table class="e">Bのプロフィール</table>
 <table class="f">Cのプロフィール</table>
</div>

※かなり省略していますが、ポイントは以下の通りです。
・それぞれの名前を囲むtdのクラス名とプロフィールのテーブル(※エクセルからペーストすると表になるのですね?)のクラス名を同じにしておきます。
・座席表のテーブルと、プロフィールのテーブルを囲むidは別のものを指定しておきます。

・CSS例(初期状態でプロフィールをすべて非表示にするスタイルシートです。)

#profile table {display:none;}

・jQuery例

$(function(){
 $( "#seating-plan td" ).click(function() {
 var pid = $( this ).attr("class");
 $("#profile table").hide();
 $("table." + pid).show();
 });
}); 


・jQuery
http://jquery.com/

・How jQuery Works
http://learn.jquery.com/about-jquery/how-jquery-works/


【※ 追記 ※】

もう一つの新しい質問の方も少し変更すると可能です。
アイコン画像の下に表示する内容のボックスを記述する場合です。

・HTML例

<img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像1の内容?</p>
<img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像2の内容?</p>
<img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像3の内容?</p>
<img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像4の内容?</p>
<img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
<p class="info">画像5の内容?</p>

※アイコン画像すべてに同じクラス名を指定しておきます。


・CSS例(初期状態で非表示にするスタイルシート)

.info {display:none;}

・jQuery例

$(function(){
 $( "img.menu-ico" ).click(function() {
 $( this ).next(".info").toggle();
 });
});


もう一つ、アイコン画像と内容のボックスを1セットにして同じ要素で囲む場合です。

・HTML例

<div class="box">
 <img src="icon1.gif" width="130" height="55" border="0">
 <p class="info">画像1の内容?</p>
</div>
<div class="box">
 <img src="icon2.gif" width="130" height="55" border="0">
 <p class="info">画像2の内容?</p>
</div>
<div class="box">
 <img src="icon3.gif" width="130" height="55" border="0">
 <p class="info">画像3の内容?</p>
</div>
<div class="box">
 <img src="icon4.gif" width="130" height="55" border="0">
 <p class="info">画像4の内容?</p>
</div>
<div class="box">
 <img src="icon5.gif" width="130" height="55" border="0">
 <p class="info">画像5の内容?</p>
</div>

※画像と内容を囲むボックス同士に同じクラス名を、さらに表示する内容のボックス同士に同じクラス名を指定しておきます。

※CSS例は上記と同じです。

・jQuery例

$(function(){
 $( "div.box" ).click(function() {
 $( this ).children(".info").toggle();
 });
});

meichiさんのコメント
大変、お忙しい中、ご回答ありがとうございます。m(_ _)m 私、以前にも、かなり、はてなで大変お世話になって意地でHPを完成させました。 今、おかげ様で、大好評です。いつも、宣伝するときには、自力ではできず、 ネットで教えてもらったと言ってます。 すみません、まだ会社からHPをつくってくれと言われてないのですが、 私の意地で、すいません。事前に準備したいのです。 また、質問がいくつも、あると思いますが、皆様のお力を借りたいと 思います。 よろしくお願いします。すみません、いま頭がまわってないので、 時間があるときに、ゆっくりやってみます。 ちょっとしか、試しできませんでした。どうか、ご容赦ください。 かなり、いい回答をいただいたと思ってますので、これで回答を しめます。ありがとうございました。m(_ _)m

meichiさんのコメント
それにしても、わたし、かなり、皆様にかなり難題を出してるんですね。 すみません、要望が多くて・・・

meichiさんのコメント
あと、すみません、やってみてわからないときは、コメントで お願いします。ご協力をお願いします。

rouge_2008さんのコメント
分からない所を返信で教えていただければ調べてみます。 ※もう1つの質問についてもこの回答で可能だと思うので、キャンセルしてはいかがでしょうか?(違う部分が多い時は、その時にまた質問し直せばいいと思いますので・・・) それから、以前のコメントアドバイスへのポイント送信ありがとうございます。 有り難く受け取りました。

meichiさんのコメント
コメント、ありがとうございます。 おっっしゃるとおり、いったんキャンセルします。 本当に、お世話になります。m(_ _)m

meichiさんのコメント
すいません、早速質問があります。 座席表は、今日は、もとめられなかったのですが・・・・ (わたしのなかでは、今後やりたい・・・すみません、勝手ですが) .info {display:none;} と $(function(){ $( "div.box" ).click(function() { $( this ).children(".info").toggle(); }); }); は、HTMLのどこにいれたらいいんでしょうか。 そもそも、jQueryとCSSとは、そもそも何かさっぱりです。 すみません、これから外出します。また、自分でも調べてみますが、 まったく、ズブの素人のわたしに教えていただけますと助かります。

rouge_2008さんのコメント
jQueryはjavascriptのライブラリです。 ほとんど意識する事なく、複数ブラウザに対応したjavascriptコードを書く事が可能になります。 「&lt;head&gt;」タグ内で「&lt;script&gt;」の「src」でjQueryファイルを読み込んだ後、「&lt;script&gt;」?「&lt;/script&gt;」の間に記述します。 詳しくは回答内の参照ページ「How jQuery Works」を確認してください。 CSSはスタイルシートというHTMLを装飾する技術です。 W3Cでは、「&lt;font&gt;」「&lt;b&gt;」などのHTMLタグでHTML文書を直接装飾する事を非推奨とし、スタイルシートで装飾する事を推奨しています。 「&lt;head&gt;」タグ内で「&lt;style&gt;」?「&lt;/style&gt;」の間に記述します。 CSSの書き方等、基本的な事は以下のページを確認してみてください。 ・トップページ > CSSの基本 (HTMLクイックリファレンス) http://www.htmq.com/csskihon/index.shtml ・Home スタイルシート CSS CSSの基本 (TAG index Webサイト) http://www.tagindex.com/stylesheet/basic/index.html

meichiさんのコメント
本当に、ありがとうございます。m(_ _)m すみません、大幅な変更と自分では、思ってますが、、、 別立てで、質問を、たてさせて、いただきました。 もう、いまで、限界です。http://q.hatena.ne.jp/1417608613

質問者から

もう一つの質問も、今回の回答で応用すれば、達成できそうですね。
アイコンの下に、同一ページで社員の座席表がでて、名前をリンク
させてクリックすると、その下に紹介が、いまは出たら、最高です。
わからないときは、また質問するかも、しれないです。。。。。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ