| ... | ... |
@@ -5,32 +5,33 @@ http://developer.yahoo.net/yui/license.txt |
| 5 | 5 |
version: 3.0.0 |
| 6 | 6 |
build: 1549 |
| 7 | 7 |
*/ |
| 8 |
-html{
|
|
| 9 |
- color:#000;background:#FFF; |
|
| 10 |
-} |
|
| 11 |
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, |
|
| 12 |
-pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
|
|
| 13 |
- margin:0;padding:0; |
|
| 14 |
-} |
|
| 15 |
-table{
|
|
| 16 |
- border-collapse:collapse;border-spacing:0; |
|
| 17 |
-} |
|
| 18 |
-fieldset,img{ border:0; }
|
|
| 19 |
-address,caption,cite,code,dfn,em,strong,th,var{
|
|
| 20 |
- font-style:normal;font-weight:normal; |
|
| 21 |
-} |
|
| 22 |
-li { list-style:none; } caption,th{ text-align:left; }
|
|
| 23 |
-h1,h2,h3,h4,h5,h6{
|
|
| 24 |
- font-size:100%;font-weight:normal; |
|
| 25 |
-} |
|
| 26 |
-q:before,q:after{ content:''; }
|
|
| 27 |
-abbr,acronym{ border:0;font-variant:normal; }
|
|
| 28 |
-sup{ vertical-align:text-top; }
|
|
| 29 |
-sub{ vertical-align:text-bottom; }
|
|
| 30 |
-input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
|
|
| 31 |
-input,textarea,select{ *font-size:100%; }
|
|
| 32 |
-legend{ color:#000; }
|
|
| 33 |
- |
|
| 8 |
+ html{
|
|
| 9 |
+ color:#000;background:#FFF; |
|
| 10 |
+ } |
|
| 11 |
+ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, |
|
| 12 |
+ pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
|
|
| 13 |
+ margin:0;padding:0; |
|
| 14 |
+ } |
|
| 15 |
+ table{
|
|
| 16 |
+ border-collapse:collapse;border-spacing:0; |
|
| 17 |
+ } |
|
| 18 |
+ fieldset,img{ border:0; }
|
|
| 19 |
+ address,caption,cite,code,dfn,em,strong,th,var{
|
|
| 20 |
+ font-style:normal;font-weight:normal; |
|
| 21 |
+ } |
|
| 22 |
+ li { list-style:none; } caption,th{ text-align:left; }
|
|
| 23 |
+ h1,h2,h3,h4,h5,h6{
|
|
| 24 |
+ font-size:100%;font-weight:normal; |
|
| 25 |
+ } |
|
| 26 |
+ q:before,q:after{ content:''; }
|
|
| 27 |
+ abbr,acronym{ border:0;font-variant:normal; }
|
|
| 28 |
+ sup{ vertical-align:text-top; }
|
|
| 29 |
+ sub{ vertical-align:text-bottom; }
|
|
| 30 |
+ input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
|
|
| 31 |
+ input,textarea,select{ *font-size:100%; }
|
|
| 32 |
+ legend{ color:#000; }
|
|
| 33 |
+ |
|
| 34 |
+/* デザイン */ |
|
| 34 | 35 |
|
| 35 | 36 |
# レイアウト(サイドバー固定) |
| 36 | 37 |
* {
|
| ... | ... |
@@ -38,80 +39,72 @@ legend{ color:#000; }
|
| 38 | 39 |
padding:0; |
| 39 | 40 |
} |
| 40 | 41 |
|
| 42 |
+body {
|
|
| 43 |
+ text-align:center; |
|
| 44 |
+} |
|
| 41 | 45 |
|
| 42 |
-#boxA {
|
|
| 46 |
+#header {
|
|
| 43 | 47 |
border-bottom:1px solid #AAAAAA; |
| 44 | 48 |
padding-bottom:10px; |
| 45 | 49 |
margin-bottom:10px; |
| 46 | 50 |
} |
| 47 | 51 |
|
| 48 |
-#boxC {
|
|
| 49 |
-} |
|
| 50 |
- |
|
| 51 |
-#boxD {
|
|
| 52 |
-} |
|
| 53 |
- |
|
| 54 |
- |
|
| 55 |
-body {
|
|
| 56 |
- text-align:center; |
|
| 57 |
-} |
|
| 58 |
- |
|
| 59 | 52 |
#container {
|
| 60 |
- width:96%; |
|
| 53 |
+ width:1000px; |
|
| 61 | 54 |
margin-left:auto; |
| 62 | 55 |
margin-right:auto; |
| 63 | 56 |
text-align:left; |
| 64 | 57 |
} |
| 65 | 58 |
|
| 66 |
-#boxB {
|
|
| 59 |
+#side {
|
|
| 67 | 60 |
width:250px; |
| 68 | 61 |
float:left; |
| 69 |
- margin-right:-250px; |
|
| 70 |
- position:relative; |
|
| 71 |
- z-index:2; |
|
| 72 | 62 |
font-size:15px; |
| 73 | 63 |
line-height:1.3em; |
| 74 | 64 |
} |
| 75 | 65 |
|
| 76 |
-#boxB a {
|
|
| 66 |
+#side a {
|
|
| 77 | 67 |
color:blue; |
| 78 | 68 |
text-decoration:none; |
| 79 | 69 |
} |
| 80 |
-#boxB a:hover {
|
|
| 70 |
+#side a:hover {
|
|
| 81 | 71 |
color:blue; |
| 82 | 72 |
} |
| 83 |
-#boxB a:visited {
|
|
| 73 |
+#side a:visited {
|
|
| 84 | 74 |
color:blue; |
| 85 | 75 |
} |
| 86 | 76 |
|
| 87 |
-#boxB p {
|
|
| 77 |
+#side p {
|
|
| 88 | 78 |
position:relative; |
| 89 | 79 |
z-index:2; |
| 90 | 80 |
} |
| 91 | 81 |
|
| 92 |
-#boxC p, #boxC h3, #boxC h2 {
|
|
| 93 |
- margin-left:250px; |
|
| 94 |
-} |
|
| 95 |
- |
|
| 96 |
-#boxC .para {
|
|
| 97 |
- margin-left:270px; |
|
| 82 |
+#main .para {
|
|
| 83 |
+ margin-left:20px; |
|
| 98 | 84 |
text-indent:1em; |
| 99 | 85 |
margin-bottom:10px; |
| 100 | 86 |
} |
| 101 | 87 |
|
| 102 | 88 |
|
| 103 |
-#boxC {
|
|
| 104 |
- width:100%; |
|
| 105 |
- float:left; |
|
| 106 |
- position:relative; |
|
| 107 |
- z-index:1; |
|
| 89 |
+#main {
|
|
| 90 |
+ width:750px; |
|
| 91 |
+ padding-rigth:100px; |
|
| 92 |
+ float:left; |
|
| 93 |
+ height:500px; |
|
| 94 |
+ overflow:auto; |
|
| 108 | 95 |
} |
| 109 | 96 |
|
| 110 |
-#boxD {
|
|
| 111 |
- width:100%; |
|
| 112 |
- clear:left; |
|
| 113 |
- text-align:center; |
|
| 114 |
- padding-top:10px; |
|
| 97 |
+#content {
|
|
| 98 |
+ padding-right:10px; |
|
| 99 |
+} |
|
| 100 |
+ |
|
| 101 |
+#footer {
|
|
| 102 |
+ width:100%; |
|
| 103 |
+ clear:left; |
|
| 104 |
+ text-align:center; |
|
| 105 |
+ padding-top:10px; |
|
| 106 |
+ border-top:1px solid #AAAAAA; |
|
| 107 |
+ padding-top:10px; |
|
| 115 | 108 |
} |
| 116 | 109 |
|
| 117 | 110 |
|
| ... | ... |
@@ -133,6 +133,7 @@ |
| 133 | 133 |
} |
| 134 | 134 |
else {
|
| 135 | 135 |
found_book_ids.push(book_id); |
| 136 |
+ $(this).css('display', '');
|
|
| 136 | 137 |
} |
| 137 | 138 |
$(this).find('.word-count').text(word_count_h[book_id]);
|
| 138 | 139 |
} |
| ... | ... |
@@ -167,11 +168,11 @@ |
| 167 | 168 |
|
| 168 | 169 |
<div id="container"> |
| 169 | 170 |
|
| 170 |
- <div id="boxA"> |
|
| 171 |
+ <div id="header"> |
|
| 171 | 172 |
<h1>口語訳聖書オンライン語句検索</h1> |
| 172 | 173 |
</div> |
| 173 | 174 |
|
| 174 |
- <div id="boxB"> |
|
| 175 |
+ <div id="side"> |
|
| 175 | 176 |
<div style="margin-bottom:5px"> |
| 176 | 177 |
<input type="text" name="word", style = "width:160px"> |
| 177 | 178 |
<button id="search" style="width:50px;padding:2px;">検索</button> |
| ... | ... |
@@ -193,7 +194,7 @@ |
| 193 | 194 |
</tr> |
| 194 | 195 |
</table> |
| 195 | 196 |
</div> |
| 196 |
- <div style="border:1px solid gray;width:218px;height:400px;overflow:auto;padding:5px"> |
|
| 197 |
+ <div style="border:1px solid gray;width:218px;height:300px;overflow:auto;padding:5px"> |
|
| 197 | 198 |
<table id="books" style="border-collapse: collapse;width:100%;color:#333333"> |
| 198 | 199 |
<tr style="border-bottom:1px solid #EEEEEE"> |
| 199 | 200 |
<td> |
| ... | ... |
@@ -218,14 +219,14 @@ |
| 218 | 219 |
</div> |
| 219 | 220 |
</div> |
| 220 | 221 |
|
| 221 |
- <div id="boxC"> |
|
| 222 |
- <div id="content" style="height:500px;overflow:auto"> |
|
| 222 |
+ <div id="main"> |
|
| 223 |
+ <div id="content"> |
|
| 223 | 224 |
</div> |
| 224 | 225 |
</div> |
| 225 | 226 |
|
| 226 | 227 |
|
| 227 |
- <div id="boxD"> |
|
| 228 |
- <div style="border-top:1px solid #AAAAAA;padding-top:10px;"> |
|
| 228 |
+ <div id="footer"> |
|
| 229 |
+ <div> |
|
| 229 | 230 |
This site is create by |
| 230 | 231 |
<a href="http://d.hatena.ne.jp/perlcodesample">Perl</a> + |
| 231 | 232 |
<a href="http://d.hatena.ne.jp/perlcodesample/20140319/1395203665">Mojolicious</a>. |