2018-11-20

Codeship04・05・06

こんにちは。みやうしです。

今回は第４回〜６回の内容について記録したいと思います。

【やったこと】

・webページのコードを書く

・webページの完成

・animationのコードを書く

４回は３回に続いてwebページのコードをゴリゴリ書いていきました。

５回でついにwebページの完成。やったね！

６回はcssのanimationを習い、見本のanimationを再現する練習を行いました。

webページに時間を取られてしまい、大幅なタイムロス。

インプットと試行錯誤は教室でやらずにお家でやっておかなければならないが、

早朝バイトとの相性が悪く、体力がついて行かず。。。

体力をつけるのと、朝活をきちんと行うことで解決したいです。

また、インプットからの再現の作業についてももう少し早く試行を回せるような気がするので、これもスピードアップに向けての課題。

卑近なところでいうと、タイピングの速度と正確性の向上か。

以下webページのコードです。

書き方やプロパティの使い方におかしなところがあれば指摘してくださると嬉しいです。

>||

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
<link rel="stylesheet" href="./intro_website01.css">
</head>

<body>
<header class="header01">
<nav>
<h1>Portfolio</h1>
<ul>
<li><a href="#Profile">Profile</a></li>
<li><a href="#SelfPR">Self PR</a></li>
<li><a href="#Vision">Vision</a></li>
</ul>
</nav>
<section>
<h1>人生に失敗がないと、人生を失敗する</h1>
<p>宮内　僚 1st Portfolio</p>
</section>
</header>
<main class="contents01">
<article>
<section id="Profile">
<h2 class="en">Profile</h2>
<p></p>
<h2>自己紹介</h2>
<div class="Proimg-ul">
<img src="https://scontent-nrt1-1.xx.fbcdn.net/v/t1.0-9/17201091_1810979605820707_3661003410239909541_n.jpg?_nc_cat=109&_nc_ht=scontent-nrt1-1.xx&oh=5bee2c26f166af3f5284c238c56cfad8&oe=5C87FCF4"
alt="画像が見つかりませんでした">
<ul class="Pro01">
<li><span>Name. </span> 宮内　僚</li>
<li><span>Age. </span> 21</li>
<li><span>Career. </span> 2019年3月 法政大学卒業</li>
</ul>
</div>
</section>
<section id="SelfPR">
<h2 class="en">Self PR</h2>
<p></p>
<h2>自己PR</h2>
<ul class="Self">
<li>好きなこと <span> 私は舞台観劇が好きです。年間30以上の舞台を観ます。その知見を生かして、自分自身も舞台を作ります。</span></li>
<li>得意なこと <span>プログラミングを得意なことにする予定です。</span></li>
<li>今までの経験 <span>大学時代は舞台製作をしていました。２年間は他大サークルでミュージカルを作り、３年目には埼玉の劇団で客演（主演）とサークルOBOG有志で舞台製作をしました。現在は劇団の旗揚げ公演を企画中です。</span></li>
</ul>
</section>
<section id="Vision">
<h2 class="en">Vision</h2>
<p class="V-under"></p>
<h2>目標</h2>
<div class="Vision01">
<h3>クリエイティブ性を取り入れた人材になる</h3>
<div class="creative">
<p>あああああああああああああああああああああああああああああああああああ。<br>あああああああああああああああああああああああ。<br>ああああああああああああああああああああああああああああああ。<br>あああああああああああああああああああああああああ。</p>
<p class="latterhalf">ああああああああああああああああああああ。<br>あああああああああああああああ。<br>あああああああああああああああああああああ。</p>
</div>
<h3 class="Next">NEXT COMINGSOON</h3>
</div>
</section>
</article>
</main>

<footer>
<section id="footer">
<h1 class="TOP"><a href="#top">TOP</a></h1>
<small>created by </small>Miyauchi Ryo
</section>

</footer>

</body>

</html>

||<

>||

@charset "utf-8";

*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}

.header01{
width: 100%;
height: 500px;
color: coral;
background-image: url(https://static.tenki.jp/images/inapp/mountain-app/photo/photo_172_01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
overflow: auto;
}


nav{
width:100%;
height: 80px;
color: white;
background-color: #007BC7;
line-height: 80px;
height: 80px;
display: flex;
justify-content: space-between;
}



nav h1{
margin-top: 0;
margin-bottom: 2px!important;
font-size: 150px;
padding:0 15px;
font-size: 120%;
}
 
nav ul{
margin-top: 0;
margin-bottom: 2px!important;
padding: 0 15px;
list-style: none;
display: flex;
}

nav ul li{
padding:0 15px;
}

a{
text-decoration: none;
}

nav ul a:link{
color: white;
}

nav ul a:visited{
color: white;
}

nav ul a:hover{
color: white;
}

nav ul a:active{
color: white;
}

.header01 section{
text-align: center;
padding-top: 180px;
}


#Profile{
width: 100%;
padding-top: 40px;
padding-bottom: 30px;
font-size: 20px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
top:10px;
line-height: 40px;
color: rgb(117, 116, 116);
}

h2.en:first-letter{
color: rgb(23, 135, 204);
padding-top: 10px;
}

#Profile p{
border-top: 4px solid rgb(23, 135, 204); 
width:40px;
margin: 0 auto;
}

.Proimg-ul{
top:10px;
bottom:5px;
left:20px;
right:20px;
padding-top: 10px;
color: black;
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
}

.Proimg-ul img{
width: 30%;
height: 40%;
top: 50px;
}

.Pro01{
line-height:50px;
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
}

.Pro01 li{
display: flex;
justify-content: left;
}


#SelfPR{
background-image: url(http://miteco.jp/wp/wp-content/uploads/2016/09/uchiura_e-1200x900.jpg);
width: 100%;
padding-top: 40px;
font-size: 20px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
top:10px;
line-height: 40px;
color: rgb(117, 116, 116);
}

#SelfPR p{
border-top: 4px solid rgb(23, 135, 204); 
width:40px;
margin: 0 auto;
}

.Self{
margin: 30px 100px 0;
display: flex;
justify-content: space-between;
}

ul.Self li{
width: 40%;
margin: 0 10px;
font-size: 20px;
color: rgb(81, 157, 204);
background-color: rgba(223, 250, 250, 0.459);
border: 8px solid rgb(233, 252, 252);
display: flex;
flex-direction: column;
}

.Self li span{
color:black;
font-size: 15px;
}


#Vision{
width: 100%;
padding-top: 40px;
padding-bottom: 0px;
font-size: 20px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 40px;
color: rgb(117, 116, 116);
}

.V-under{
border-top: 4px solid rgb(23, 135, 204); 
width:40px;
margin: 0 auto;
}

.Vision01 h3{
padding: 20px 0 0;
color: rgb(23, 135, 204);
}

.creative{
color:black;
font-size: 12px;
width: 100%;
}

.latterhalf{
padding: 20px 0 0;
}

.Next{
font-size: 65px;
}

footer{
padding: 0 0;
}

#footer{
width: 100%;
height:150px;
color: white;
background-color: rgb(23, 135, 204);
padding: 40px 0 0;
text-align: center;
}

.TOP{
width:150px;
height:70px;
border:5px solid white;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

.TOP a:link{
color: white;
}

.TOP a:visited{
color: white;
}

.TOP a:hover{
color: white;
}

.TOP a:active{
color: white;
}

||<

2018-11-04

Codeship03

こんにちは！

どうも、みやうしです。

今回は三回目の教室がどんなだったかを記録したいと思います。

【やったこと】

・webページのコードを書く

これだけでした。。。

前回の二回目を経て、ある程度形ができたと思ったのですが、

講師の方にコードの煩雑さを指摘され、書き直しに。。。

どうやらHTMLで文字の大きさを変えたり、改行をしたり、レイアウトをするのは下策とのこと。こんなことはProgateなどの独学では教えてもらえません。

そんなこんなでボロクソのHTMLやCSSを書き直し、

再度同じページを書き直しました。

しかし、ここでも問題発生。。。

「下線が短くならねえ、、、、」

「なってもページの真ん中に来ねえ、、、、」

今日も元気にコーディング頑張ります・・・・・

みやうし

2018-10-29

Codeship01(.5)

こんにちは。

みやうしです。

前回はhtml, cssの基本的な使い方を習っていきました。

本日第二回なのですが。。。。

予習が全然進まない。

と言うのも、予習は簡単なホームページを作るというもの。

「まあいけるやろ（ハナホジ」

と、余裕綽々で進めたろと思っていたら、、、

「あれ、、、、ナビゲーションで全然右に寄らないぞ。。。寄ってもリストが横並びにならないぞ。。。。見本通りにならないぞ。。。。」

さあ、どうなる第二回。。。。。

みやうし

2018-10-29

Codeship01

どうもこんにちは。初めまして。

みやうしです。

ひょんなことからプログラミングに興味を持ち、学んで見ることに。

来たる１０月６日、ついにプログラミング教室第一回開催！

めでたい！

実を言うとプログラミング自体はPythonを一ヶ月くらい習ったことがあり、

初めてではないものの、

web系は本格的にやるのがこれが初。

オンラインのテキストは一通り読んだし、準備万端。

あんまわかんなかったけれど・・・。

（※PythonはAI Academyと言うところの夏講座みたいなのを受けました。基本は機械学習の話で、最後はwebアプリを作る感じ。面白かったが、身についたかは微妙。主に自分のコミット量が少なかったせいではある。）

とにかく、満を持して突撃しました。

結果としては、、、

つっっっっっっっっっっかれた！！！！！！！！！！

４時間ぶっ通しでhtmlとcssの基本を叩き込みました。

まだプログラミングとは言えないですが、html・cssでこのボリュームかと。

驚嘆せずにはおられない。

また、それぞれある程度の説明をサラッとしたら、あとは自分でひたすら書く。

わからなかったらオンラインテキストを見るか。ググるか。

それでもわからなかったら、初めて先生に聞くという形。

とにかく自分で頭を使って調べて、書いていくような内容でした。

初心者としては結構スパルタのように感じられましたが、それゆえに達成感もすでにありましたし、実際に知識が身についていくのだなと実感しました。

みやうし

詳しい内容は以下に説明。

HTML

１

HTMLの基本要素、カテゴリ、セクショニング〜エンベッド・コンテンツ、フォームの説明を読む

２

それらを使ったコーディング例を見る

３

１、２をみながらsampleのようなページレイアウトを作る

CSS

プロパティの説明・使い方を一通り読む

２

セレクタの説明を読む（ここから読みながら見本のコードを自分で書いて、実際に動かす練習をしました。）

第一回目はここまでで終了しました。

次回の教室までにwebsiteの作成、cssアニメーションの導入、レスポンシブwebデザインをやって、臨むのが目標です。

みやうの技術日記

著者（みやうし）のしていることや思っていることを発信します。

Codeship04・05・06

Codeship03

Codeship01(.5)

Codeship01