段組の応用とは

戻る

段組の応用

内之浦湾の初日の出

段組のレイアウト比較

  •  のページでは、表と段組とグレイボックスのテストをしました。表の数値は、左がCENTER:160で、右がCENTER:500|cと設定。段組 のおまじないに、左テキスト部分にグレーボックスの画像。右テキスト部分にコメントを入れました。その表示画像が以下のとおりです。レイアウトが良いですね。
    風景写真コ メ ン ト

    日の出1

    2009年の内之浦湾の日の出。真っ暗な夜が白み始めました。今年は、雨にたたられずに初日の出を拝むことが出来そうです。

    日の出2

    先ほどよりもだいぶ白々としてきました。もうそろそろ夜が明けるでしょう。

    日の出3

    いよいよ初日の出の瞬間です。太陽は毎日上がるのだが、この一瞬には不思議な力を感じます。今年も良い年でありますように。今回の年末年始も仕事で終わり、仕事で始まりました。


>
|CENTER:160|CENTER:500|c
|~風景写真|~コ メ ン ト|
#style2(style=width:30%;float:left;text-align:left){{
&greybox(swfu/d/hinode1.jpg,日の出1,group){&ref2(swfu/d/hinode1.jpg,nolink,30%,日の出1);};
}}
#style2(style=width:60%;float:left;text-align:left;margin-left:10px){{
2009年の内之浦湾の日の出。真っ暗な夜が白み始めました。今年は、雨にたたられずに初日の出を拝むことが出来そうです。
}}
#clear
#style2(style=width:30%;float:left;text-align:left){{
&greybox(swfu/d/hinode2.jpg,日の出2,group){&ref2(swfu/d/hinode2.jpg,nolink,30%,日の出2);};
}}
#style2(style=width:60%;float:left;text-align:left;margin-left:10px){{
先ほどよりもだいぶ白々としてきました。もうそろそろ夜が明けるでしょう。
}}
#clear
#style2(style=width:30%;float:left;text-align:left){{
&greybox(swfu/d/hinode3.jpg,日の出3,group){&ref2(swfu/d/hinode3.jpg,nolink,30%,日の出3);};
}}
#style2(style=width:60%;float:left;text-align:left;margin-left:10px){{
いよいよ初日の出の瞬間です。太陽は毎日上がるのだが、この一瞬には不思議な力を感じます。今年も良い年でありますように。今回の年末年始も仕事で終わり、仕事で始まりました。
}}
#clear


段組4列スタイルの応用(検証1) 

  • 以下はそのおまじないです。
    >
    #style2(style=width:22%;float:left;text-align:left){{
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥1,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥1,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥1,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥1,500};>FrontPage]]
    }}
    #style2(style=width:22%;float:left;text-align:left;margin-left:5px){{
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,000};>FrontPage]]
    }}
    #style2(style=width:22%;float:left;text-align:left;margin-left:5px){{
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,500};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥2,500};>FrontPage]]&br;
    }}
    #style2(style=width:22%;float:left;text-align:left;margin-left:5px){{
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥3,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥3,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥3,000};>FrontPage]]&br;
    [[&ref2(swfu/d/09azipasuta.jpg,nolink,,画像の説明);>FrontPage]]&br;[[&size(12){鯵パスタ¥3,000};>FrontPage]]&br;
    }}
    #clear


表だけの場合。(表と表の間に段落を挿入)

  • 表と表のおまじないの間に段落を入れて、前の条件を引き継いだままで、一行間を空けました。
画像の説明画像の説明画像の説明画像の説明
鯵パスタ¥1,000鯵パスタ¥1,500鯵パスタ¥2,000鯵バスタ¥2,500


画像の説明画像の説明画像の説明画像の説明
鯵パスタ¥1,000鯵パスタ¥1,500鯵パスタ¥2,000鯵バスタ¥2,500


画像の説明画像の説明画像の説明画像の説明
鯵パスタ¥1,000鯵パスタ¥1,500鯵パスタ¥2,000鯵バスタ¥2,500


  • おまじない
| &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); |
| 鯵パスタ¥1,000 | 鯵パスタ¥1,500 | 鯵パスタ¥2,000 | 鯵バスタ¥2,500 |
&br;
| &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); |
| 鯵パスタ¥1,000 | 鯵パスタ¥1,500 | 鯵パスタ¥2,000 | 鯵バスタ¥2,500 |
&br;
| &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); | &ref2(swfu/d/09azipasuta.jpg,nolink,100%,画像の説明); |
| 鯵パスタ¥1,000 | 鯵パスタ¥1,500 | 鯵パスタ¥2,000 | 鯵バスタ¥2,500 |


アンケート

  • このページはあなたにとって参考になりましたか?
選択肢 投票
参考になった 28  
もっと詳しく 1  
分かりにくかった 0  
  • こんなHPあったんですね。超参考になります。 -- ゆたかん 2009-10-11 (日) 10:23:42
  • コメントありがとうございました。ご参考にしていただければ幸いです。 -- nao 2009-10-17 (土) 20:33:55
  • ちょうどここで行き詰っていました非常に参考になりましたありがとうございました。 -- Cool Banana 2009-10-27 (火) 10:08:21
  • どういたしまして! -- nao 2010-04-10 (土) 01:35:39
  •  何時も参考にさせて頂いております。段組のも様々な応用例があり助かっています。さて、ここで一つ何度やっても出来ない段組があります。検索で情報収集いたしましたが、決定的な解決に至っておりません。と言うのは、左側にファイルを貼り付けるのは同じなのですが、右側にYoutubeとかの添付コードをはりつけて、そのページの中で動画を再生する場合、なかなか横並びにならず、困っております。
     欲を言えば、動画そのままではなく、表に同じサイズのファイルを貼り付けその画像をクリックすると再生が始まる。段組の中でそんな事が出来るものなのでしょうか?

     現在横2列で縦に長く段組を行い、左側に静止画像、右側に静止画像をクリックするとyoutubeu等の再生が始まるようにする事を悪戦苦闘しています。何か良いアドバイスをご教示いただけませんでしょうか?よろしくお願い致します。 -- yumeyutaka 2010-05-01 (土) 21:29:50
  • ただ今、本業が忙しく検証する時間がありません。ごめんなさい。

    ところで、段組よりも表を使う方法もご検討下さい。結構いろんなことが出来そうです。表を応用するとその可能性は大ですよ。このおまじないの記録と北研の解説をご検証頂いて、何か組み合わせが出来ませんか? -- nao 2010-05-03 (月) 00:46:11
  •  今年は、全国的に五月晴れの天気に恵まれ、漸く穏やかな陽気になってきました。ゴールデンウイーク中にも関わらず対応頂きご高配ありがとうございます。
     お忙しいとの事で、お手数をお掛けいたしました。今後の対応に期待したいところです。私もこの連休中様々に試みていますが、なかなかこれはという解決策に辿り付けておりません。一応表示できる所までは漕ぎ着けたのですが、表示バランスがよくありません。同じ表示ピクセルにするのですが、横並びの状態に、上がり下がりが出来て、統一感がありません。
     ご教示の、表の中に埋め込む方法のご教示ありがとうございます。早速試みてみたいと思います。今後とも宜しくお願い致します。ありがとうございました。 -- yumeyutaka 2010-05-04 (火) 11:43:40
  • 参考になりました。またお邪魔します!

    折角なので、一つ質問を・・・。大魔王さんがやっている「ソースコード(?)」をホームページに載せるのは、どうやってらっしゃるのですか?(普通にやると消えますよね?)

    お時間のある時、教えてください。 -- shin2 2015-02-10 (火) 20:47:21

認証コード(4837)