-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-1.html
260 lines (240 loc) · 16.9 KB
/
index-1.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=2">
<!-- css -->
<link rel="stylesheet" href="css/style/style.css">
<link rel="stylesheet" href="css/index-style.css">
<link rel="stylesheet" href="css/slider.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<!-- スライドショー -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<!-- AOS.js (アニメーション) -->
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
<title>釧路高専 プログラミング研究会 HPページ</title>
</head>
<body>
<!-- header -->
<header id="header" class="DownMove">
<h1 id="header_logo"><a href="/">NIT-KCP</a></h1>
<nav id="pc_navi">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="product.html">Product</a></li>
</ul>
</nav>
</header>
<!-- /header -->
<!-- global_title -->
<div id="main_visual">
<div id="main_title">
<h1 class="large_title"><span>釧路高専</span> <span>プログラミング研究会</span></h1>
<h3 class="small_title"><span>National Institute of Technology</span> <span>Kushiro College</span> <span>Programming Circle</span></h3>
</div>
<svg class="mv_wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffffff" fill-opacity="1" d="M0,192L40,202.7C80,213,160,235,240,224C320,213,400,171,480,165.3C560,160,640,192,720,218.7C800,245,880,267,960,272C1040,277,1120,267,1200,245.3C1280,224,1360,192,1400,176L1440,160L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</div>
<!-- /gloval_title -->
<!-- wrapper -->
<div id="wrapper">
<!-- main -->
<main>
<div id="info">
<h2 class="border_title">INFO</h2>
<div id="info_box" data-aos="zoom-in">
<table id="info_table">
<tr>
<th>研究会名</th>
<td>プログラミング研究会</td>
</tr>
<tr>
<th>会員数</th>
<td>43人 (2020年)</td>
</tr>
<tr>
<th>活動曜日</th>
<td>平日：月曜日 ~ 金曜日 (祝日は休み)</td>
</tr>
<tr>
<th>活動時間</th>
<td>16:40 ~ 18:00 (放課後)</td>
</tr>
<tr>
<th>活動場所</th>
<td>釧路高専 情報棟2F 応用情報処理実験室</td>
</tr>
<tr>
<th>年会費</th>
<td>1,000 円(/年)<br>
※会費は必要な機材の購入や、校外での活動費用に使用されます。</td>
</tr>
</table>
<div class="flexbox">
<div class="textbox infotext">
<h3 class="leftline_title info_title">プログラミング研究会とは</h3>
<p>
プログラミング研究会(略称:プロ研)では、放課後に実験室へ集まって、それぞれ興味を持った技術を学んだり大会の出場へ向けて準備に取り組むなど、和気あいあいとした雰囲気の中で活動しています。
毎年の新入生の仮入部期間にはC言語の講習会を行っており、プログラミング初学者にもわかりやすいように先輩が丁寧に教えてくれます。
また、先輩と後輩との壁も低く、帰宅後でも専門・一般科目で分からないところを聞いたり、連絡を取り合って遊んだりする場面もよく見られます。
プログラミングに興味のある方、2年生以降の専門科目の予習をしたいと考えている方は是非プログラミング研究会にお越しください!!
</p>
</div>
<div class="imgbox infoimg"><img src="images/active.jpg" alt="講習会の様子"></div>
</div>
<h3 class="leftline_title info_title">新入生の方へ</h3>
<p>
新入生の皆さん、ご入学おめでとうございます。プロ研のホームページをご覧いただき、このようなかたちながらも皆さんと関わりあり会えた事をとても嬉しく思います。<br>
1年生の皆さんは、これからの高専生活に胸を躍らせている事でしょう。しかしそれと同時に、高専での授業についていけるか不安もあるのではないでしょうか？
釧路高専では2年生から5つの分野に別れ、それぞれ異なる専門科目を受講することになります。ところが、どの分野にも共通する専門科目もあります。
その一つがプログラミングです。プログラミングと聞くと、ゲームやインターネットなど、情報工学分野以外には関係ないように感じる人もいるでしょう。
しかし、IoTやAIなどが注目されている今、分野を問わず技術者にはプログラミングの知識が必要とされているのです。
そこでプログラミング研究会では、プログラミングを学びたいと考えている人を応援できるよう、研究会内での講習会や色々な大会への出場などを行なっています。<br>
プログラミングに興味のある方や、1年生のうちから予習をしたいという方は、是非プログラミング研究会へお越しください。
</p>
<!-- <h3 class="leftline_title info_title">入会・検討をされる方へ</h3> -->
<div class="attention_box">
<div class="textbox">
<h3 class="leftline_title">新型コロナウイルスへの対策</h3>
<p>
プログラミング研究会では、新型コロナウイルス感染症対策を徹底しています。<br>
特に三密を避けられない実験室内では、フェイスシールドの着用を義務付け、忘れた会員に関しては取りに戻らない限り研究会内での活動を認めないなどの対応をとっています。<br>
また、使用する機材に関しては共用のものとなるため、気になる者は各自で使用前あるいは使用後に消毒をするよう声がけを行っています。<br>
さらに、万が一に備え、活動後は会員全員にチャットアプリDiscordを用いた体調入力を義務付けています。無理な参加は避け、会員全員が快適に活動できる環境作りに取り組みましょう。<br>
</p>
<p>
<br>※新入生の方は、おそらくフェイスシールドは新学期に学校で配られます。紛失した場合は各自で新たに購入するなどの対応をとってください。弊研究会で別途購入する予定は今のところありません。
</p>
</div>
</div>
</div>
</div>
<div class="wave">
<svg class="bg_wave01" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#f3f4f5" fill-opacity="1" d="M0,288L48,277.3C96,267,192,245,288,245.3C384,245,480,267,576,282.7C672,299,768,309,864,272C960,235,1056,149,1152,133.3C1248,117,1344,171,1392,197.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
<div class="introduction">
<h2 class="border_title">INTRODUCTION</h2>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/active01.jpg" alt="活動の様子01"></div>
<div class="textbox">
<h4 class="leftline_title">1. プログラミング学習</h4>
<p>
放課後に情報処理実験室に集まって、授業で出された課題や大会に向けてプログラミングを行っています。実験室にはPCやホワイトボードなどもあり、各々活用しながら仲間と共に考えたり、プログラミング以外の内容を教え合う姿も見られます。<br>
パソコンを持っていないという人も、活動時にはプロ研が所有している物を利用できるので心配ありません。もちろん、自分のノートパソコンがある人は、それを持参してきても構いません。
</p>
</div>
</div>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/active02.jpg" alt="活動の様子02"></div>
<div class="textbox">
<h4 class="leftline_title">2. オープンキャンパス・高専祭</h4>
<p>
プログラミング学習の一環として、毎年開催されるオープンキャンパス・高専祭にプロ研のブースを開いて作品を展示しています。
C言語で動くゲームはもちろん、画像認識やUnityで制作された3Dゲームなど、毎年個性あふれる作品をみることができます。<br>
新入生にとっては、技術力を発揮するはじめての場となります。校外からの来場者の方々に作成した成果物を発表しましょう。
</p>
</div>
</div>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/active03.jpg" alt="活動の様子03"></div>
<div class="textbox">
<h4 class="leftline_title">3. 高専プロコン</h4>
<p>
毎年10月に開催される「全国高等専門学校プログラミングコンテスト」参加しています。<br>
高専プロコンに参加することで、さまざまな技術の習得や全国の高専生との出会い、スポンサー企業様の繋がりをもつことができます。<br>
プログラミングコンテストとありますが、部門によっては電子工学や機械工学の知識も必要になってきます。<br>
力試しをしたい方や新しい発見を求めている方は是非参加してみてください。
</p>
</div>
</div>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/active04.jpg" alt="活動の様子04"></div>
<div class="textbox">
<h4 class="leftline_title">4. U-16プログラミングコンテスト</h4>
<p>
新一年生(16歳以下)の会員の方には、毎年秋に行われる「U-16プログラミングコンテスト」に参加していただきます。<br>
Chaser(チェイサー)と呼ばれるゲームのエージェントをRubyという言語で制御し、それぞれを戦わせます。<br>
釧路大会で上位3位に入賞した方は、釧路大会の数ヶ月後に行われる旭川大会に出場することができます。
</p>
</div>
</div>
</div>
<div class="other">
<h2 class="border_title">OTHER</h2>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/u-16.jpg" alt="U-16プロコン"></div>
<div class="textbox">
<h4 class="leftline_title">U-16プログラミングコンテスト</h4>
<p>
プログラミング研究会は、U-16 プログラミングコンテスト釧路大会の運営をお手伝いしています。<br>
第8回釧路大会(令和2年度)は新型コロナウイルスの影響により、オンライン(Youtube Live)での開催となりました。
下のボタンからアーカイブを観ることができるので、興味がある方は是非ご覧ください。
</p>
<a class="btn-sample button" href="https://procon.946oss.net">U-16プロコン 釧路大会</a>
<a class="btn-sample button" href="https://www.youtube.com/watch?v=BGRSf01e6Iw&feature=youtu.be">第8回釧路大会 (Youtube Live)</a>
</div>
</div>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/procon.jpg" alt="高専プロコン"></div>
<div class="textbox">
<h4 class="leftline_title">全国高専プログラミングコンテスト</h4>
<p>第30回 全国高専プロコン都城大会は、競技部門に参加する予定でしたが、台風19号に伴い辞退しました。</p>
<a class="btn-sample button" href="http://www.procon.gr.jp"><span>全国高専プロコン</span> <span>公式サイト</span></a>
</div>
</div>
<div class="container flexbox" data-aos="zoom-in">
<div class="imgbox"><img src="images/kosensai.jpg" alt="高専祭"></div>
<div class="textbox">
<h4 class="leftline_title">高専祭</h4>
<p>毎年開催される高専祭にブースを開いて作品を展示しています。2019年度も様々な成果物が見られました。是非お越しください！！<br>
(2020年度は高専祭が中止となりました。)
</p>
<a class="btn-sample button" href="https://www.kushiro-ct.ac.jp"><span>釧路高専</span> <span>公式ウェブサイト</span></a>
</div>
</div>
</div>
</main>
<!-- /main -->
</div>
<!-- /wrapper -->
<!-- footer -->
<footer>
<div id="footer_menu">
<div id="footer_navi">
<h3>SITEMAP</h3>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="product.html">Product</a></li>
</ul>
</div>
<div id="footer_portal">
<h3>PORTAL</h3>
<ul>
<li><a href="https://www.kushiro-ct.ac.jp">釧路高専 公式ウェブサイト</a></li>
<li><a href="https://nitkpc.com">新しい プロ研 ホームページ</a></li>
<li><a href="https://github.co.jp">GitHub</a></li>
</ul>
</div>
</div>
<div id="cmark">© 2021 National Institute of Technology Kushiro College Programming Circle, All rights reserved. </div>
</footer>
<!-- /footer -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- slick (スライドショー) -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- AOS.js (アニメーション) -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="js/headerNavi.js"></script>
<script src="js/indexAnime.js"></script>
<script src="js/slider.js"></script>
</body>
</html>