Wikipedia:井戸端/subj/テンプレートでスタイルをうまく整える方法
出典: フリー百科事典『ウィキペディア（Wikipedia）』
テンプレートでスタイルをうまく整える方法
こんばんは。 テンプレートをBoxboxを使ってテーブルの中に入れた時と、そのまま縦にテンプレートを並べた時で、体裁がずれてしまう場合があります。 style="float:left;"にしているからのような気がするのですが、うまい解決法をご存知の方いらっしゃいませんでしょうか？
| Babel - Userbox | ||||
|---|---|---|---|---|
|
|
|
この利用者は運転免許を取得してから一年以上期間が経過していません。 |
|---|
体裁が崩れてしまう例
| mixi | この利用者はmixiユーザーです。 |
よろしくおねがいします。--tail_furry 2007年1月15日 (月) 16:41 (UTC)
- 勝手ながら、井戸端に余計なカテゴリが付くため、テンプレート部をコメントアウトにし、擬似テンプレートに差替えさせて頂きました。--٢١٩.١٧٤.١٥٨.٢٢٥ 2007年1月15日 (月) 17:02 (UTC)
どのような並び方を意図されているのでしょう。提示された例では「並べたとおりに並んでいる」としか申せません。--cpro 2007年1月16日 (火) 13:55 (UTC)
- Boxboxを使った場合には、上手く縦に順番に並んでいるのですが、Boxboxを使わずに、テンプレートを縦に並べただけでは、ユーザーボックスが縦に並ばずに横に並んでしまいます。
- {{User Wakaba}}
- {{User mixi}}
- ↑こんな感じで縦につなげて書いた場合です。
- サンドボックスを使ってユーザーボックスのテストをしてみたのですが、横方向に並んでしまいます。
- 縦に並ぶのではなく横に並ぶのがどうもユーザーボックス自体の仕様じゃないかと感じているのですが、縦方向に並ばすためには、やはりBoxboxを使うなどの工夫が必要でしょうか？--tail_furry 2007年1月16日 (火) 15:04 (UTC)
- 何のためのユーザーボックスですか。表示する必要ないでしょう。--PeachLover ももがすき。 2007年1月17日 (水) 12:48 (UTC)
- あなたのユーザーボックス否定論と、ここでの質問の回答とは関係ありません。場所をわきまえなさるように。--٢١٩.١٧٤.١٥٨.٢٢٥ 2007年1月18日 (木) 04:50 (UTC)
うまくユーザーボックスが並んでいる人の利用者ページの「編集」をクリックして（実際に編集する必要はありません）テキストボックス内のソースを見て真似すれば、おのずとうまくいくのではないでしょうか。なお、「表示する必要がない」なんて意見は「表示したい人」にとって無意味な意見ですから放っておいて構いません。--春野秋葉 2007年1月17日 (水) 12:59 (UTC)
- 利用者:リュカ/Wikipedia:バベル 検定試験にある、運転免許関係のユーザーボックスです。最初、このユーザーボックスをTemplate:Boxboxtopに入れていたのですが、運転関係のユーザーボックスのスタイルが不完全だったために、Boxboxtopの中に入らずに崩れて表示されてしまうユーザーボックスがありました。そのため、他のユーザーボックスの書式を見習って、運転免許関係のユーザーボックスのスタイルを修正したのですが、今度は、今まで上手く表示されていた利用者:リュカ/Wikipedia:バベル 検定試験の、運転免許関係のユーザーボックスをリストアップしている箇所の表示内容が崩れてしまいました。ユーザーボックスを作られた方のページのレイアウトを崩してしまうのが申し訳なかったので、崩れないようなユーザーボックスのスタイルにしたいと思ったわけです。それとも、ユーザーボックスを作られた方のほうで、表示している部分を直してもらった方がいいものなんでしょうか？--tail_furry 2007年1月17日 (水) 13:07 (UTC)
- まずはCSSのfloatについて超大雑把に説明します。float:left; したブロック（float:left; を指定した div やテーブルなどの「ひとかたまり」と考えてください）A があると、後に続く文章や他のブロックは、スペースがある限り A の右側に回り込んで表示しようとします。スペースがないと、諦めて A の下から表示を始めます。試しにブラウザの幅をぐーっと縮めてみてください。あるタイミングで{{User mixi}}の部分が{{User Wakaba}}の右に回り込むのを諦めて下に行くはずです。
- boxbox は幅250ピクセルという狭い領域を生成しますので、この中にユーザーボックスを置いた場合に「縦に並ぶ」のは、実は回り込みを諦めたユーザーボックスたちの成れの果てなのです。boxbox の中に{{User Wakaba}}{{User mixi}}と並べて書いても変化はないはずですのでお試し下さい。
- 今回の場合解決方法は2つあります。ひとつは、それぞれのユーザーボックスの直後に<br style="clear:both;" />と入れること。回り込みを解除するおまじないと思ってください。もうひとつは、boxbox と同じように狭い幅を指定したブロックを作成し、その中にユーザーボックスを押し込むことです。具体的には、<div style="width:250px;">{{User Wakaba}}{{User mixi}}</div>のようにします。
- なおユーザーボックスに関しては、上でPeachLoverさんが発言されているように、ユーザーボックスの存在そのものに疑問を持つ方も少なくありません（私もそのひとりです）。当初の目的と方向性を見失ってユーザーボックスが乱立している現状をなんとかすべくウィキプロジェクトで議論が行われていますので、興味があれば是非ご覧下さい。--cpro 2007年1月18日 (木) 05:08 (UTC)
- こんばんは。cproさんの丁寧な説明でおおよそ分かりました。どうもありがとうございます。ユーザーボックスを2つ続けて書くと右に回り込むのはユーザーボックスの仕様のようですね。boxboxを使った時に上手く縦に並んでいるのように見えるけど、それは、たまたま回り込みを諦めたユーザーボックスが並んでいるだけというのも納得しました。（boxboxが幅250ピクセルというのは、ボクがよく調べていなかったので、今回初めて知ったのですが、それを元に考えていくと、なるほど、と思いました。）今後ユーザーボックスを使って利用者ページなどをデザインしていく際の参考になります。ありがとうございます。
- ユーザーボックスの存在そのものに疑問を持つ方が少なくないというのも今回初めて知りました。ボクはまだウィキペディアンになってもう少しで1ヶ月ですが、ユーザーボックスについて、とても面白い機能だなと思い興味を持っていて、ユーザーボックスに関して現在いろいろ学んでいる最中です。ウィキプロジェクトについても今後参考にして、機会があれば質問などもできればいいなと思っています。
- 今回のボクの質問についてご回答いただいたみなさん、どうもありがとうございました。--tail_furry 2007年1月18日 (木) 10:31 (UTC)
