QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

テーブル編

QHMのテーブル（表）についてのテクニックです。

#html2で表の罫線を消す

QHMの表はおまじないでは罫線を消すことができませんが、以下の方法で指定した表だけ罫線を消すことが可能です。

■手順

1. #beforescriptを使用して、罫線を消すクラス(noframe)を作成します。QHMの表のクラス名は style_tableなので、このクラスの前にnoframeクラスを定義することで、子孫関係を作ります。この#beforescriptはページ内でしたらどこに書いてもOKです。
   全ページに適用したいときは、設定画面の「その他のタグ」に入れてください。ただし、そのときは #beforescript{{ と　最後の　}} は不要です。
   1. 親
      noframeクラスが親です。
   2. 子孫
      style_tableクラスが子孫です。
2. 罫線を消したい表のおまじないの前に　#html2 で親のクラス名(noframe)を指定します。
3. 表のおまじないの終わりに、#html2(</div>) を書くことで、noframeクラスの終わりを指定します。

■解説

noframeクラスがstyle_tableクラスの親になるので、noframeクラスを指定した表だけ罫線が消えます。noframeクラスを指定しないと、QHM標準のstyle_tableクラスが有効になり表に罫線が表示されます。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.noframe .style_table{
background-color:transparent;
}
-->
</style>
}}

#html2(<div class="noframe">)
CENTER:表１　罫線なし（#html2の指定あり）
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

CENTER:表２　罫線あり（#html2の指定なし）
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |

表の高さを変更する

【解説】
以下の例では、ある特定の表のみ高さを変更したい場合を考慮して、thistbl というクラス（スタイル名）を作成しています。対象の表を　#html2　で囲んでthistblクラスを指定しています。
ページ内の全部の表を対象にする場合は、この thistbl というクラスは不要です。
style_tdクラスは、QHMで定義している表のクラスです。

１．特定の表のみ高さを変更したい場合

【ソース】
#beforescript{{
<style type="text/css">
<!--
.thistbl .style_td {
    padding: 3px;
    line-height: 100%;
}
-->
</style>
}}

#html2(<div class="thistbl">)
CENTER:１．特定の表のみ高さを変更したい場合

|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

２．ページ内の全部の表に対し高さを変更したい場合
以下のスクリプトをページ内に記述するだけでＯＫです。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_td {
    padding: 2px;
    line-height: 100%;
}
-->
</style>
}}

表の表示位置を変更する

【解説】
以下の例では、ある特定の表のみ位置を変更したい場合を考慮して、tblpos というクラス（スタイル名）を作成しています。対象の表を　#html2　で囲んで tblpos クラスを指定しています。
ページ内の全部の表を対象にする場合は、この tblpos というクラスは不要です。
style_tdクラスは、QHMで定義している表のクラスです。
marginを変更して、表の表示位置を変更します。

• 右寄せの場合　：margin: auto 0 auto auto;
• 中央寄せの場合：margin: auto auto auto auto;
• 左寄せの場合　：margin: auto auto auto 0;

１．特定の表のみ表示位置を変更したい場合（右寄せの例）

【ソース】
#beforescript{{
<style type="text/css">
<!--
.tblpos .style_table {
   margin: auto 0 auto auto;
}
-->
</style>
}}

#html2(<div class="tblpos">)
CENTER:１．特定の表のみ右寄せにする場合

|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |
#html2(</div>)

２．ページ内の全部の表に対し位置を変更したい場合（右寄せの例）
以下のスクリプトをページ内に記述するだけでＯＫです。

【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_table {
   margin: auto 0 auto auto;
}
-->
</style>
}}

テーブル内にリンクを張る

おまじない

|リンク先1|#html2(<a href="http://www.google.com">googleへジャンプ</a>)|
|リンク先2|#html2(<a href="http://haik.qhmtips.com">haikユーザのためのTipsへジャンプ</a>)|

【注意】

#html2を使うときは、#html2(　)　のかっこ内には改行は使用できないため、改行は削除する必要があります。

ご意見箱

皆様のご意見をお待ちします。

• 大変有用な情報を有難うございました！ -- ひょうたん水クラブ 2010-06-24 (木) 14:03:39
• こういうまとめは本当に助かります！ありがとうございます！ -- 匿名希望 2011-05-14 (土) 22:14:14
• これを本文に適用したところメニューが表示されなくなりました。どうしたらよいでしょうか。 -- 新井 2012-12-30 (日) 17:00:44
• すぐにご対応くださってありがとうございました！ -- 天才エンジニア 2016-06-22 (水) 23:57:24

当ページは役に立ちましたか？