diff --git a/class_content/index.html b/class_content/index.html index 8dc9e63..23be5d2 100644 --- a/class_content/index.html +++ b/class_content/index.html @@ -3,7 +3,7 @@ Junior-Doctor Chokai Academy - + diff --git a/home/index.html b/home/index.html index cf6bed9..be7e0d2 100644 --- a/home/index.html +++ b/home/index.html @@ -14,29 +14,26 @@

第1期 受講生募集

-
- キャラ画像ウミリク -
-

鳥海塾でどんなことが学べるの?

-

まずは、プログラミングの基礎を身に付けます。そして、情報技術が身近な - 地域社会のどんな場面に使われているのかを学びます。講座の終わりには、受講 - 生それぞれが自分のアイディアを出してオリジナルのプログラミングづくりに挑 - 戦します。

-

実際の授業では、大学の先生や大学生のお兄さんお姉さんがみなさん - の学びをサポートします。授業当日に学校行事やイベントで欠席になる場合には、 - オンラインでの補講にも対応します。

-
-
-

鳥海塾で学びを積み上げて「鳥海山の頂 (2236m)」を目指そう !

-

鳥海塾では受講生の学習の記録を積み重ね、標高メートルとして高さで示し - ながら、名峰「鳥海山」の頂上標高2236メートルを目指して登っていきます。

-

受講生のみなさんの研究を鳥海山から世界に向けて発信する気持ちで、一緒に挑 - 戦していきましょう。

-
- キャラ画像ウミ浮輪 -
+ キャラ画像ウミリク +
+

鳥海塾でどんなことが学べるの?

+

まずは、プログラミングの基礎を身に付けます。そして、情報技術が身近な + 地域社会のどんな場面に使われているのかを学びます。講座の終わりには、受講 + 生それぞれが自分のアイディアを出してオリジナルのプログラミングづくりに挑 + 戦します。
+ 実際の授業では、大学の先生や大学生のお兄さんお姉さんがみなさん + の学びをサポートします。授業当日に学校行事やイベントで欠席になる場合には、 + オンラインでの補講にも対応します。

+
+
+

鳥海塾で学びを積み上げて「鳥海山の頂 (2236m)」を目指そう !

+

鳥海塾では受講生の学習の記録を積み重ね、標高メートルとして高さで示し + ながら、名峰「鳥海山」の頂上標高2236メートルを目指して登っていきます。
+ 受講生のみなさんの研究を鳥海山から世界に向けて発信する気持ちで、一緒に挑戦していきましょう。

+
+ キャラ画像ウミ浮輪
diff --git a/jdmain.css b/jdmain.css index 9d0f252..6ab6f4b 100644 --- a/jdmain.css +++ b/jdmain.css @@ -1,12 +1,18 @@ /* * CSS for Junior Doctor Chokai Course */ + @charset "UTF-8"; -body{ + html { + font-size: 100%; + } + body{ margin: 0; height: 100%; font-family: "Sawarabi Gothic"; color: rgb(45, 45, 45); + font-size: 0.9rem; + line-height: 1.7; } .c, body.top h2 {text-align: center;} body.top h2 { @@ -34,6 +40,23 @@ height: 6em; overflow: auto; background: #eff; } +img { + max-width: 100%; + } + +/*--------------------------------------common---------------------------------*/ +.wrapper { + max-width: 1200px; + margin: 0 auto; + padding: 0 5%; + } + .section-title { + font-size: 1.6rem; + } + +/*--------------------------------------//common----------------------------------*/ + +/*--------------------------------------- header ---------------------------------*/ header{ width: 100%; height: auto; @@ -74,24 +97,32 @@ width: 150px; height: 150px; } +/*--------------------------------------- //header -------------------------------*/ -/* ホーム */ -main.home{ - padding: 0 1ex; +/* -------------------------------------- home ---------------------------------------*/ +#home{ + padding: 0 1ex; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-evenly; - align-items: center; + align-items: center; +} +#home h3{ + font-size: 1.3rem; +} +#home p{ + font-size: 1.2rem; + line-height: 2.0; } h2{ margin-left:20px; width: 100%; } -section.what_study{ +.what_study{ width:730px; } -main.home > section.what_study > h3{ +#home .what_study h3{ background: linear-gradient(transparent 50%, yellow 50%); width: 346px; } @@ -108,9 +139,9 @@ font-style: normal; font-weight: bold; background: linear-gradient(to top, yellow, transparent); } +/* -------------------------------------- //ホーム ---------------------------------------*/ - -/* Q&A */ +/* --------------------------------------- Q&A ----------------------------------------------*/ @keyframes slidein { 0% { opacity: 0; @@ -167,7 +198,50 @@ display: none; } -/* class_content */ +/* --------------------------------------- //Q&A ----------------------------------------------*/ + +/* ---------------------------------------- class-content -----------------------------------------*/ +.class-content-items{ + background-color:rgb(187, 235, 241); + padding: 60px; + margin-bottom: 60px; + margin-top: 60px; + box-shadow: 0 0 8px 4px #ccc; + font-size: 1.1rem; +} +#class-content .class-content-items { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: row; + flex-wrap: wrap; + } + .class-content-items-left{ + width: 60%; + padding-right: 35px; + border-right: solid 2px #446; + } + .class-content-dl-left{ + margin-right: 35px; + } + .class-content-dl > dt{ + background-color: rgb(87, 87, 87); + color: white; + padding: 3px 4px; + display: inline-block; + margin-bottom: 4px; + } + .class-content-dl > dd{ + margin-left: 60px; + margin-bottom: 5px; + } + .bottom{ + margin-left: 25px; + } + dl dt { + margin: 0 1ex; padding: 0 1ex; width: 6em; + border:rgb(80, 224, 243) solid; border-width: 0 0 1px 1.2em; +} @media screen and (min-width: 1100px){ .framebox { border: double 5px gold; @@ -186,7 +260,9 @@ } } -/* infoのcss */ +/* ----------------------------------------//class_content -----------------------------------------*/ + +/*------------------------------------------ infoのcss -------------------------------------------------*/ table.LectureSchedule{ text-align: center; border-collapse: collapse; @@ -212,6 +288,9 @@ padding-left: 0.5em; } +/*------------------------------------------//infoのcss -------------------------------------------------*/ + +/*------------------------------------------ footer -------------------------------------------------*/ footer { /* XXX: Change ME! */ border-top: 1px dashed #888; text-align: right; font-size: 70%; @@ -224,7 +303,5 @@ table.border th {text-align: left; padding: 0.2ex 0.8ex;} table.form th:first-child {min-width: 10em;} -dl dt { - margin: 0 1ex; padding: 0 1ex; width: 6em; - border: #284 solid; border-width: 0 0 1px 1.2em; -} + +/*------------------------------------------ //footer -------------------------------------------------*/ \ No newline at end of file diff --git a/test.css b/test.css deleted file mode 100644 index f746031..0000000 --- a/test.css +++ /dev/null @@ -1,302 +0,0 @@ -/* - * CSS for Junior Doctor Chokai Course - */ - @charset "UTF-8"; - - html { - font-size: 100%; - } - body{ - margin: 0; - height: 100%; - font-family: "Sawarabi Gothic"; - color: rgb(45, 45, 45); - font-size: 0.9rem; - line-height: 1.7; -} -.c, body.top h2 {text-align: center;} -body.top h2 { - padding: 1ex 2em; width: 20em; - border: groove #4a7 3px; margin: 5em auto; border-radius: 1em; -} -body.top a {text-decoration: none; color: #284} -body.top a:hover h2 {background: #9ea;} - -body:after{ - margin: 0; - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - content: ""; - background: #afeeee; - /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */ - /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */ - background: linear-gradient(to bottom, #afeeee 0%, #FFF 100%); - z-index: -1; -} - -body.vmenuspace {margin-top: 2em; border-top: 3px solid;} -div.scrollbox { - height: 6em; overflow: auto; background: #eff; -} - -img { - max-width: 100%; - } - -/*--------------------------------------common---------------------------------*/ -.wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 5%; - } - .section-title { - font-size: 1.6rem; - } - -/*--------------------------------------//common----------------------------------*/ - -/*--------------------------------------- header ---------------------------------*/ -header{ - width: 100%; - height: auto; -} -header > div.list{ - display: flex; - align-items: center; - justify-content: left; - width: 100%; - height: 50px; - background: linear-gradient(to bottom, rgba(15, 15, 15, 0.8), - rgba(40, 40, 40, 0.8)); -} -header nav a { - color: white; - text-decoration: none; - margin-left: 20px; - margin-right: 20px; -} -header nav a:hover { - color: white; - text-decoration: underline; -} -header ul{ - display:flex; -} -header ul li{ - list-style: none; -} -header > div.logobox { - position: relative; - margin-left: 20px; -} -header > div.logobox > h1 { - position:absolute; top: 30px; left: 170px; -} -header > div.logobox > img { - width: 150px; - height: 150px; -} -/*--------------------------------------- //header -------------------------------*/ - -/* -------------------------------------- home ---------------------------------------*/ -#home{ - padding: 0 1ex; -} -h2{ - margin-left:20px; - width: 100%; -} -.flex{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content:space-evenly; - align-items: center; -} -.what_study{ - width:730px; -} -#home > div.what_study > h3{ - background: linear-gradient(transparent 50%, yellow 50%); - width: 346px; -} -main {margin: 1ex;} /* PLEASE Remove this if this is too much effective */ -.aiming_top{ - width:730px; - margin-top: 50px; -} -.aiming_top > h3{ - background: linear-gradient(transparent 50%, yellow 50%); - width: 680px; -} -em.see { - font-style: normal; font-weight: bold; - background: linear-gradient(to top, yellow, transparent); -} -/* -------------------------------------- //ホーム ---------------------------------------*/ - -/* --------------------------------------- Q&A ----------------------------------------------*/ -@keyframes slidein { - 0% { - opacity: 0; - transform: translateY(-5px); - } - 100% { - opacity: 1; - transform: translateY(0px); - } -} -.qa_list{ - position: relative; - margin: 20px 20px 30px 20px; - border: dashed black; - border-width: 0 0 2px 0; - color: black; - transition: .2s; -} -.qa_list:hover{ - color: rgb(255, 60, 0); - } -.qa_list .plus{ - position: relative; - display: inline-flex; - font-size: 28px; - padding: 5px; - transition: .3s; -} -.qa_list input[type="checkbox"]:checked ~ .plus{ - transform: rotate(45deg); -} -.qa_list label{ - display: block; - position: absolute; - top: 3px; - left: 30px; - padding: 5px; - font-size: 23px; - cursor: pointer; - transition: .3s; -} -.qa_list .ans{ - position: relative; - display: none; - color: black; - margin: 5px; - padding: 10px 10px 20px 10px; -} -.qa_list input[type="checkbox"]:checked ~ div.ans{ - display: block; - animation: slidein 0.5s; -} -.qa_list input{ - display: none; -} - -/* --------------------------------------- //Q&A ----------------------------------------------*/ - -/* ---------------------------------------- class-content -----------------------------------------*/ -.class-content-items{ - background-color:rgb(187, 235, 241); - padding: 60px; - margin-bottom: 60px; - margin-top: 60px; - box-shadow: 0 0 8px 4px #ccc; - font-size: 1.1rem; -} -#class-content .class-content-items { - display: flex; - align-items: center; - justify-content: space-evenly; - flex-direction: row; - flex-wrap: wrap; - } - .class-content-items-left{ - width: 60%; - padding-right: 35px; - border-right: solid 2px #446; - } - .class-content-dl-left{ - margin-right: 35px; - } - .class-content-dl > dt{ - background-color: rgb(87, 87, 87); - color: white; - padding: 3px 4px; - display: inline-block; - margin-bottom: 4px; - } - .class-content-dl > dd{ - margin-left: 60px; - margin-bottom: 5px; - } - .bottom{ - margin-left: 25px; - } - dl dt { - margin: 0 1ex; padding: 0 1ex; width: 6em; - border:rgb(80, 224, 243) solid; border-width: 0 0 1px 1.2em; -} -@media screen and (min-width: 1100px){ - .framebox { - border: double 5px gold; - display: block; - position: absolute; - left: 60% ; - bottom: 10px; - } - .clear {clear: both;} -} -@media screen and (max-width: 1099px){ - .framebox { - border: double 5px gold; - display: block; - margin-left: 40px; - } -} - -/* ----------------------------------------//class_content -----------------------------------------*/ - -/*------------------------------------------ infoのcss -------------------------------------------------*/ -table.LectureSchedule{ - text-align: center; - border-collapse: collapse; - border: 1px solid black; -} -table.LectureSchedule td.num{ - text-align: right; - padding-right: 1.2em; - } - - table.LectureSchedule td.date{ - text-align: left; - padding-left: 0.7em; - } - - table.LectureSchedule td.room{ - text-align: left; - padding-left: 0.7em; - padding-right: 0.7em; - } - table.LectureSchedule td.lesson{ - text-align: left; - padding-left: 0.5em; - } - -/*------------------------------------------//infoのcss -------------------------------------------------*/ - -/*------------------------------------------ footer -------------------------------------------------*/ -footer { /* XXX: Change ME! */ - border-top: 1px dashed #888; - text-align: right; font-size: 70%; -} -table.school tr {visibility: collapse;} -table.school tr.match {visibility: visible;} -table.border, table.border td, table.border th { - border: 1px solid #446; border-collapse: collapse; padding: 0.2ex 0.4ex; -} -table.border th {text-align: left; padding: 0.2ex 0.8ex;} -table.form th:first-child {min-width: 10em;} - - -/*------------------------------------------ //footer -------------------------------------------------*/ \ No newline at end of file diff --git a/test.html b/test.html deleted file mode 100644 index 6914446..0000000 --- a/test.html +++ /dev/null @@ -1,59 +0,0 @@ - - -Junior-Doctor Chokai Academy - - - - - - -
-
- -
-
- Junior-Doctor Chokai Academy -

ジュニアドクター鳥海塾

-
-
- - -
-

第1期 受講生募集

- キャラ画像ウミリク -
-

鳥海塾でどんなことが学べるの?

-

まずは、プログラミングの基礎を身に付けます。そして、情報技術が身近な - 地域社会のどんな場面に使われているのかを学びます。講座の終わりには、受講 - 生それぞれが自分のアイディアを出してオリジナルのプログラミングづくりに挑 - 戦します。

-

実際の授業では、大学の先生や大学生のお兄さんお姉さんがみなさん - の学びをサポートします。授業当日に学校行事やイベントで欠席になる場合には、 - オンラインでの補講にも対応します。

-
-
-

鳥海塾で学びを積み上げて「鳥海山の頂 (2236m)」を目指そう !

-

鳥海塾では受講生の学習の記録を積み重ね、標高メートルとして高さで示し - ながら、名峰「鳥海山」の頂上標高2236メートルを目指して登っていきます。

-

受講生のみなさんの研究を鳥海山から世界に向けて発信する気持ちで、一緒に挑 - 戦していきましょう。

-
- キャラ画像ウミ浮輪 - -
- - - - -