-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
265 lines (226 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>株式会社KUNISHI コーポレートサイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="我々は漬物データサイエンスのパイオニアです。">
<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<link rel="stylesheet" href="css/style.css">
<script src="js/fixmenu_pagetop.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$('a[href^="#"]').click(function () {
var speed = 800;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({ scrollTop: position }, speed, 'swing');
return false;
});
});
</script>
</head>
<body>
<header>
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="KUNISHI COMPANY"></a></h1>
<nav id="menubar">
<ul>
<li><a href="#new">What's New</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div id="container">
<div id="contents">
<section id="new">
<h2>What's New</h2>
<dl>
<dt>2300/09/27</dt>
<dd>倒産</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>20XX/00/00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dt>2250/04/01</dt>
<dd>株式会社KUNISHI 設立予定</dd>
</dl>
</section>
<!--/#new-->
<section id="company">
<h2>Company</h2>
<h3>会社情報</h3>
<table class="ta1">
<caption>🐼🐼🐼🐼🐼🐼🐼🐼🐼🐼🐼🐼</caption>
<tr>
<th>企業理念</th>
<td>
<h4>世界から彦根に</h4><br>
<p>弊社は世界の富を彦根で消費することを目的に設立されました。</p>
</td>
</tr>
<tr>
<th>会社概要</th>
<td>
<p>会社名 株式会社KUNISHI</p>
<p>設立日 紀元2710年</p>
<p>本社所在地 宇宙銀河系太陽系地球日本</p>
</td>
</tr>
<tr>
<th>新卒採用</th>
<td>パイナビからお申込みください</td>
</tr>
</table>
<!--
<h2>当テンプレートについて</h2>
<h3>当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です</h3>
<p>当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。<br>
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（角を丸くする設定など）のでご注意下さい。</p>
<h3>各デバイスごとのレイアウトチェックは</h3>
<p>最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。</p>
<h3>各デバイス用のスタイル変更は</h3>
<p>cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。<br>
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。<br>
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能です。</p>
<h2>当テンプレートの使い方</h2>
<h3>初心者向けマニュアル公開中</h3>
<p>テンプレートの編集方法、画像加工、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。<br>
<a href="https://template-party.com/file/" target="_blank">初心者向けマニュアルはこちら。</a></p>
<h3>titleタグ、copyright、metaタグ、他の設定</h3>
<p><strong class="color1">■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。</strong><br>
まず、htmlソースが見れる状態にして、上から６行目あたりにある、<br>
<span class="look"><title>初心者向けホームページテンプレート tp_beginner6</title></span><br>
を編集しましょう。<br>
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、<br>
<span class="look"><title>SAMPLE COMPANY</title></span><br>
とすればＯＫです。</p>
<p><strong class="color1">■copyrightを変更しましょう。</strong><br>
続いてhtmlの下の方にある、<br>
<span class="look">Copyright© SAMPLE COMPANY All Rights Reserved.</span><br>
の「SAMPLE COMPANY」部分もあなたのサイト名に変更します。</p>
<p><strong class="color1">■metaタグを変更しましょう。</strong><br>
htmlソースの上の方に、<br>
<span class="look">content="ここにサイト説明を入れます"</span><br>
という部分がありますので、あなたのサイト説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。</p>
<p>続いて、その下の行の<br>
<span class="look">content="キーワード１,キーワード２,～～～"</span><br>
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。</p>
<p><strong class="color1">■ロゴ画像のalt指定と、ロゴ画像本体も変更しましょう。</strong><br>
html側に<br>
<span class="look"><img src="images/logo.png" alt="SAMPLE COMPANY"></span><br>
となっている箇所があるので、ここのalt指定(SAMPLE COMPANY)もあなたのサイト名に変更しましょう。</p>
<p>ロゴ画像本体については、baseフォルダに文字なしの土台画像「logo.png」が入っているので、画像ソフトなど使ってあなたのサイト名を入れて、imagesフォルダに上書きしましょう。画像ソフトを使った画像の加工方法も<a href="https://template-party.com/file/" target="_blank">初心者向けマニュアル</a>で公開中です。<br>
このロゴ画像、HPで見るサイズよりかなり大きく感じると思いますが、高解像度の端末でピンボケさせない為に適当に大きくしてあります。</p>
<p>HPで見る場合のロゴのサイズは、cssフォルダのstyle.cssの<br>
<spna class="look">/*ヘッダー（ロゴが入った最上段のブロック）</spna><br>
のブロックで設定されている、<br>
<span class="look">header #logo img</span><br>
にあるwidthの値で変更可能です。css下の方に小さな端末用の設定がある場合もあるのでそちらも確認して下さい。</p>
<h3>リンクの指定方法</h3>
<p>当テンプレートは１枚のhtmlファイルで完結しています。メインメニューのリンクは、同一ページ内に対して行う必要があります。<br>
同一ページ内にリンクを設定したい場合、まず、リンク先の対象ブロックの先頭にid値をつけてあげます。</p>
<p>このテンプレートであれば、Companyのブロック冒頭に、<br>
<span class="look"><section <span class="color1">id="company"</span>></span><br>
とつけていますが、それです。idは同じ名前を付けられないので注意して下さい。</p>
<p>メニューの方は、<br>
<span class="look"><a href="<span class="color1">#company</span>">Company</a></span><br>
として下さい。ここの「#」と「id」は同じ意味で、メニューをクリックすると、id="company"とついた所に移動します。
</p>
<h3>最上部の大きなメイン画像を入れ替えたい場合（※tp_beginner6_photo1〜tp_beginner6_photo4の場合）</h3>
<p>入れ替えたい画像を用意し、画像ファイル名を「mainimg.jpg」にしてimagesフォルダに上書きして下さい。閲覧する画面サイズによって自動で切り取られますので、切り取られた際に配置がおかしく見えないような画像を使って下さい。</p>
<p>もし、画像の拡張子が「.jpg」になっていない場合、cssフォルダのstyle.cssの、<br>
<span class="look">header {</span><br>
の中にある、<br>
<span class="look">background: url(../images/mainimg.jpg)〜〜</span><br>
部分の「mainimg.jpg」部分を直接変更して下さい。
</p>
<h3>リストタグを使いたい場合の注意点</h3>
<p>そのままではリストマークが出ませんので、リストタグを使う場合は以下のようなスタイルを追加して下さい。</p>
<p><ul <span class="color1">class="disc"</span>><br>
<li>リストタグ</li><br>
<li>リストタグ</li><br>
<li>リストタグ</li><br>
</ul>
</p>
<p>↓出力例</p>
<ul class="disc">
<li>リストタグ</li>
<li>リストタグ</li>
<li>リストタグ</li>
</ul>
<ol>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
<li>olタグはそのままででます。</li>
</ol>
<h3>その他、テンプレートのカラーやデザイン変更などは</h3>
<p>cssフォルダのstyle.cssで行って下さい。詳しい解説も書かれています。<br>
cssの解説は、「<span class="color1">/*</span>」と「<span class="color1">*/</span>」の間にコメントとして入れています。「<span class="color1">/*</span>」と「<span class="color1">*/</span>」はcss用のコメントタグであり、飾りではないので削除をしないで下さい。もし解説を削除したい場合は、「<span class="color1">/*</span>」と「<span class="color1">*/</span>」含めて丸ごと削除して下さい。</p>
<h3>うまく編集できない場合は</h3>
<p><a href="https://template-party.com/bbs/">サポート掲示板</a>からご質問下さい。対応可能な範囲内でサポートしております。</p>
</section>
/#company-->
<section id="service">
<h2>Service</h2>
<div class="list">
<img src="images/sample1.jpg" alt="">
<h4>THUKEMONO</h4>
<p>データ分析を活用して効率的な漬物の漬け方をコンサルティングします。</p>
</div>
<div class="list">
<img src="images/sample2.jpg" alt="">
<h4>BIWAKO</h4>
<p>データ分析を活用して琵琶湖の水質の予測をします。</p>
</div>
<div class="list">
<img src="images/sample3.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
<div class="list">
<img src="images/sample4.jpg" alt="">
<h4>見出しを入れます。</h4>
<p>説明を入れます。</p>
</div>
<div class="list">
<img src="images/sample5.jpg" alt="">
<h4>CHRIST</h4>
<p>データ分析を活用して神の御言葉を見事実現して見せます。</p>
</div>
</section>
<!--/#service-->
<section id="contact">
<h2>Contact</h2>
<p class="c">お問い合わせは以下までお願い致します。</p>
<p class="c"><span class="big1">11-4514-1919</span><br>
定休日：毎週月火水木金土日<br>
営業時間AM0:00〜PM12:00</p>
<p class="c"><img src="images/sample1.jpg" alt="" width="300"></p>
</section>
<!--/#contact-->
</div>
<!--/#contents-->
</div>
<!--/#container-->
<footer>
<small>Copyright© <a href="index.html">SAMPLE COMPANY</a> All Rights Reserved.</small>
<span class="pr">《<a href="https://template-party.com/" target="_blank">Web Design:Template-Party</a>》</span>
</footer>
<!--ページの上部に戻る「↑」ボタン-->
<p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>
</body>
</html>