スケジュール
  • [TOP] スケジュール準備中です
  • [レディース] TR18:00＠しおさい

OTHERテンプレート

THE OFFICIAL WEB SITE
ホーム > OTHERテンプレート
divやpに.box_pinkbg
divやpに.box_orangebg
divやpに.box_pinkbgと.ll
.box_pinkbgを
複数行で使用
  • ulタグに.list_orange
  • デフォルトのリストのオレンジバージョン
  • ulタグに.checklist
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • ulタグに.checklist_orange
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • ulタグに.dotlist
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • ulタグに.dotlist_orange
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • ulタグに.kakulist
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • ulタグに.kakulist_orange
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
↓hrタグのみ
↓hrタグに.thick
↓hrタグに.thin
↓hrタグに.thickdot
↓hrタグに.thindot
dtテキスト
dlタグに.listviewを付加しています
リンクリンクテキストテキストテキストテキストテキスト。
dtテキスト
テキストテキストテキストテキストテキスト。
見本
dtに.navyを付加すると左の表示になります。
テキストテキストテキストテキストテキスト。長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
dtテキスト
dl内でdtとddをdivで囲うと幅がそろいます。 リンクリンクdt幅を指定するにはdlに.dt_w3～.dt_w7を追加。
dtテキスト
テキストテキストテキストテキストテキスト。
見本
dtに.navyを付加すると左の表示になります。
テキストテキストテキストテキストテキスト。長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
dtテキスト
dl.listviewをdiv.list_03itemで囲うと3列のfloatになります。
dtテキスト
dl.listviewをdiv.list_03itemで囲うと3列のfloatになります。
dtテキスト
dl.listviewをdiv.list_03itemで囲うと3列のfloatになります。
dtテキスト
dl.listviewをdiv.list_02itemで囲うと2列のfloatになります。
dtテキスト
dl.listviewをdiv.list_02itemで囲うと2列のfloatになります。
dtテキスト
dl.listviewをdiv.list_02itemで囲うと2列のfloatになります。
簡易グリッドシステムを適用しています

.grid0: 横100％の親（このブロックの幅）
.grid1: 左右が空く親
.grid1_in：.grid1内で左を少し空ける
.grid2: .grid1_inと同じ左右の空き
.grid_c: センター寄せの親
.grid0.cols3,.grid2.cols3：直下の.gm4を左寄せで3つずつ並べる
.grid0.cols4,.grid2.cols4：直下の.gm3を左寄せで4つずつ並べる
.g1～.g12：子ブロック
.gm1 ~ .gm12：左右にmarginをとった子ブロック

この幅のボックスは.grid1　h2タイトル

.gird1の中に.grid1_inのdivを入れるとこの幅　h3タイトル

.grid1を使わずに最初からこの幅にしたいブロックには.grid2
ボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー

赤文字の場合のカラーコード(b40000)は.txt_red、ボディコピーboldは.txt_bold、ボディコピーboldで赤は.txt_red.txt_boldボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
文章途中にリンクが出てきたときボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー。

aタグに.a_4kakuでこのリンク

.btn.navy .btn.navy .btn.white .btn.gray

左に画像がある場合のテキスト配置です。

.box_img_lで囲って画像はdiv.img、テキスト側はdiv.txtで囲みます。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

.box_img_rで囲って画像はdiv.img、テキスト側はdiv.txtで囲みます。右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

div.imgに.w40pcを付加すると、ウィンドウ1200px以下では画像の最大幅が40％指定になります

画像が左でも右でも同じです。

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたいです。 正確な数字は決めます。

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

右に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。右に画像があ る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたいです。 正確な数字は決めます。

.box_grayで囲むとこのボックスと同じ背景と余白がつきます。ボックスの下のマージンはmb5~mb60まで5刻みでclassを作成していますのでそれを使用してください。
注意書き注意書き注意書き注意書き注意書き注意書き

タイトルのあるグレー枠

.box_grayで囲んだ中にp.ttlを入れるとタイトル表記になります。

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

  • 箇条書きイメージ
  • コンテンツのメイン部分でulを使用したときのデフォルトです。箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

タイトルタイトルタイトル

白背景のボックスは.box_wh、タイトルはp.ttlです。注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き 注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ

タイトルタイトルタイトル

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意 書き注意書き注意書き注意書き注意書き注意書き注意書き

タイトルタイトルタイトル

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意 書き注意書き注意書き注意書き注意書き注意書き注意書き

タイトルのあるグレー枠

注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き 注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたいで す。　正確な数字は決めます。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に画 像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたいで す。　正確な数字は決めます。

  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • .grid1や.grid2、.grid_cの中で.gm6をつけたブロック要素はこの幅になってフロートされます。
  • .gm1～.gm12まであり、それぞれ12等分した幅×〇個分です。箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • .g1～.g12にすると、間が空かずに要素が並びます。箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • .grid1や.grid2、.grid_cの中で.gm4をつけたブロック要素はこの幅になってフロートされます。イメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • .grid1や.grid2、.grid_cの中で.gm3をつけたブロック要素はこの幅になってフロートされます。箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
  • 箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
    2行の時箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ箇条書きイメージ
class='fit'画像の横幅100％にするには、imgタグに.fitをつけてください。
class='fit'

.grid1や.grid2、.grid_cの中で.gm6をつけたブロック要素はこの幅になってフロートされます。

このエリアは.grid0の中に.gm6.mb55を2つ並べた例です。 ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

スマホでのみmargin-bottom

.smb5~.smb60をつけるとスマホでのみmargin-bottomがつきます。 ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

このエリアは.grid0.cols3の中に.gm4を3つ並べた例です。
1行のみなら.cols3は省略できます。
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

このエリアは.grid0.mb55.cols4の中に.gm3を4つ並べた例です。
1行のみなら.cols3は省略できます。
ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー
class='fit'

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピー ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディ ピーボディコピーボディコピーボディコピーボディコピーボディコピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。
左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

左に画像がある場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。左に る場合のテキスト配置です。ウィンドウサイズが狭まった時は、テキスト幅が縮まっていくイメージです。

※ただし、ある程度幅が短くなってきたら、画像の横幅の％とテキスト幅の％とでどちらも縮小していくようにしていきたい です。正確な数字は決めます。

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピーボディ コピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピーボディ コピーィコピーボディコピー

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピーボディ コピーィコピーボディコピー

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピーボディ コピーィコピーボディコピー

h4タイトルh4タイトルh4タイトルh

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピー
ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー ボディピーボディコピーボディコピーボディコピーボディコピーボディ コピーィコピーボディコピー

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピー

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピー

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピ

h4タイトルh4タイトルh4タイトル

ボディコピーボディコピーボディコピーボディコピーボディコピーボディコピー
  trかthに.bgをつけると背景付
 ththththththththththththththth
 ththththththththththththththth
通常のth
 tableに.grid2を付加 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
  table.fitは幅100％になります
 ththththththththththththththth
 ththththththththththththththth
th02th02th02
 div.tablewrapで囲むとスマホでスクロール可能になります tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
th02th02th02
 tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd tdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
dlタグに.listviewを付加しています
ラベル .listviewの中で.labelをつけると左の四角になります。
リンクリンク左は普通のリンク。
PAGE TOP PAGE TOP