- ベストアンサー
あかさたな・・・順でタイトルを表形式に管理したい
以下のようなことを考えております。何か良い方法はございませんでしょうか。 htmlエディタでの作成を想定しております。Dreamweaverでも可。 4列の表で、ア行（あいうえお）のタイトルを掲載。 ただし、更新時に"あ"のタイトルを追加しようとするとき、”い”行以下を自動的にうしろのセルに移行したいのです。 列は、4列で固定。行は増えて構わない。 例えば、一列でデータを作っていき、表示させるときは、4列にできればよいと考えたのですが、そのようなCSSは可能なのでしょうか。
- tomo0117
- お礼率50% (43/86)
- ホームページ作成ソフト
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
それは表ではない気がします。 縦と横の交わりに意味はなさそうですので、ただ単に、段落だとしたら、3段で <html> <head> <style>p{width:33%;height:2em;float:left;}</style> </head> <body> <p>テキスト1</p> <p>テキスト2</p> <p>テキスト3</p> <p>テキスト4</p> <p>テキスト5</p> <p>テキスト6</p> <p>テキスト7</p> <p>テキスト8</p> <p>テキスト9</p> <p>テキスト10</p> <p>テキスト11</p> </body> </html> もともとの質問の4段なら、<style>の中のwidth:33%をwidth:24%に変えてください。 また、段落ではなくリストなら、<ul><li></li></ul>で組まれて、<style>の中のpをulに変えてください。 Dreamweaver使うのははやすぎると思われます。手打ちでhtmlやcssの基本や考え方を身につけてから、Dreamweaverを使われることをお勧めします。まずはどんな意味がテキスト#にあるのかを考えてマークアップされることです。
その他の回答 (1)
- violet430
- ベストアンサー率36% (27472/75001)
Windowsでは五十音順というソートはできません。文字コード順になってしまいます。 そのため、五十音順にみせるには、ふりがなの項目を作成してふりがなをキーにしてソートする必要があります。Excelのような表計算ソフトなら容易にできますね。
補足
回答ありがとうございます。 ふりがな項目は、難しいのです。 私の説明が悪かったかもしれないのですが、以下のように 1列で表示していたところを3列に変更したい。 目的は、後から挿入しても3列できちんと並ぶようにずれて 表示させたいので。 "あ行"の中に入力しているデータで、あいうえおのデータが 入っているが、"あ"のデータを追加すると、それ以降を 1つづつずらして表示したいため。 <td><p>テキスト1</td></p> <td><p>テキスト2</td></p> <td><p>テキスト3</td></p> <td><p>テキスト4</td></p> <td><p>テキスト5</td></p> <td><p>テキスト6</td></p> のように入力したデータをCSSを利用して <table> <tr> <td> <p>テキスト1</p> </td> <td> <p>テキスト2</p> </td> <td> <p>テキスト3</p> </td> </tr> <tr> <td> <p>テキスト4</p> </td> <td> <p>テキスト5</p> </td> <td> <p>テキスト6</p> </td> </tr> </table>
補足
ありがとうございます。深謝！！ うまくいきました。 そこで、大変勝手なのですが、こんかい行っておりますのでは、 あるタイトルを入れるページで、あかさたな順にページを作っているのです。 そこで、タイトルにボーダーを入れたくなり、下記CSSを作成して <div class="title-hight"> </div> で<p>タグを囲みました。 #abcd .title-hight { height:650px; border-top:1px solid #888; border-right:1px solid #888; } #abcd p { width:24%; height:4em; float:left; border-left:1px solid #888; border-bottom:1px solid #888; padding:5px 0 0 5px; } #abcd p a { text-decoration:underline; } ほぼうまくいったのですが、 ら行など、数が少ないところは、 <div class="title-hight" style="height: 150px;"> として、height を短くしたのです。 そうしたところ、一番右側の横ボーダーに関して、4px隙間が出てしまうのです。 また、高さも微調整が難しいのですが、こちらは各ヤ行 マ行など調整していくしか無いとは思っております。 右側のボーダーに関して対応はありますでしょうか。