{"id":1062,"date":"2012-06-08T12:42:13","date_gmt":"2012-06-08T16:42:13","guid":{"rendered":"http:\/\/www.a2life.info\/w\/?p=1062"},"modified":"2012-08-22T14:31:26","modified_gmt":"2012-08-22T18:31:26","slug":"%e5%b0%86%e6%a3%8b%e7%9b%a4%e3%81%a8%e9%a7%92%e3%82%92web%e4%b8%8a%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.a2life.info\/w\/?p=1062","title":{"rendered":"\u5c06\u68cb\u76e4\u3068\u99d2\u3092WEB\u4e0a\u306b\u8868\u793a\u3059\u308b1"},"content":{"rendered":"
\n\u307e\u305a\u306f\u9759\u7684\u306b\u5c06\u68cb\u76e4\u3068\u99d2\u3092WEB\u30da\u30fc\u30b8\u306b\u8868\u793a\u3057\u3066\u307f\u308b\u3002
\nHTML\u306e\u8a18\u8ff0\u306f\u4ee5\u4e0b\u306e\u3054\u3068\u304f\u306a\u308b\u3002\n<\/div>\n
\n\u5f53\u8a72\u90e8\u5206\u306e\u307f<\/p>\n
\n
\r\n<link href=\"boardstyle.css\" \u00a0rel=\"stylesheet\" >\r\n.\r\n.\r\n\r\n<div class=\"table\"> <!-- outer table -->\r\n\r\n<div class=\"row\">\r\n<div id=\"boardbase\" class=\"cell\">\r\n<img class=\"board\" src=\"assets\/images\/shogiboards\/ban_kaya_a.png\" alt=\"\"\/>\u3000<!-- \u76e4\u3092\u8868\u793a-->\r\n<img class=\"board\" src=\"assets\/images\/shogiboards\/masu_dot_xy.png\" alt=\"\"\/><!-- \u30de\u30b9\u76ee\u3092\u8868\u793a -->\r\n<img class=\"koma c5 r9\" src=\"assets\/images\/shogiboards\/Sou.png\" alt=\"\"\/><!--\u5148\u624b\u738b\u3092\u3000\uff15\uff19\u306b -->\r\n<img class=\"koma c5 r1\" src=\"assets\/images\/shogiboards\/Gou.png\" alt=\"\"\/><!-- \u5f8c\u624b\u738b\u3092\u3000\uff15\uff11\u306b-->\r\n<img class=\"koma c3 r7\" src=\"assets\/images\/shogiboards\/Ggin.png\" alt=\"\"\/><!--\u5f8c\u624b\u9280\u3092\u3000\uff13\uff17\u306b -->\r\n<img class=\"koma c9 r7\" src=\"assets\/images\/shogiboards\/Sfu.png\" alt=\"\"\/><!--\u5148\u624b\u306e\u6b69\u3092\uff19\uff17\u306b-->\r\n<img class=\"koma c4 r9\" src=\"assets\/images\/shogiboards\/Skin.png\" alt=\"\"\/><!--\u5148\u624b\u306e\u91d1\u3092\uff14\uff19\u306b-->\r\n<\/div>\r\n\r\n<div class=\"table\"><!-- inner table -->\r\n<div class=\"row\">\r\n<div id=\"goteMochigoma\" class=\"komadai cell\">\u3000<!-- \u5f8c\u624b\u306e\u99d2\u53f0-->\r\n<img src=\"assets\/images\/shogiboards\/Gou.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Ggin.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Gfu.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Gfu.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Gkin.png\" alt=\"\"\/>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n<div class=\"cell empty\" ><\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n<div id=\"senteMochigoma\" class=\"komadai cell\"><!--\u5148\u624b\u306e\u99d2\u53f0-->\r\n<img src=\"assets\/images\/shogiboards\/Sgin.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Sfu.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Sfu.png\" alt=\"\"\/>\r\n<img src=\"assets\/images\/shogiboards\/Skyo.png\" alt=\"\"\/>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div><!-- innter table -->\r\n<\/div><!-- shogirow for the outer css-table-->\r\n<\/div><!--shogitable-->\r\n<\/pre>\n
\u4e00\u65b9\u3001boardstyle.css\u306f<\/p>\n
\r\n.forSnapshot {position:relative;}\r\n.table {display:table;}\r\n.row {display:table-row;}\r\n.cell {display:table-cell;}\r\n.empty {height:25px;}\r\n#boardbase {position:relative; width: 440px; height:490px;}\r\n#senteMochigoma {vertical-align:bottom;}\r\n.komadai {height:220px; width:160px; background-image:url(assets\/images\/shogiboards\/ban_kaya_a.png);}\r\n.board {position: absolute; left:10px; top:9px; }\r\n.comment {padding-left:10px; width:590px;min-height:120px;}\r\n.koma {position: absolute ; width:43px; height:48px;}\r\n.marker {position:absolute; width:43px; height:48px;}\r\n.lostworld {left:-20000px; top: -20000px;}\r\n.c1 {left:365px;} .c2 {left: 322px;} .c3 {left:279px;}\r\n.c4 {left:236px;} .c5 {left: 193px;} .c6 {left:150px;}\r\n.c7 {left:107px;} .c8 {left: 64px;}\u00a0 .c9 {left: 23px;}\r\n.r1 {top:20px;}\u00a0\u00a0 .r2 {top:68px;}\u00a0\u00a0\u00a0 .r3 {top:116px;}\r\n.r4{top:164px;}\u00a0\u00a0 .r5{top:212px;}\u00a0\u00a0\u00a0 .r6 {top:260px;}\r\n.r7{top:308px;}\u00a0\u00a0 .r8{top:356px;}\u00a0\u00a0\u00a0 .r9{top:404px;}\r\n<\/pre>\n
\n\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306f\u3059\u3079\u3066assets\/images\/shogiboards \u30d5\u30a9\u30eb\u30c0\u30fc\u306b\u683c\u7d0d\u3057\u3066\u304a\u304f\u3002\n<\/div>\n
\n\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u306f
\n<\/br>
\n<div id=boardbase>\u00a0\u3067\u5c06\u68cb\u677f\u30d6\u30ed\u30c3\u30af\u306e\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3092\u4f5c\u308a\u3001\u3053\u306e\u4e2d\u306b\u753b\u50cf\u3092\u653e\u308a\u8fbc\u3080\u3002\u3053\u306e\u753b\u50cf\u306e\u4f4d\u7f6e\u306b\u3064\u3044\u3066\u306f koma\u5c5e\u6027\u3067absolute\u00a0\u3068\u3057\u3001\u5217\u3068\u884c\u306e\u4f4d\u7f6e\u3092cx, rx \u3067\u305d\u308c\u305e\u308c\u6307\u5b9a\u3059\u308b\u3002\u3000r1=20px, c9=23px \u3092\u8d77\u70b9\u306b\u3000cx\u306f\u6a2a\u5e4543px\u00a0\u3000lx\u306f\u00a0\u7e26\u9ad8\u305548px\u3065\u3064\u5909\u5316\u3055\u305b\u3066\u3044\u308b\u3002\u99d2\u53f0\u306e\u30d6\u30ed\u30c3\u30af\u306b\u306f\u5358\u7d14\u306b\u99d2\u306e\u30a4\u30e1\u30fc\u30b8\u30d5\u30a1\u30a4\u30eb\u3092\u653e\u308a\u8fbc\u3093\u3067\u304a\u304f\u3068\u9806\u756a\u306b\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n
html \u306b\u304a\u3044\u3066\u3001\u5c06\u68cb\u677f\u3068\u99d2\u53f0\u3092\u30a2\u30ec\u30f3\u30b8\u3059\u308b\u306e\u306b\u3001CSS\u306edisplay:table \u5c5e\u6027\u3092\u4f7f\u3063\u3066\u3044\u308b\u3002\u3000html\u306e\u4e00\u9023\u306etable tag\u985e \u3092\u4f7f\u3046\u3053\u3068\u3082\u8003\u3048\u305f\u304c\u3001\u3053\u308c\u306f\u30c7\u30fc\u30bf\u3092\u30ea\u30b9\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u306e\u3068\u306f\u3061\u3087\u3063\u3068\u9055\u3063\u305f\u3088\u3046\u306a\u6c17\u304c\u3057\u305f\u306e\u3067\u3002css\u3067\u51e6\u7406\u3092\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002<\/p>\n
\u7d50\u679c\u306f\u3053\u3061\u3089<\/a><\/p>\n
 <\/p>\n
\u4e00\u5fdc\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u304c\u3001\u3053\u308c\u3067\u5c06\u68cb\u306e\u99d240\u679a\u3092\u306a\u3089\u3079\u308b\u306e\u306f\u5927\u5909\u306a\u306e\u3067\u3001\u3000\u6b21\u56de\u306f\u305f\u3068\u3048\u3070\u6587\u5b57\u5217\u3000”s44g”,”g65p” \u306a\u3069\u306e\u7f85\u5217\u3092\u3064\u304f\u308a\u3001\u3053\u308c\u3092Javascript\u3067\u51e6\u7406\u3057\u3066\u99d2\u306e\u914d\u7f6e\u8868\u793a\u3059\u308b\u65b9\u6cd5\u3092\u304b\u3093\u304c\u3048\u308b\u3002\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
\u307e\u305a\u306f\u9759\u7684\u306b\u5c06\u68cb\u76e4\u3068\u99d2\u3092WEB\u30da\u30fc\u30b8\u306b\u8868\u793a\u3057\u3066\u307f\u308b\u3002 HTML\u306e\u8a18\u8ff0\u306f\u4ee5\u4e0b\u306e\u3054\u3068\u304f\u306a\u308b\u3002 \u5f53\u8a72\u90e8\u5206\u306e\u307f <link href=”boardstyle.css” \u00a0rel=”stylesheet” > . . <div class=”table”> <!– outer table –> <div class=”row”> <div id=”boardbase” class=”cell”> <img class=”board” src=”assets\/images\/shogiboards\/ban_kaya_a.png” alt=””\/>\u3000<!– \u76e4\u3092\u8868\u793a–> <img class=”board” src=”assets\/images\/shogiboards\/masu_dot_xy.png” alt=””\/><!– \u30de\u30b9\u76ee\u3092\u8868\u793a –> <img class=”koma c5 r9″ src=”assets\/images\/shogiboards\/Sou.png” alt=””\/><!–\u5148\u624b\u738b\u3092\u3000\uff15\uff19\u306b –> <img class=”koma c5 r1″ src=”assets\/images\/shogiboards\/Gou.png” alt=””\/><!– \u5f8c\u624b\u738b\u3092\u3000\uff15\uff11\u306b–> <img class=”koma c3 r7″ src=”assets\/images\/shogiboards\/Ggin.png” alt=””\/><!–\u5f8c\u624b\u9280\u3092\u3000\uff13\uff17\u306b –> <img class=”koma c9 r7″ src=”assets\/images\/shogiboards\/Sfu.png” alt=””\/><!–\u5148\u624b\u306e\u6b69\u3092\uff19\uff17\u306b–> <img class=”koma c4 r9″ src=”assets\/images\/shogiboards\/Skin.png” alt=””\/><!–\u5148\u624b\u306e\u91d1\u3092\uff14\uff19\u306b–> <\/div> <div class=”table”><!– inner table –> <div class=”row”> <div id=”goteMochigoma” class=”komadai cell”>\u3000<!– \u5f8c\u624b\u306e\u99d2\u53f0–> <img src=”assets\/images\/shogiboards\/Gou.png” alt=””\/> <img src=”assets\/images\/shogiboards\/Ggin.png” alt=””\/> <img src=”assets\/images\/shogiboards\/Gfu.png” alt=””\/> <img src=”assets\/images\/shogiboards\/Gfu.png” alt=””\/> <img src=”assets\/images\/shogiboards\/Gkin.png” alt=””\/> <\/div> <\/div> <div class=”row”> <div class=”cell empty” ><\/div> <\/div> <div class=”row”> <div id=”senteMochigoma” class=”komadai cell”><!–\u5148\u624b\u306e\u99d2\u53f0–> <img src=”assets\/images\/shogiboards\/Sgin.png” alt=””\/> … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,3,16],"tags":[37,38,33],"class_list":["post-1062","post","type-post","status-publish","format-standard","hentry","category-web-design-study","category-web-making","category-16","tag-css","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1062"}],"version-history":[{"count":12,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1062\/revisions"}],"predecessor-version":[{"id":1129,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1062\/revisions\/1129"}],"wp:attachment":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}