diff --git a/README.md b/README.md index 9a70b49..1821d87 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ * [テストのページ](https://www.koeki-prj.org/jd/testpage/test.html) * [1127使用](https://www.koeki-prj.org/jd/1127-use/main.html) * [活動総掲載](https://www.koeki-prj.org/jd/activities/index.html) +* [新しいサイトデザイン](https://www.koeki-prj.org/jd/new-web-idea/new.html) ジュニアドクター鳥海塾2022 * 三年　伊藤理乃 diff --git a/jdmain.css b/jdmain.css index 0b09c4c..818a689 100644 --- a/jdmain.css +++ b/jdmain.css @@ -874,9 +874,7 @@ margin: 0 1ex; padding: 0 1ex; width: 6em; border:rgb(80, 224, 243) solid; border-width: 0 0 1px 1.2em; } -.page-btn{ - -} + .page-btn-ul{ display: flex; justify-content: center; diff --git a/new-web-idea/img/bg.png b/new-web-idea/img/bg.png new file mode 100644 index 0000000..fa6ec93 --- /dev/null +++ b/new-web-idea/img/bg.png Binary files differ diff --git a/new-web-idea/img/kouekilogo.png b/new-web-idea/img/kouekilogo.png new file mode 100644 index 0000000..8ad3697 --- /dev/null +++ b/new-web-idea/img/kouekilogo.png Binary files differ diff --git a/new-web-idea/img/list-comment.png b/new-web-idea/img/list-comment.png new file mode 100644 index 0000000..cb837e0 --- /dev/null +++ b/new-web-idea/img/list-comment.png Binary files differ diff --git a/new-web-idea/img/list-human.png b/new-web-idea/img/list-human.png new file mode 100644 index 0000000..28073d7 --- /dev/null +++ b/new-web-idea/img/list-human.png Binary files differ diff --git a/new-web-idea/img/list-megahon.png b/new-web-idea/img/list-megahon.png new file mode 100644 index 0000000..c726130 --- /dev/null +++ b/new-web-idea/img/list-megahon.png Binary files differ diff --git a/new-web-idea/img/list-pc.png b/new-web-idea/img/list-pc.png new file mode 100644 index 0000000..aee1eba --- /dev/null +++ b/new-web-idea/img/list-pc.png Binary files differ diff --git a/new-web-idea/img/list-pen.png b/new-web-idea/img/list-pen.png new file mode 100644 index 0000000..3633d35 --- /dev/null +++ b/new-web-idea/img/list-pen.png Binary files differ diff --git a/new-web-idea/img/sticky-note-blue.png b/new-web-idea/img/sticky-note-blue.png new file mode 100644 index 0000000..93af00e --- /dev/null +++ b/new-web-idea/img/sticky-note-blue.png Binary files differ diff --git a/new-web-idea/img/sticky-note-yellow.png b/new-web-idea/img/sticky-note-yellow.png new file mode 100644 index 0000000..86b8be0 --- /dev/null +++ b/new-web-idea/img/sticky-note-yellow.png Binary files differ diff --git a/new-web-idea/new.css b/new-web-idea/new.css new file mode 100644 index 0000000..c892b18 --- /dev/null +++ b/new-web-idea/new.css @@ -0,0 +1,714 @@ +/* + * CSS for hatarakukatati project + */ + /*全ページ共通部分のCSS始まり*/ + @charset "UTF-8"; + + * { + margin: 0px; + padding: 0px; + } + + html { + font-size: 100%; + } + body{ + margin: 0; + height: 100%; + font-family: 'DotGothic16', sans-serif; + font-family: 'Noto Sans JP', sans-serif; + color: rgb(20, 20, 20); + line-height: 1.7; + } + img { + max-width: 100%; + object-fit: cover; + } + a{ + text-decoration: none; + color: #333; + padding-bottom: 1px; + transition: 0.5ms; + } + li{ + list-style: none; + } + .section-title-box{ + text-align: center; + } + .section-title-box .section-title{ + border: rgb(58, 58, 58) solid 2px; + padding: 3px 55px 3px 55px; + display: inline-block; + background-color: rgb(255, 255, 123); + position: relative; + } + .section-title-box :before, .section-title-box :after { + content: ''; + position: absolute; + top: 50%; + display: inline-block; + width: 100px; + height: 2px; + border-top: solid 1px black; + border-bottom: solid 1px black; + } + + .section-title-box:before { + left:-120px; + } + .section-title-box:after { + left: 280px; + } + .section-title-box .title-red{ + background-color: #FFA3A3; + margin-bottom: 80px; + } + /*全ページ共通部分のCSS終わり*/ + +/*ヘッダーのCSS始まり*/ + #header{ + display: flex; + align-items: center; + margin-left: 25px; + margin-right: 25px; + justify-content: space-between; + background-color: #fff; + padding-top: 5px; + padding-bottom: 5px; + } + .title-logo a img{ + width: 80px; + height: 80px; +} + .logo-space{ + display: flex; + align-items: center; + } + .header-nav .header-list{ + display: flex; + align-items: center; + justify-content: flex-end; + + } + .header-nav .header-list li{ + border-left: solid 2px #b5b2b2a2; + } + .header-nav .header-list li:nth-child(5){ + border-right: solid 2px #b5b2b2a2; + } + .header-nav .header-list li a{ + display: inline-block; + } + .header-nav .header-list li a:hover{ + opacity: 0.6; + transition: all 0.3s 0s ease; + } + .header-nav .header-list li a .header-list_item{ + padding: 0 40px 0 40px; + } + .header-nav .header-list li a p{ + text-align: center; + } + .header-nav .header-list li a .list-title{ + font-size: 1.2rem; + } + .header-nav .header-list li a .list-sub-title{ + font-size: 0.9rem; + } + /*ヘッダーのCSS終わり*/ + /*ヘッダー*/ + #footer{ + text-align: center; + color: #fff; + background-color: #454545; + padding: 20px 0 20px 0; + } + /*ヘッダー終わり*/ + + /*-----------------------------------------------------ハタラクをみるページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/ + /*メインビジュアルのCSS始まり*/ + #mainvisual{ + position: relative; + height: 78vh; + width: auto; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + .hataraku-mainvisual{ + background-image: url(../2022-activities/img/0716-4.JPG); + } + #mainvisual .mainvisual-inner{ + position: absolute; + background-color: #ffffffc3; + width: 500px; + top: 150px; + left: 70px; + } + .mainvisual-inner .mainvisual-title{ + text-align: center; + font-size: 2.4rem; + font-weight: bold; + margin-bottom: 60px; + padding-top: 30px; + } + .mainvisual-inner .mainvisual-title::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 225px; + height: 2px; + background: #868686; + transform: translateX(-50%); + } + .mainvisual-inner .mainvisual-text{ + text-align: center; + font-size: 1.1rem; + line-height: 1.7; + padding-bottom: 30px; + } + #mainvisual .decoration{ + position: absolute; + right: 60px; + bottom: -50px; + font-size: 5.5rem; + color: #666666ee; + font-weight: bold; + letter-spacing: 7px; + font-family: 'Corben', cursive; + } + /*メインビジュアルのCSS終わり*/ + /*働き方を見るのCSS始まり*/ + .select-view{ + background-color: #fff1f1; + width: 100%; + } + .select-view .select-inner{ + margin: 0 120px 0 120px; + padding-top: 100px; + padding-bottom: 100px; + + } + .select-item{ + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 90px; + } + .select-li{ + border: #818181 solid 2px; + border-radius: 15px; + height: 400px; + width: 350px; + } + .select-li:hover{ + opacity: 0.7; + transition: all 0.3s 0s ease; + } + .select-pink{ + background-color: rgb(255, 225, 230); + } + .select-orange{ + background-color: rgb(255, 217, 147); + } + .select-yellow{ + background-color: rgb(255, 255, 162); + } + .select-box .select-title-box{ + text-align: center; + margin-top: -20px; + margin-bottom: 15px; + } + .select-title-box .select-title{ + border: rgb(58, 58, 58) solid 2px; + border-radius: 10px; + width: 200px; + height: 45px; + display: inline-block; + background-color: #fff; + padding-top: 2.5px; + font-size: 1.2rem; + } + .select-box .select-text{ + margin-top: 30px; + margin-left: 15px; + margin-right: 15px; + + } + .select-box figure{ + margin: 0 auto; + width: 250px; + } + .select-box img{ + width: 250px; + height: 150px; + border: #fff solid 13px; + } + /*働き方を見るのCSS終わり*/ + + /*--------記事の一覧を見るところ始まり----------------*/ + #article-view { + padding-bottom: 50px; + padding-top: 40px; + background-image: url(../new-web-idea/img/bg.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + .article-flex-box{ + display: flex; + justify-content: space-around; + } + .view-left{ + width: 55%; + margin-top: 70px; + } + .view-left article { + position: relative; + } + .article-inner{ + margin-bottom: 100px; + border: #333 solid 2px; + border-radius: 15px; + padding: 30px 15px 15px 15px; + background-color: rgb(255, 225, 230); + position: relative; + } + .article-inner .sticky-note{ + width: 250px; + transform: rotate( -30deg ); + position: absolute; + left: -50px; + top: -16px; + } + .article-flex{ + display: flex; + justify-content: space-around; + align-items: center; + } + .article-title-red{ + color: #FF6341; + font-size: 1.8rem; + } + .article-flex img{ + width: 350px; + height: 300px; + margin-left: 30px; + border: 10px solid #ffffff; + + } + .view-left .article-title { + font-size: 1.5rem; + margin: 0 0 15px 30px; + } + .article-box-left .article-name{ + position: relative; + } + .article-box-left .article-name::after{ + content: ''; + position: absolute; + top: 120%; + left: 20%; + width: 200px; + height: 1px; + background: #aaaaaa; + transform: translateX(-50%); + } + .article-box-left .article-name{ + margin-left: 30px; + font-weight: bold; + margin-bottom: 20px; + } + .more-content-btn{ + text-align: center; + margin-top: 30px; + } + .more-content-btn a{ + border-bottom: 5px solid #e68217; + text-decoration: none; + color: #fff; + border-radius: 100vh; + background-color: #ff9d35; + padding: 10px 30px; + transition: .3s; + font-size: 1.4rem; + } + .more-content-btn a:hover{ + margin-top: 3px; + border-bottom: 2px solid #ff9d35; + } + /*-------------------------------------サイドバー ---------------------------*/ + .sidebarbox { + padding: 0.2em 1em; + background: #666; + width: 210px; + } + .sidebarbox p { + margin: 0; + padding: 0; + color: #fff; + } +#form2{ + position:relative; + width:500px; + margin-bottom:20px; + } + #sbox2{ + height:35px; + padding:0 10px; + position:absolute; + left:0; + top:0; + border-radius:2px; + outline:0; + background:#fff; + box-shadow: 2px 2px 6px #333; + } + #sbtn2{ + height:35px; + position:absolute; + left:255px;/*アイコン左右の位置調整*/ + top:0; + background:none; + color:#666; + border:none; + font-size:20px;/*アイコンサイズ*/ + } + #sbtn5:hover{ + color:#7fbfff; + } + + #sidebar { + width: 25%; + padding: 20px; + margin-top: 85px; + } + #sidebar .side-title { + font-size: 1.125rem; + font-weight: bold; + margin-bottom: 30px; + } + .archive { + text-align: center; + margin-bottom: 60px; + position: sticky; + top: 0; + padding-top: 70px; + } + .archive li { + font-size: 0.9rem; + padding: 16px; + } + .corporate-title-box{ + text-align: center; + margin-top: -20px; + margin-bottom: 15px; + } + .corporate-title{ + border: rgb(58, 58, 58) solid 2px; + border-radius: 10px; + width: 200px; + height: 45px; + display: inline-block; + background-color: #fff; + padding-top: 2.5px; + font-size: 1.2rem; + background-color: rgb(255, 255, 162); + } + .corporate-title-orange{ + background-color: rgb(255, 217, 147); + } + .corporate-box{ + border: #818181 solid 2px; + border-radius: 15px; + display: inline-block; + background-color: #fff; + } + .corporate-box:nth-child(2){ + height: 320px; + margin-top: 40px; + } + + .page-btn-ul{ + display: flex; + justify-content: center; + margin-bottom: 50px; + } + .page-btn-ul li{ + list-style: none; + margin-right: 30px; + margin-left: 30px; + font-size: 1.6rem; + background-color: rgb(255, 130, 72); + width: 45px; + height: 45px; + border-radius: 50%; + text-align: center; + } + .page-btn-ul li a{ + color: #fff; + text-decoration: none; + } + .page-btn-ul li:hover{ + opacity: 0.7; + } + + /*------------------------------------------- + SP + -------------------------------------------*/ + @media screen and (max-width: 767px) { + #article-view { + flex-direction: column; + } + .view-flex { + width: 100%; + } + #sidebar { + width: 100%; + padding: 0; + margin: 0; + } + .archive { + padding-top: 0; + } + main .article-title { + font-size: 1.3rem; + margin: 10px 0 15px 0; + } + .article-title-area{ + padding-top: 50px; + + } + .article-title-area figure{ + width: 70px; + margin-right: 15px; + } + .meta{ + margin-left: 80px; + } + .meta li{ + font-size: 0.7rem; + } + } + /*記事の一覧見るところ終わり*/ + /*-----------------------------------------------------ハタラクをみるページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/ + /*みんなの声コーナー*/ + #voice{ + background-color: #fff1f1; + } + .voice-mainvisual{ + background-image: url(../hatarakuweb/hataraku_view/img/pink2.jpg); + } + .post-container { + max-width: 600px; + margin: 60px auto 0 auto; + padding-bottom: 60px; + padding-left: 15px; + padding-right: 15px; + clear: both; + } + .posts-index{ + padding-top: 80px; + } + .posts-index-item { + padding: 25px 30px; + background-color: white; + overflow: hidden; + box-shadow: 0 2px 6px #c1ced7; + margin-top: 40px; + } +/*プロフィール*/ +#president_profile{ + position: relative; + height: 150vh; + width: auto; + background-image: url(img/22707667.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + + + +.president_title-box .president_profile_title{ + font-size: 2.5em; + border-radius: 35px; + border: solid #000 2px; + background-color: #fff; +} + +.president_profile_title{ + padding: 0 20px; +} + +h3.president_profile_title{ + position: absolute; + top: 20px; + right: 850px; + font-weight: bold; +} + +h3.president_profile_title::after{ + content: ''; + color: #ff6dfd; +} + +.profile{ + font-size: 2em; + display: inline-block; +} + +.profile-bg{ + position: relative; +} + +.president-item{ + margin-top: 60px; + position: absolute; + top: 0; + left: 500px; + display: flex; + align-items: center; + justify-content: space-around; + background-color: rgb(255, 218, 224); + height: 600px; + border-radius: 50px 0 0 50px ; + border: solid 3px #777777; + padding-right: 40px; + padding-left: 40px; +} + +.president-item img{ + width: 500px; + border: 10px solid #ffffff; + margin-left: 20px; +} + +h4{ + font-size: 2.5em; + font-weight: bold; + margin-top: 60px; + border-bottom: 2px #000000; +} + +.president_profile_name::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 225px; + height: 2px; + background: #818181; + transform: translateX(-50%); +} +/*会社概要*/ +.profile-bg-2{ + position: relative; +} + +.overview-item{ + margin-top: 725px; + position: absolute; + top: 0; + right: 700px; + align-items: center; + justify-content: space-around; + background-color: rgb(255, 218, 224); + height: 600px; + width: 1000px; + border-radius: 0 50px 50px 0; + border: solid 3px #777777; + padding-left: 40px; + padding-right: 40px; +} + +.profile-bg-2 img{ + width: 580px; + position:absolute; + top: 735px; + left: 1050px; +} + +.overview-title-box{ + padding: 30px 0 0; +} + +.overview-title-box .overview-title{ + font-size: 2.5em; + border-radius: 35px; + border: solid #000 2px; + display: inline-block; + background-color: #fff; + padding: 0 30px; +} + +.overview{ + font-size: 2em; + transform: translateX(20%); + transform: translateY(5%); + line-height: 2.5; +} + +/*記事内容始まり*/ +#article{ + background-color: rgb(255, 225, 230); +} + +div.article-box{ + padding: 20px 100px; + margin: 50px 100px; + background-color: #fff; + border: solid #000 3px; + border-radius: 40px; +} + +.article_work{ + padding: 40px 0 60px; + font-size: 3em; + text-align: center; +} + + + + +.article-work-text{ + font-size: 30px; + padding: 70px 0; +} + + + +.section-title{ + background-color: #fff; + margin: 0 6em; + padding: 1em 2em; + position: relative; + z-index: 1; + text-align: center; +} +.section-title::before, +.section-title::after { + content: ""; + height: 100%; + position: absolute; + width: 100%; +} +.section-title::before { + background-color: rgb(255, 167, 182); + left: 0; + top: 0; + z-index: -1; + border: solid 2px #000; +} + +.section-title::after { + background-color: #fff; + top: 5px; + left: 5px; + z-index: -2; + border: solid 2px #000; +} + +/*社長ページ終わり*/ \ No newline at end of file diff --git a/new-web-idea/new.html b/new-web-idea/new.html new file mode 100644 index 0000000..7f3f319 --- /dev/null +++ b/new-web-idea/new.html @@ -0,0 +1,127 @@ + + +Junior-Doctor Chokai Academy + + + + + + + + + + + + + + + + +
+
+
+

2021年度活動掲載

+

生徒たちがどんなことを学んでいるのか
見れるようにしました。

+
+

Study View

+
+
+
+
+

活動掲載

+ +
+
+ 付箋 +
+
+

活動掲載　#03

+

2022.8.02
第6回目本講義

+

今回の本講義では、本学OGの大石桃菜様（株式会社プロトソリューション）をゲスト講師として お招きして、会社紹介や現在のお仕事ついてお話しいただきました。 +

+
+ +
+
+
+ + +
+
+ 付箋 +
+
+

活動掲載　#02

+

2022.7.30
第5回本講義

+

今回の本講義では、配列と配列に関わるメソッドを学びました。配列の作り方や値の入れ方・取り出し方、 配列への処理を行うメソッドを学んだ後、練習問題を行いました。 +

+
+ +
+
+
+ + +
+
+ 付箋 +
+
+

活動掲載　#01

+

2022.07.16
本講義4回目

+

今回の本講義では、本学OGの桂島倫子様（株式会社ＮＴＴデータ フィナンシャルテクノロジー）をゲスト講師として お招きして、現在お仕事でご担当されている法人向けインターネットバンキングの開発・維持と、 「想像力」についてお話しいただきました。 +

+
+ +
+
+
+ +

もっと見る

+
+ + +
+
+
+ + + + + + + + + diff --git "a/new-web-idea/\350\231\253\347\234\274\351\217\241\343\201\256\347\204\241\346\226\231\343\202\242\343\202\244\343\202\263\343\203\2638.png" "b/new-web-idea/\350\231\253\347\234\274\351\217\241\343\201\256\347\204\241\346\226\231\343\202\242\343\202\244\343\202\263\343\203\2638.png" new file mode 100644 index 0000000..4f11300 --- /dev/null +++ "b/new-web-idea/\350\231\253\347\234\274\351\217\241\343\201\256\347\204\241\346\226\231\343\202\242\343\202\244\343\202\263\343\203\2638.png" Binary files differ