ホームページビルダー19に関する質問です。

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

回答の条件
  • URL必須
  • 1人1回まで
  • 13歳以上
  • 登録:2014/12/01 12:27:16
  • 終了:2014/12/02 18:22:09

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/12/02 07:42:01

ポイント200pt

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

・表の枠に色をつけたり、太さを変更する
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();
    });
});
他6件のコメントを見る
id:rouge_2008

jQueryはjavascriptのライブラリです。
ほとんど意識する事なく、複数ブラウザに対応したjavascriptコードを書く事が可能になります。

「<head>」タグ内で「<script>」の「src」でjQueryファイルを読み込んだ後、「<script>」~「</script>」の間に記述します。
詳しくは回答内の参照ページ「How jQuery Works」を確認してください。

CSSはスタイルシートというHTMLを装飾する技術です。
W3Cでは、「<font>」「<b>」などのHTMLタグでHTML文書を直接装飾する事を非推奨とし、スタイルシートで装飾する事を推奨しています。
「<head>」タグ内で「<style>」~「</style>」の間に記述します。

CSSの書き方等、基本的な事は以下のページを確認してみてください。

・トップページ > CSSの基本 (HTMLクイックリファレンス)
http://www.htmq.com/csskihon/index.shtml

・Home スタイルシート CSS CSSの基本 (TAG index Webサイト)
http://www.tagindex.com/stylesheet/basic/index.html

2014/12/03 20:57:16
id:meichi

本当に、ありがとうございます。m(_ _)m

すみません、大幅な変更と自分では、思ってますが、、、
別立てで、質問を、たてさせて、いただきました。

もう、いまで、限界です。http://q.hatena.ne.jp/1417608613

2014/12/03 21:14:32

その他の回答(0件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512014/12/02 07:42:01ここでベストアンサー

ポイント200pt

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

・表の枠に色をつけたり、太さを変更する
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();
    });
});
他6件のコメントを見る
id:rouge_2008

jQueryはjavascriptのライブラリです。
ほとんど意識する事なく、複数ブラウザに対応したjavascriptコードを書く事が可能になります。

「<head>」タグ内で「<script>」の「src」でjQueryファイルを読み込んだ後、「<script>」~「</script>」の間に記述します。
詳しくは回答内の参照ページ「How jQuery Works」を確認してください。

CSSはスタイルシートというHTMLを装飾する技術です。
W3Cでは、「<font>」「<b>」などのHTMLタグでHTML文書を直接装飾する事を非推奨とし、スタイルシートで装飾する事を推奨しています。
「<head>」タグ内で「<style>」~「</style>」の間に記述します。

CSSの書き方等、基本的な事は以下のページを確認してみてください。

・トップページ > CSSの基本 (HTMLクイックリファレンス)
http://www.htmq.com/csskihon/index.shtml

・Home スタイルシート CSS CSSの基本 (TAG index Webサイト)
http://www.tagindex.com/stylesheet/basic/index.html

2014/12/03 20:57:16
id:meichi

本当に、ありがとうございます。m(_ _)m

すみません、大幅な変更と自分では、思ってますが、、、
別立てで、質問を、たてさせて、いただきました。

もう、いまで、限界です。http://q.hatena.ne.jp/1417608613

2014/12/03 21:14:32
id:meichi

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません