雲を掴むような

二十歳の原点、卒業式まで死にません、八本脚の蝶

2/15

バイト終わり、ずっとパソコンと向き合って一つのWebページを作った。フリー素材だらけで言葉も嘘臭くて、なんとも怪しげなサイトだけど・・・

f:id:GNyabeyabe:20200215222651p:plain

f:id:GNyabeyabe:20200215222655p:plain

f:id:GNyabeyabe:20200215222712p:plain

因みにログイン機能もなければAIカウンセリング機能も勿論無い。ただの文字データと画像データの組み合わせられた絵みたいなもんです・・・いつか実装しますので・・・多分。

眠れない時間や電車の移動時間などちびちび使ってプログラミングを勉強していた私が、一つ形として物を作れたのはなんとも嬉しい事である。

雲野いちかの保健室というタイトルは、南條あやさんのサイト「南條あやの保健室」にあやかっている。何度もブログに書いているが、南條あやの保健室は自分に大きな影響を与えた作品(議論の余地あれど、私はあれは文学作品だと思ってる)の一つで。

恐れ多いけれども、自分のサイトを持つときはこの名前にしたかったんですよね・・・

 

保健室って、縁の無い人には全くもって関わりのない場所で、だからこそ私にとっては結界の張られたような安心感のある場所というか・・・不思議な存在の場所なんですよね。

元々重い喘息持ちだったし、中学の頃からは不眠やストレスから来る発熱とか胃炎とかもあって、とにかくすぐに体調を崩すから保健室にはよく行っていて。そういう時に一定数「サボりかよー笑」みたいな事を言ってくる健常者たちが居るわけですね。それがなんかもう、家庭事情へのコンプレックスとかも絡んで、とにかく憎くて憎くて・・・だから、なるべく保健室には行かないように頑張っていたのだが、本当は保健室の緊張感と安心感の相まった感じとか、自分だけ授業に出ないでベッドに入って介抱してもらう特別な感じとかめちゃめちゃ好きで、「なんで保健室に行くのは悪い事なのだろう」と本気で思い続けていた。

実は友達にも内緒で高校で保健室登校してたことがあるし、大学でも一度39度の熱でぶっ倒れて保健室に運ばれたことがある。自分にとって保健室って大切な場所なんですよね・・・

 

なんというか、上手く言えないのですが、

休むことは恥ずべきことじゃないし、鬱は病気だし、人はそれぞれだし、あなたは悪くないし、、、等々自分がこれまでの人生でずっと言われたかった言葉が沢山ある訳で・・それを直接でもネット上でも文面でも、誰かに言ってあげられたら良いと思うわけです。

なんで心理学を勉強して、ブログを書いて、プログラミングまで始めたのか、上手く説明ができないんですけど、結局そういう事なのかな、と、ふと思いました。

処女作のHTMLとCSSのコード貼るので、もしご指導いただけることあればお願いします・・・

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sample1</title>

<link rel ="stylesheet" href="sample1css.css">

</head>

<body>

<header>

<div class="container">

<div class="header-left">

<div class="logo">雲野いちかの保健室</div>

</div>

<div class="header-right">

<a href="#" class="login">ログイン</a>

</div>

</div>

</header>

<div class="top-wrapper">

<div class="container">

<h1>雲野いちかの保健室</h1>

<p>このサイトでは、自分のメンタルヘルスの状態や精神疾患の可能性をAIが自動的に調べ、</p> <p>自分で出来る対策やお近くの心療内科などの情報の入手を始め、</p> <p>カウンセラーへの相談や同じ悩みを持つ方々との交流が出来ます。</p> <p></p> <p>また、心理学の勉強や心理系大学院受験、公認心理師臨床心理士資格の勉強に役立てる事ができます。</p> <p>ひとりで悩まず、自分の心と身体に上手く向き合いましょう!</p>

<div class="btn-wrapper">

<a href="#" class="btn signup">新規登録はこちら</a>

<p>or sign up with</p>  

<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebookで登録</a>  

<a href="#" class="btn twitter"><span class="fa fa-twitter"></span>twitterで登録</a>

</div>

</div>

</div>

<div class="lesson-wrapper">

<div class="container">

<div class="heading">

<h2>この保健室でできること</h2>

</div>

<div class="lessons">

<div class="lesson">

<div class="lesson-icon">

<img src="https://frame-illust.com/fi/wp-content/uploads/2015/06/5b8f290e598db55700d2e410a9283930.png"> <p>メンタルチェック</p>

</div>

<p class="txt-contents">今の体調・生活環境・考え方などの質問に答えることでAIがメンタルチェックしてくれます。</p>

</div>

<div class="lesson">

<div class="lesson-icon">

<img src="https://frame-illust.com/fi/wp-content/uploads/2015/06/5b8f290e598db55700d2e410a9283930.png"> <p>心理を学ぶ</p>

</div>

<p class="txt-contents">日常で使える心理学を始め、メンタルヘルスへの対策や症例など様々な事を学びます。大学院や公認心理師臨床心理士の試験勉強まで対応しています。</p>

</div> <div class="lesson">

<div class="lesson-icon">

<img src="https://frame-illust.com/fi/wp-content/uploads/2015/06/5b8f290e598db55700d2e410a9283930.png"> <p>コミュニティ</p>

</div> <p class="txt-contents">同じメンタルヘルスの悩みを抱える方や、カウンセラーとの交流ができます。ひとりで悩まず、打ち明けてみませんか?</p>

</div>

<div class="lesson">

<div class="lesson-icon">

<img src="https://frame-illust.com/fi/wp-content/uploads/2015/06/5b8f290e598db55700d2e410a9283930.png"> <p>日記帳</p>

</div>

<p class="txt-contents">雲野いちかの日記帳です。毎日更新しています。</p>

</div>

</div>  

</div>

</div>

<div class="message-wrapper">

<div class="container">

<div class="heading">

<h2>鬱病をはじめ様々な生きづらさは病気であり、治療によって改善される可能性があります。</h2>

<h3>心のことをよく知って、自分と向き合ってみませんか?</h3>

</div>

</div>

</div>

<div class="contact-form">

<h3 class="section-title">お問い合わせ</h3>

<p>メールアドレス</p>

<input>

<p>お問い合わせ内容(必須)</p>

<textarea></textarea>

<p>必須項目は必ずご入力ください</p>

<input class="contact-submit" type="submit" value="送信">

</div>

<footer>

<p>by雲野いちか</p>

</div>

</footer>

</body>

</html>

CSS

body{
margin:0;
font-family:"Hiragino Kaku Gothic ProN";
}
a{
text-decoration:none;
}
.container{
width:1170px;
padding:0 15px;
margin:0 auto;
}
.top-wrapper{
padding:180px 0 100px 0;
background-image: url("http://blender3dcg.com/wp-content/uploads/2019/04/school_infirmary_color_001.png");
background-size:cover;
color:black;
text-align:center;
}
.top-wrapper{
opacity:0.7;
font-size:30px;
letter-spacing:5px;
margin-bottom:30px;
}
.top-wrapper p{
font-size:20px;
opacity:0.7
}
.btn-wrapper{
margin:10px 0;
}
.signup{
background-color:#00d665;
}
.facebook{
background-color:#3b5998;
margin-right:10px;
}
.twitter{
background-color:#55acee;
}
.btn{
padding:2px 10px;
color:white;
display:inline-block;
opacity:0.8;
border-radius:4px;
}
.fa{
margin-right:5px;
}
header{
height:65px;
width:100%;
background-color:rgba(34,49,52,0.9);
position:fixed;
top:0;
z-index:10;
}
.logo{
color:white;
margin-top:15px;
}
.header-left{
float:left;
}
.header-right{
float:right;
background-color:rgba(255,255,255,0.3);
}
.header-right a{
line-height:65px;
padding:0 25px;
color:white;
display:block;
}
.lesson-wrapper{
height:500px;
padding-bottom:80px;
background-color:#f7f7f7;
text-align:center
}
.heading{
padding-top:60px;
padding-bottom:30px;
color:#5f5d60;
}
.heading h2{
font-weight:normal;
}
.lesson{
float:left;
width:25%;
}
.lesson-icon{
position:relative;
}
.lesson-icon p{
position:absolute;
top:90px;
width: 100%;
color:#3A393A;
font-size:20px;
}
img{
width:200px;
height:200px;
margin-top:10px;
}

.txt-contents{
width:80%;
display:inline-block;
margin-top:20px;
font-size:15px;
color:#515052;
}
.heading h3{
font-weight:normal;
}
.message-wrapper{
border-bottom:1px solid #eee;
padding-bottom:80px;
text-align:center;
}
.contact-form{
text-align:center;
padding-top:30px;
}
input,textarea{
width:500px;
margin-top:5px;
margin-bottom:15px;
padding:10px;
font-size:12px;
border:1px solid #dee7ec;
}
.contact-submit{
background-color:#dee7ec;
color:#889eab;
}
footer{
padding-top:30px;
background-color:rgba(34,49,52,0.9);
}
footer p{
color:white;
font-size:12px;
}

赤い公園 / 絶対零度