X^CV[gpVbsOJ[g̃JX^}CY̕@
X^CV[gŃJX^}CY
X^CV[gpVbsOJ[g̃JX^}CY@
VbsOJ[gCGI̔r
VbsOJ[gCGI
_E[h̐\
| o^() | ۸޲݁E | _E[h | TCg}bv |
VbsOJ[gCGĨfUC̃JX^}CY̕@ VbsOJ[gCGI(CGI)̃fUC̃JX^}CY̕@

X^CV[gpVbsOJ[gJX^}CY@

PCtoMobile`Contents-Mall gݍ܂ꂽX^CV[gpfUCJX^}CY̕@ɂ‚Đ܂BX^CV[gɂВĂ݂ĂBX^CV[ĝ΂炵Ɨłł傤B

炩̃ev[gpVbsOJ[g̃JX^}CY@VbsOJ[g̃JX^}CY@
iy[WHTMLŎRɐ삵ꍇ^O̓\
PCtoMobileAContents-Cart ł́AHTML5AXHTMLɑΉĂ܂BHTML5AXHTMLgƂɂ͂BHTMLHTML5
PCtoMobile-UiUnicodeŁjCSSTvp鎞ɂ́ACSSt@CUnicode(utf-8)ɕۑȂĂ炲pBUnicodeɂ‚
VbsOJ[g̃JX^}CY̕@CSSev[gi17j̃_E[h
L̓VbsOJ[gPCtoMobile`Contents-MallɑΉfUC̖CSSev[głBX^CV[gRɃ_E[hĂgBp@͉LB܂AfUC̊mF@͂B gтX}[gtHTCg̃eXg̕@

\̃ev[g̃Tv̏ꍇA[tpXȂǂ̕KvȐݒsĂȂߓ삪s\ȂƂ낪܂BŁAfUCQlĂΏ܂B̃Tv͂B @\ƃTv

X}[gtHTCgIE9Ōꍇ̒ӓ_܂BW[hŌꍇ͖Ȃ̂łAIEX̌݊[hŃX}[gtHTCgiHTML5ACSSRjƐ\ȂƂ܂B܂AIE9 CSS3̃Of[V ɂ͑ΉĂ܂BChrome͑ΉĂ܂B

yQJ̃ev[gzi2023N43ɍXVBTCg̃̕TCY@\ɑΉBj
̒@͂ 𒲐@
XChV[ݒu@͂ XChV[ݒu@

yev[g̍\Ɨp@zi2019/2/26XVj
y1zev[g̃t@C\
@@readme.txt(̃t@C)
@@html/css/(X^CV[g)
@ @@@@/images/(摜t@C)
@@ @@@/template/(ݒ胉Cu[)
@@smart/css/style.cssiX}[gtHpX^CV[gj
@@calendar_set.pliJ_[vOj
@@set_class_pl/iTCYpj
@@carousel/iTCYpj

y2zp@
L̃J[gŗpł܂B
@@PCtoMobile/2/PC/Unicode
@@Contents-Cart
@@Contents-Mall

tH_Ƃ̂܂܂toď㏑邱ƂɂAfUCύX邱Ƃł܂B
p@F
iPjtH_Ƃ̂܂܂toď㏑܂B
iQjVXeݒy13zuTCg̎̕TCY@\vݒ肵܂B
@@@@@@@2J̃ev[g̏ꍇATCg̍̕ŏl960pxłiftHgjB
@@@@@@@@@@ݒF/auto/960/1920/
iRjݒ胉Cu[KvɉĒ܂iLQƁjB

W̃fUCɖ߂Ƃ́AuW񕜗p2J̃ev[gistandardjvKpĂBiUPAtemplatetH_͕svł̂ō폜ĂBj

y3ztemplatetH_iݒ胉Cu[j̋@\̊p@
ev[g̐ݒ胉Cu[toƃVXeݒ̃fUCɊւݒ肪Aݒ胉Cu[itemplatetH_j̐ݒ肪DIɓKp܂B

stemplatetH_̐ݒ胉Cu[t
@@pc_color.plEEEEEiPCpF̐ݒj
@@pc_css.plEEEEEiPCpX^CV[g̐ݒj
@@pc_footer.plEEEEEiPCptb^[̃JX^}Y̐ݒj
@@pc_menu_header.plEEEEEiPCpj[Ewb_[̃JX^}Y̐ݒj
@@pc_order.plEEEEEiPCptH[̃JX^}CY̐ݒj
@@pc_order_f.plEEEEEiPCptH[̃tb^[̐ݒj
@@pc_order_h.plEEEEEiPCptH[̃wb_[̐ݒj
@@pc_width.plEEEEEiPCp̐ݒj
@@k_color.plEEEEEioCpF̐ݒj
@@pc_top1.plEEEEEiPCpTOP1̐ݒ̃Tvj
@@pc_top2.plEEEEEiPCpTOP2̐ݒ̃Tvj
@@k_home.plEEEEEiKP[pHOIME̐ݒ̃Tvj
@@k_top1.plEEEEEiKP[pTOP1̐ݒ̃Tvj
@@k_top2.plEEEEEiKP[pTOP2̐ݒ̃Tvj
@@k_top3.plEEEEEiKP[pTOP3̐ݒ̃Tvj
@@k_form1.plEEEEEiKP[p₢킹̐ݒ̃Tvj

Ƃ΁Aݒ胉Cu[pc_color.plPCpJ[g̐FɊւݒłAVXeݒ炪DIɓKp܂BtɁApc_color.plT[o폜ƁAVXeݒ肪LɂȂ܂B

܂ATOP1̂؁[W̓eύX́Apc_top1.pleLXgGfB^[ŊJĕҏWĂto܂B$top1_html =<<'END_OF_FILE';`END_OF_FILE̒gҏW܂B邢́Apc_top1.pl폜ĂAVXeݒy30zugbvP̃y[WHTML̐ݒvҏW܂A$top1_html̒gRs[ėp邱Ƃł܂B

y1zPCtoMobile-UiUnicodeŁjɃev[gp鎞ɂ́At@CUnicode(utf-8)ŕۑĂ炩炲pB

VbsOJ[g̃JX^}CY̕@gݍ܂ĂX^CV[g
V‚ɕOX^CV[ggݍ܂Ă܂iy36zfUC̐ݒjBꂼꂪ̃̕fUC߂Ă܂B
  1. html/css/cart_base.cssEEEEEJ[gɕK{̃X^CV[g
  2. html/css/menu_header.cssEEEEEwb_[ƃj[ȂǑS̓IȃCAEg
  3. html/css/top_container2.cssEEEEETOP1`TOP5̃y[W
  4. html/css/goods_customize.cssEEEEEiꗗ\
  5. html/css/class_container.cssEEEEEސ
  6. html/css/detail_customize.cssEEEEEiڍ׉ʑŜ̃CAEg
  7. html/css/detail_container.cssEEEEEiڍא̃CAEg
  8. html/css/top_mypage.cssEEEEE}Cy[W̃CAEgiPCtoMobileAContents-Cartj
  9. html/css/order_form.cssEEEEEtH[̃X^CXV[giPCtoMoiblej
L̃X^CV[gɊ܂܂NXAidp邱ƂɂeՂɃy[W쐬ł܂B

NXAid͉L̐}ɂ悤ɒ߂Ă܂B X^CV[gɊւmȂꍇ͑S̓IȃCAEg͕ςɁATvǂɓeύXėp邱Ƃ߂܂BȂ玩Iɂrdn΍􂪎{ꂽy[Woオ܂Birdn̎{j
ȂAꂩ̓X^CV[gʂɗp悤ɂȂ܂AX^CV[gł悤ɂȂ邱Ƃ͑؂ȂƂƂȂ܂BЁAX^CV[gɒȂ悤ɂ߂܂B

X^CV[gɊւm̏ꍇ́Acart_base.cssȊOA܂V쐬邱Ƃł܂Bcart_base.cssshop.cgi̒ŎQƂĂX^CV[g܂ł܂̂ŁAKɒȂgp܂AK{̊OX^CV[gɂȂ܂B

X^CV[g̐ݒJ[gɕK{̋ʃX^CV[g
html/css/cart_base.css

cart_base.css͕K{̊OX^CV[głBJ[g̊{X^Ciidcontent̃X^CjJ[gŎQƂĂNXAid`Ă܂B
̎̂悤Ȃ̂ݒ肳Ă܂B
  • J[g̊{X^Ciidcontent̃X^Cj
    • Ŝ̃eLXg̑傫AFAtHg
    • formAh1Ah2Ah3̃}[W
    • N̐F
  • ̑AJ[gŎQƂĂNXAid`
NXsubmit`Ă܂BW̃fUCgƂ͍폜ĂBsubmit{^̃fUCɂ‚Ă͂̃y[W̍ŌB{^̃fUC

X^CV[g̐ݒS̓IȃCAEǧ
html/css/menu_header.css

Ŝ̊{X^C⃌CAEg͊OX^CV[gmenu_header.cssŌ肳Ă܂BɂAVXeݒyPRzŃj[S̓IȃCAEg쐬̂eՂɂȂ܂B
啝ȕύXȂ肻̂܂܎gƂł܂BiX^CV[gɂ‚ėǂȂl͂̂܂܎gƂ߂܂Brdn΍̂߂floatgpĂ܂̂ŁA̒ƃCAEgꍇ܂Bj

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • Ŝ̊{X^C
    • eLXg̑傫AFAtHg
    • bodỹ}[WƃZ^Oi\wj
    • formAh1Ah2Ah3̃}[W
    • N̐F
  • j[yуgbvʁ}
wb_[́Aid='siteHead'Œ`Ă܂Bwi摜gbv̉摜i850pxjɂȂ悤ɑgݍł܂B̔wiɃS⏤iȂǂzuł܂B
܂Aid='container'̒ɁAid='menu'yid='content'̃ubN݂Ă܂B
đS̓IȃCAEg肳ĂÃubN̒ŃNh2ApAulȂǂĒ`Ă܂B

<div id='whole_container'>
width:950px;
<div id='siteHead'>
width: 100%;
background-image: url(../images/top-bg.gif);

</div>
<div id='container'>
background: #ffffff url('../images/bg.gif') repeat-y;
width: 950px;
@ <div id="menu">
width: 198px;
j[


<div>		 <div id="content">
float:right;
width: 743px;


</div>
</div>
</div>

j[Eɕ\ɂ́j[Eɕ\@
AmazoñTChj[menu_header.css̍Ō̕iduHoverMenuvŒł܂B

iꗗ\̃JX^}CYsnoP`snoT̃X^CV[g
html/css/top_container2.css

snoP`snoTɊւX^CV[ǵAOX^CV[gtop_container2.cssŒ`Ă܂BɂAVXeݒyROz`yRSzł̃y[W쐬eՂɂȂ܂B

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • j[yуgbvʁ}
id='container2'̒ɁAid='main2'̃e[uid='side2'̃e[u݂Ă܂B
āAsnoP`T̃y[W̃CAEg肳ĂÃe[u̒łȂObN⃊Nh2Ah3ApAulȂǂĒ`Ă܂B

<div id='container2'>
width: 730px;
@ <table id="main2">
<tr><td>
float: left;
width: 519px;



</td></tr>
</table>		 <table id="side2">
<tr><td>
float:right;
width: 200px;


</td></tr>
</table>
</div>

̃ubNŁA<hr>ɂ́Aboth:clearݒ肳Ă܂̂ŁAfloat邽߂Ɏgpł܂B
idnewInfoɂoverflow:autoݒ肳ĂA̍ێł܂B

iڍ׃y[W̃JX^}CYiꗗ\̃X^CV[g
html/css/goods_customize.css

iꗗ\̂PĩCAEǵAOX^CV[ggoods_customize.cssŒ`Ă܂BɂAVXeݒyPSzňꗗ\쐬eՂɂȂ܂B

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • iꗗ\}
id='goods_customize'̒ɁAid='goodsLeft'yid='goodaRight'̃ubN݂Ă܂B
āAiꗗ\̂PĩCAEg肳ĂAubN̒ŃNh2Ah3ApAulȂǂĒ`Ă܂B

<div id='goods_customize'>
width: 359px;
@ <div id="goodsLeft">
float: left;
width: 40%;

</div>		 <div id="goodsRight">
float:right;
width: 55%;


</div>
</div>

ȂA摜݂̂̏ꍇ̉摜TCYύX́AL̂悤cart_base.css103sڂɉL̂PsljĂB

.image_only_cell img{width:100px;}

TOP1`5̃JX^}CYސ̃X^CV[g
html/css/class_container.css

iꗗ\̏㕔ɕ\镪ސ̃̕fUC肵Ă̂́AOX^CV[gclass_customize.cssłBސset_class_pltH_(ޔԍ).pľ`œo^Ă܂B̍ۂɁÃX^CV[gKp܂B

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • iꗗ\}
id='class_container'̒ŁANh2Ah3ApAulĒ`Ă܂B
class_container̃ubNł́Aoverflow: auto@`ĂAɈ̍ŕ\悤ɂȂĂ܂B

<div id='class_container'>
overflow: auto

</div>


̑fUC̃JX^}CYiڍ׃y[W̑S̓IȃCAEg
html/css/detail_customize.css

iڍ׃y[W̑S̓IȃCAEǵAOX^CV[gdetail_customize.cssŒ`Ă܂BɂAVXeݒyPSzł̏ڍ׃y[W̍쐬eՂɂȂ܂B

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • iڍ׉ʁ}
id='detail_customize'̒ɁAid='detailLeft'̃e[uyid='detailRight'̃ubN݂Ă܂B
āAiڍ׃y[W̃CAEg肳ĂAubN̒ŃNh2Ah3ApAulȂǂĒ`Ă܂B

<div id='detail_customize'>
width: 728px;
@ <table id='detailLeft'>
<tr><td>
float: left;
width: 376px;


</td></tr>
</table>		 <div id="detailRight">
float:right;
width: 340px;




</div>
</div>


gуVbsOJ[g̃JX^}CYiڍא̃̕X^CV[g
html/css/detail_container.css

iڍ׉ʂ̏ڍא̃̕CAEǵAOX^CV[gdetail_container.cssŒ`Ă܂BɂAio^ŏiڍאHTML͂eՂɂȂ܂B

X^CV[ĝ͎悤ɐݒ肳Ă܂B
  • iڍ׉ʁ}
id='detail_container'̒ŁANh2Ah3ApAulĒ`Ă܂B

<div id='detail_container'>


</div>

gуVbsOJ[g̃JX^}CY}Cy[W̃X^CV[g
html/css/top_mypage.css

snoP`snoPOŃ`FbNi̗LqۂɗpX^CV[głBLq͎̒ʂłB

<div id='mypage' align='left'>

<div id='mypage_top'><span style='color:#ffffff;font-weight:bold;margin-right:15px;'>`FbNi̗ip@<a href='./shop.cgi?mode=mypage'><span style='color:#ffffff;text-decoration:underline;'>}Cy[W</span></a>Łj</span></div>
<h2>ŋ߃`FbNi</h2>
$mypage_goods_list
<h2>ŋߌL[[h</h2>
$mypage_keys_list
<h2>ŋߌJeS[</h2>
$mypage_class_list
<h2>ŋߍwi</h2>
$mypage_orders_list

</div>

ȂA`FbNỉ摜̃TCY͕Wł́Aꗗ\̉摜TCYƓłAύX͉L̂悤top_mypage.csŝSWsڂɉL̂PsljĂB

.mypage_image_cell img{width:100px;}

yӁz}Cy[W̊Ǘ⏤iy[W̉ɕ\闚̃fUC̃X^CV[ggpĂ܂B
gуVbsOJ[g̃JX^}CYVbsOJ[g̕𒲐@
J[g̕ύX邱Ƃ͊ȒPł͂܂B낢ȂƂɕύXȂ΂ȂȂłB
L̕\ɂ̒ӏꗗ\ɂ܂B

܂ATCg̎̕TCY@\𓋍ڂ܂B
2023/04/03XVsTCg̎̕TCY@\iLbhfUCjt

VbsOJ[g̍ŐVłɁuTCg̎̕TCY@\v𓋍ڂ܂BVXeݒy13z̏ŕ̃TCYauto̐ݒ܂B܂ATCYȂʂwł܂B

̋@\́AL̃J[gɓڂĂ܂B
@@@@PCtoMobile-PC/PCtoMobile/PCtoMobile2/PCtoMobile-Unicode
@@@@Contents-Cart/Mall

Tv PCtoMobile2

̋@\ɂ艺L̂Ƃ”\ƂȂ܂B
iPj1‚̐ݒŃTCg̕ƃTChj[̕ł܂B
iQjauto̐ݒɂAuEU[̕ɍ킹ĎIɕω邱Ƃł܂Bɂ胊LbhfUC܂B
iRjauto̐ݒ̎ɂAŒ蕝̉ʂwł܂B

w̕@iVXeݒy13zj͉L̂ƂłB
yw@z
iPj(TCg̕)/auto/(TCg̍̕ŏ)/(TCg̍̕ő) /(tH[̃JX^}CYy52z̃TCg̕) /(TCh̃j[̕)/(j[̍1`20)/(j[̈ʒuL/R)
iQjTCg̕pxPʂŎwiɊ֌W鑼̎w͖jB iftHg980pxj
iRjauto̎̓uEU[̕ŎIɃTCY܂B̎̍ŏlAőlwBwłTCY̍ŏl960ij[̕200px̎jAől1920B
iSjtH[̃JX^}CYiVXeݒy52zjKpʂł́Aauto͋@\ATCg̕wł܂B
iTjTCh̃j[̕200px350px͈̔͂Ŏwł܂BiftHg200pxj
iUjj[̍120iK܂Ŏwł܂BiftHg6j
iVjTChj[̈ʒuiLj͉EiRjɎwł܂BiftHg͍j
w肵ȂƂ́A̋@\offƂȂAɊ֌W鑼̎w肪LƂȂ܂B

yTCYȂʂ̎wz
ʔԍR}ŋ؂ĂĎw肵܂B
@@ʔԍFtH[[1]Aw[2]Ao^tH[[3]AJ[g̒[4]AR~[5]A
@@菤@[6]A⍇tH[[7]Aiڍ׉[8]A}Cy[W[9]ATOP1`10[10+n]B

TCY”\ȃTCǵ̕A960px`1920pxŁA摜̕\͉L̂悤ɂȂ܂B
   ŏl
(ƭ200px)		    ől
(ƭ200px)
 TCg̕  960px  1500px
ƭ240px		  1920px
 iꗗ\iڍו\j̉摜̕
i1s̕\2`3j		  133px  142px
(3)		  172px
 iꗗ\i摜̂݁j̉摜̕
i1s̕\4`7j		  157px  220px
(5)		  220px
 ڍ׉ʂ̏i̊g摜̕  327px  640px  ő927.5px
́A
 TOPy[W̉摜()  97px  157px 200px
 TOPy[W̉摜(E)  73px  113px 150px 
 C摜iNivoSliderj
@ƍ̔䗦1000:300(2J)		  750px
225px		 1250px
375px		 1710px
387px
܂ŕ\
 J[Zi{j̉摜
i摜TCY͕140pxj		 130px
5		  152px
(7)		  161px
(9)
 J[ZiLOj̉摜
i摜TCY͕110pxj		  130px
(5)		  131px
(7)		 145px
(9)
 ߏỉ摜̕  162px  220px  220px
TCg̓K؂ȕɊւĂQlɂĉB
ev[g̃J[g̒̕ӏ
QJ̏ꍇiŏ 980px ̗j
iC+j
Tv =20px ̏ꍇTv
menu_header.css width: 980px 980+@i2j
width: 770px 770+@iPj
width: 776px 776+@iPj
cart_base.css width: 980px 980+@iPj
top_container2.css width: 770px 770+@iPj
width: 558px 558+@iPj
width: 250px 220+/2@iPj
goods_customize.css width: 379px 379+/2@iPj
detail_customize.css width: 768px 768+@iPj
width: 370px 370+@iPj
classl_container.css width: 770px 770+@iPj
top_mypage.css width: 770px 770+@iPj
ݒǗySz o^tH[̕ 768+
ݒǗyPRz ie[u̕ 770+
e[u̕ 770+
ꗗ\̉摜̕@ 140
width='980' 980+@iPj
width='690' 690+@iPj
ݒǗyPSz Pi̕\i摜̂݁j 197
ݒǗy27z ߏỉ摜 140
₢킹̐ݒǗyTz e[u̕@770+
摜top_bg.gif ̒ 980+
摜main.gif ̒ 770+
摜top2.gif


gуVbsOJ[g̃JX^}CYX^CV[g̒@
fUC̏̒Ƃɂ́AvdaォX^CV[gljāAĒ`܂BƁAljw̕D悳܂B

Ⴆ΁Awi摜pƂAM{^JX^Ƃ͉L̂悤ɂł܂B

<style type='text/css'>

body {
background: url(./html/images/bg_grey820.gif) top center repeat-y;@wi摜
}

.submit{
padding-left:1px;padding-top:2px;
border: 0px;
background : url(./html/images/submit_bg.gif) no-repeat 0px 0px;@M{^̔wi摜
cursor: pointer;
}

#menu li {background: #f2f2f2 url('./html/images/menu_bg.gif') no-repeat;}@j[́}[N

</style>

L̂悤ɂăfUCύXĂƂł܂B
̂܂܂łǂ̂łAfUC肵AŌɁAOX^CV[gɏ߂ΊłB
A߂OX^CV[g𒲐ȂfUC邱Ƃł܂Bꂽl͂̂قȒP܂B


fUC̗ǂ́Ap摜ɂĂ傫ςĂ܂BJ[ĝ̃fUC̓VvɂĂāA摜őŜO[htô͂ƂĂȕ@Ƃł傤B
gуVbsOJ[g̃JX^}CYgptHg̒@
tHgfUC傫E؂ȗv̂ЂƂ‚łBƂɁAVISTAȍ~łCIiuāv痈ĂjWœڂĂ܂BCI̖͂̒ʂAĂłƂ̕]tHgłB
AɒtHĝ߂܂ł̃fUCȂĂ܂”\܂BɁAeLXg{bNXȂǂŃCIw肷Ƒ傫܂̂ŁA̓̕CIɂȂقłB

L̓_lāAŐVłł́AX^CV[gőtHgɃCIw肵ĂfUCȂ悤ɔz܂B܂AɂAuEU[̐ݒŃCIw肵Ăꂢɕ\܂B
tHgɃCIw肵X^CV[ǵAL̂悤ɂQӏŃCIw肵Ă܂BCI̕폜Ό̃SVbN̂ɖ߂܂B

ymenu_header.cssz
body,td,p {
font-size : 13px;
font-family:'qMmpS Pro W3', 'Hiragino Kaku Gothic Pro', 'CI', 'Meiryo', 'lr oSVbN', 'MS PGothic', sans-serif;
color: #555555;
line-height: 1.3;
}

/*Star Html Hack*/
* html body,td,p{font-family:'CI', Meiryo, 'lr oSVbN', 'MS PGothic', sans-serif;}
*:first-child+html body,td,p{font-family:'CI', Meiryo, 'lr oSVbN', 'MS PGothic', sans-serif;}
/*Star Html Hack*/

select,input {
font-size : 13px;
font-family: "lr oSVbN", sans-serif;
color: #555555;
}


ycart_base.cssz
#content body,td,p{
font-size : 13px;
font-family:'qMmpS Pro W3', 'Hiragino Kaku Gothic Pro', 'CI', 'Meiryo', 'lr oSVbN', 'MS PGothic', sans-serif;
color: #555555;
}
/*Star Html Hack*/
* html #content body,td,p{font-family:'CI', 'Meiryo', 'lr oSVbN', 'MS PGothic', sans-serif;}
*:first-child+html #content body,td,p{font-family:'CI', 'Meiryo', 'lr oSVbN', 'MS PGothic', sans-serif;}
/*Star Html Hack*/

#content p {
text-align: justify;
text-justify: inter-ideograph;
}

/*eLXgGÃfUC*/
#content textarea{
font-size : 13px;
width:80%;
color: #555555;
font-family: 'lr oSVbN', sans-serif;
}
#content select, input {
font-size : 13px;
font-family: 'lr oSVbN', sans-serif;
vertical-align:middle;
margin-top:2px;
margin-bottom:2px;
}
#content select {
height:20px;
}

XPVistaȍ~̃tHg‹̈ႢQƂĂB
CSS̒j[Eɕ\@
X^CV[gύX邾ŁAj[EɈړ邱Ƃł܂B

ړƂ̂悤ɂȂ܂Bright_menu

ύXӏ̓t@Cmenu_header.css̉L̐ԂłB

#menu{
float:right;
width: 196px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
padding: 1px 0 0 0;
}

#content{
float:left;
width: 770px;
margin: 0;
padding: 0;
}

#HoverMenu .HoverLi div{
display: none;
position: absolute;
Z-index:10;
top: -59px;/*@JnTOP*/
right: 196px;/*AJnLEFT*/
margin: 0;
padding: 0 0 3px 0;
border: 1px solid #ccc;/*Bg̑ƐF*/
border-left: 1px solid #ccc;/*Cg̑ƐF*/
background-color: #fff;/*DwiF*/
border-radius: 5px 0 0 5px;
}
gуVbsOJ[g̃JX^}CY{^̃fUC@
submit{^̃fUCɂ́A傫āAR‚̕@܂BꂼɒAZ܂B
  1. WindowsȂǂ̕Ŵ̂̂܂܎gB
    • gĂB
    • y[W̃fUCɍ킹邱Ƃ͂łȂBɁAWindows XP X^C@@Windows NVbNX^C@ɂfUCςB
  2. X^CV[gŒB
    • ȒPɐFȂǂς邱ƂłB
    • ɌEiX^CV[gŔwi摜w肷@jB
  3. 摜gB
    • fUCv̂܂܂ɍsȂB
    • AȃfUC͂Ă܂B
āAfUCɎMAɂȂA摜gׂł傤BfUCɂقǂȂȂAŴ̂ǂł傤BFłw肵ƂƂɂ̓X^CV[g҂łˁB

yTvz

W̏ꍇF

̏ꍇAOX^CV[gcart_base.css̃NXsubmit̋Lq폜Kv܂B


X^CV[gpF

NXsubmitɉL̂悤ɒlj܂B
.submit{
color: #ffffff;
background-color: #555588;/* wiF */
border: outset 1px #9999cc;/* g̐F */
cursor: pointer;
}


X^CV[gŔwi摜wF

NXsubmitɉL̂悤ɒlj܂B
.submit{
color: #ffffff;
border: 0px;
background : url(images/submit_bg.gif) no-repeat 0px 0px;
cursor: pointer;
}


摜pF@

̏ꍇAvO̊YӏL̂悤ɏKv܂BiYӏ́AusubmitvŌƌ‚܂Bj

<input type="image" src="images/go.gif" alt="">


yQlTCgz
{^ɐF‚悤
X^CV[g̋Z
X^CV[gŔwiɉ摜
摜őM{^
{^eNjbN
gуVbsOJ[g̃JX^}CYFireFox΍iclearfixAStar Html Hackj
FireFoxVFA}ɐL΂ĂQO𒴂ĂƌĂ܂BŁAclearfixnbNƌĂ΂FireFox΍CSSev[gcart_base.css̐擪ɑgݍł݂܂B

clearfixnbNɂ͉ނ悤łAL̂̂ʓIłB

/*clearfixnbN*/
#content div:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
#content {display: inline-block;}
/* Hides from IE-mac \*/
* html #content {height: 1%;}
#content {display: block;}
/* End hide from IE-mac */

LȂǂQƂĂB
clearfix̌

܂AwidApaddingAborder̉߂IEFireFoxł͈قȂ邽߁AStar Html HackƂ@ꕔɍ̗p܂B

/*Star Html Hack*/
* html #menu{width: 160px;}
*:first-child+html #menu{width: 160px;}
/*Star Html Hack*/

ɊւĂ͉LB
Internet Explorer 7 CSSU@

܂AGoogle Chrome oꂵ܂B̃Xs[h̑ڂĂ܂BFireFoxƑ̓\܂BA͂ꕔhƂ낪܂B
ɁAselect{bNX̍͑Ƃ͈قȂ苷悤łBŁAL̃X^Cljē\ɂȂ悤ɂ܂B

#content select {
height:20px;
}

QlɂĂB
http://wb-i.net/advice.htm#browser
gуVbsOJ[g̃JX^}CYgCSS̗̍p
gѓdb̐iɔeЂƂقƂǂ̋@ŃX^CV[gg悤ɂȂĂ܂BȂAPCƂ͈قȂgт̃X^CV[gł͂RLA̎dl̈Ⴂɂgp܂B

L̑傫Ȑ܂B 
PjhRł̓CCCSŜݎgBiN̐FOj
QjhRł̓CCCSSłgpłCSS͏ȂB
 
ŁAhRɍ킹fUCKvɂȂ܂BƂAgтŕKvȃfUC͂قǑ͂܂񂩂Ał܂܂̃fUCł܂BŁAPCtoMobile Ver.13 ` Contents-Mall Ver.13AMulti Mail Form Ver.4ŁAL̂P)`U)fUCɎ܂B
 
ȂARLAXHTML̎dl͈قȂADOCTYPEقȂĂ܂BɁAi-modeSoftBankł́AXHTMLgpłȂ@킪܂ق̏܂BvOł͂𔻕ʂēK؂XHTMLHTMLo͂Ă܂BAXHTMLɑΉĂȂÂ@łCSS͖܂AfUCCSSȂ̃fUCƂȂ܂BAgтŃC^[lbgl͂ȂɌÂ@gĂ͂ȂƂł傤B

PjTCY̎w
̌gуTCgŕTCYXɂ܂BŁAeЂ̌gтő傫𓝈ꂷ邱Ƃ󋵂łA@킲ƂɕTCYwł悤ɂ܂B

VXeݒy20zgт̊{ݒ́Au1iKv̂Ƃŋ@킲ƂɎwł܂B
܂AŁA1w肷ƁAL̂悤ɎIɐݒ肳܂B

x-small/xx-small/x-small/12px@ii-mode/AU/SoftBank/other(3LAȊO)
̏j

Qj̐F̎w
̐FAN֌W̐FWEBォwł悤ɂ܂BAN֌W̐Fw͂RLAŕ\قȂĂ蓯\̂͊ȒPł͂܂BŁAwiFɂ肷~ނ𓾂ȂꍇĂ͖wɂق]܂ł傤B

RjwiFťo
^Cg〈oɔwit邾ŃfUC╪₷͔IɌサ܂B̓_łRLAɓ\ł悤ɓw͂Ă݂܂B

Sjspacer.gifgr
r͕ʃ^O<hr>g܂ARLAŕ\v邱Ƃ͂ނA㉺̃}[WOɂ邱Ƃ͂łȂ悤łB
ŁAŋߑgĂ鉺L̕@Ōr\܂Bɂ_Ȍr\”\ɂȂ܂B

}[WO̍1px̌rF
<div style='background:gray;'><img src="./p_image/spacer.gif" width='1' height='1'></div>

Tjspacer.gifgXy[X
ꂽgщʂł͍sԂK؂Ɏ邱Ƃ͏dvɂȂ܂BŁȀꍇL̂悤ȕ@ŃXy[Xmۂ܂Bɂsł͂łȂsԂ̎RȐݒ肪ł܂B

5px̍sԂ̃Xy[X̏ꍇF
<div><img src="./p_image/spacer.gif" width='1' height='5'></div>

Ujfloat:leftɂ摜̉荞
ĩTlC摜̉荞݂͉ʗ̈̐ߖƌ₷fUĈ߂ɂƂĂLŁARLAƂfloat:leftĝł𗘗p܂Bfloat͎̉̂悤ɍs܂B

<img src="" border='0' align='left' style='float:left;' />
EEEEE
<div style='clear:both;'></div>


yeXg̕@z gтX}[gtHTCg̃eXg̕@
gуVbsOJ[g̃JX^}CYX}[gtH̃fUC̃JX^}CYiHTML5/CSS3j
iPhoneCAndroidX}[gtHłHTML5/CSS3p”\ɂȂĂAꂩ̃TCg쐬̓X}[gtH̏ꍇAHTML5/CSS3嗬ɂȂł傤BŁAЂ̃J[głHTML5/CSS3ŃfUCł悤ɂ܂BɂX}[gtH炵\ł܂B

X}[gtĤ߂̃fUCpsmarttH_A̒ɂ́AX^CV[gJavaScriptAplt@CA摜Ȃǂ܂܂Ă܂B

samrttH_̍\F
@@csstH_
@@@@style.cssEEEEEX}[gtHpCSS
@@@@reset.css
@@imagestH_
@@@@title.pngEEEEEEX}[gtH̃^Cg摜
@@@@arrow.png
@@jstH_
@@@@autoresize.jquery.js
@@@@autoresize.js
@@@@jquery.js
@@home.plEEEEEEEEX}[gtHHOME
@@top1.pl ` top5.pl
@@form1.pl

VbsOJ[gɂX}[gtHpɏo͂HTML͉L̂悤ɂȂ܂iݒjB

<!DOCTYPE HTML>
<html lang="ja">
<head><meta charset="UTF-8">@@(́AShift_JIS)
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
<link rel="stylesheet" href="smart/css/reset.css">
<link rel="stylesheet" href="smart/css/style.css">
EEEEEEEE
<script src="smart/js/jquery.js"></script>
<script src="smart/js/autoresize.jquery.js"></script>
</head>
<body style="background-color:#ffffff">
<div style="font-size:15px;" id="whole_style">
<h1 style='text-align:center;margin:0;'><img src="./smart/images/title.png" alt="EEEE"></h1>
<div id="content">
EEEEEEEEE

EEEEEEEEE
<script src="smart/js/autoresize.js"></script>
</div>
</div>
</body>
</html>

ł̂悤ɁAX}[gtHʂ̃fUĆAX^CV[gstyle.cssŎwł܂Breset.css͋@Ԃ̍قȂ߂̂̂łB

smart/css/reset.css
smart/css/style.css
style.cssɂ́AVbsOJ[g̊{fUCHOMEATOP1`TOP5A⍇tH[ ̃fUC߂X^CV[g܂܂Ă܂BɁA{^⃊N̗̈̑傫w肳ĂA^bvՂʂ邽߂ɗpĂ܂BCSS3ɂAXgr|pہAVhE{bNXȂǂ邱Ƃł܂B

܂AsmarttH_Ɋ܂܂Ă**.plt@CҏW邱ƂɂAHOMEATOP1`TOP5A⍇tH[yсAwb_[ƃtb^[HTML5ŎRɃJX^}CYł܂B́AeLXgGfB^[łł܂AAVXeݒy20zX}[gtHTCg̕ҏWvdaォł܂B

܂AX}[gtHʂ^Cg摜smart/images/title.pngŁATv摜iPNG摜j̉320pxɂȂĂ܂B^Cg摜XpɕύX鎞ɂFTP\tgɂUPď㏑ĉB

܂A܂܂ĂJavaScript́ATEXTAREÃTCY@\邽߂̂̂BȊOɂ́AJ[Z\̂߂jQuery𗘗pĂ܂B J[Z\

R[hUTF-8iljShift_JISIł悤ɂ܂iPCtoMobile-UniocdełUTF-8̂݁jBHTML5ł́AUTF-8Ă܂AShift_JISłȂ܂B܂{łShift_JIS֗̕ȏꍇAShift_JISłȂƍꍇ܂BAɁAShift_JISłȂ΂ȂȂRȂ΁AUTF-8p邱Ƃł܂BύX鎞k_shop_pl/design.pl5sڂŐݒ肵ĂB

yӁzNWbgϑsЂ̑UTF-8ɑΉĂȂ߁AʂShift_JISŏo悤ɂĂ܂B邱ƂɂAωʂPCƌgтƃX}[gtHŕR[h𓝈ł܂B

̃TCY\XP[̓VXeݒy20źuiKv̂ƂŐݒł܂BĺA15pxɂȂĂ܂AƂ΁A14pxɂƂ͉L̂悤ɐݒ肵܂B
x-small/xx-small/x-small/14px:1.0:1.0:2.0
܂AVbsOJ[g̊ey[ẂuõfUCiFjv͌gтƋʂŃVXeݒy20zŐݒł܂B

i摜ɂ‚ĂłAX}[gtHł́AgїpɃVXeݒy20zŐݒ肵TCY1.5{Ɋg債ĕ\܂B
  • iꗗ\̃TlC摜112px`141px͈̔͂ŎIɃTCY
  • ̃TlC摜̏ꍇ́A1.5{i75px112pxj
  • g摜̏ꍇ͉ʃTCYɉāA300px`394pxŕ\
  • ڍ׃y[W̃TlC(10)̉摜50px`68px
PCtoMobile`Contents-Mall̏ꍇAX}[gtH̐\Ɖ摜̉𑜓x̌ɍ킹āAi摜͎œǂݍ݁A300px`394pxŕ\܂B邱ƂɂAY[AbvƂɂ摜ꂢɌ悤ɂȂ܂BiAgт͂̕܂ŒʂAImageMagickœK؂ȃTCYɃTCYĕ\܂Bj

܂AX}[gtHiꗗ\ł͉摜݂̂̕\ɂȂ܂BŜ͉̍摜̂ẴTCY+50pxƂȂ܂B\鏤íAVXeݒy20zŐݒ肳2{3̔{ɂȂ܂Bݒ肪10̏ꍇɂ́A18•\܂B

yŐVo[Wɂ摜ϊ(ImageMagick)̗pz
(1)PCƃoCʼn摜ϊ̗p̑I
PC̏ꍇFVXeݒy13zy27zŁA摜ϊȂꍇ͂̕nonew肵܂B
@@@iꗗ\Ȃǂ̃TlC̉摜
@@Aig摜
@@Bڍ׃y[W̃TlC10
@@C8i
oC̏ꍇFVXeݒy2zŁA摜ϊȂꍇnonew肵܂B
@@DTlC̉摜

(2)摜ϊ𗘗pȂꍇ
ImageMagickgȂT[o[܂߁ASgpȂꍇ́AL̐ݒύXĂB
@@set.plt@C18C19sڂL̂悤ɐݒ肵܂B
@@@@$convert_use =0;#PCp
@@@@$convert_mb_use =0;#oCp

(3)ImageMagick̃oOiזjɑΉ
ImageMagickׂɂȂ500G[NƂ񍐂Ă܂Ǎۂ̓}`XbhsȂƂʼnł܂BŐVo[Wł͂̑΍{܂B

ɁAgїpG┼pJ^Jiɂ‚ĂłAG͎ŃJbgApJ^Jiׂ͂đSpJ^Jiɕϊďo͂܂BŁAƂΌgїp̏iɔpJ^Ji܂܂ĂĂSpJ^Jiɕϊ܂B

܂APCEX}[gtHE^ubgłobTCg\/oCTCg\̐؂ւ@\𓋍ڂ܂Bdisplay=pcA display=mobileƂČĂяoƂɂ\؂ւ邱Ƃł܂B

Tvł́AX}[gtHTCg̃gbvy[W̉̕ɉLljĂ܂B
@smart/home.plt@CF
@@@<li><a href="./index.cgi?display=pc">obTCg\</a></li>

܂AobTCg̉ɁAVXeݒy13z̃JX^}CŶƂŁALĂ܂iX}[gtHyу^ubĝƂ̂݃oC\ɂȂ܂APCł͋@\܂jB
@@@<a href='./index.cgi?display=mobile'>oCTCg\iX}[gtHpj</a>

index.cgȋɁAshop.cgi?display=pcA display=mobileƂĕ\؂ւ邱Ƃo܂B
ɁAX}[gtH̏ꍇAPCHOMEŎIMobile\ɖ߂Ƃo܂B

jX}[gtHTCgIE9Ōꍇ̒ӓ_܂BW[hŌꍇ͖Ȃ̂łAIEX̌݊[hŃX}[gtHTCgiHTML5ACSSRjƐ\ȂƂ܂B܂AIE9 CSS3̃Of[V ɂ͑ΉĂ܂B

X}[gtH̏ꍇɂ̓^bvՂ\グɂ‚Ȃ邱Ƃ͌܂ł܂BAǂĂobTCgƔׂƏʂȂȂĂ܂܂BŁAX}[gtHłobTCg{Ƃ܂B̐؂ւ@\͂v]ɉ̂ƂȂ܂B

HOMEATOP1`TOP56y[WɉA菤@Aw@̃y[Wōv8y[W쐬ł܂BgтX}[gtHTCg̍쐬̃|Cg1y[W𒷂߂ɍ쐬邱ƂłB̕g肪悭Ȃ邩łBŁA8y[WɑSĂ[߂悤ɂilߍށjƂ͑ϗǂ@Ƃ܂B

yeXg̕@z gтX}[gtHTCg̃eXg̕@


Copyright (C) 2013WEBCx^[@All rights reserved.