ほわいとぼーだーず

おんりーのーと。僕がプログラミングをしている成長過程を書いていきます。

【Progate】ど素人の僕がプログラミングをやってみたパート1

僕はプログラミングをやっています。

理由は、自分のスキルとしてWebページを作ってみたい!と思ったからです。

 

 

今回僕がプログラミングをやってみて気づいたことを書いていきます。

僕が使用しているプログラミングサイトはProgateです。

 

★この記事を読むオススメな人

・プログラミングでどんなことができるのかを知りたい!

・HTML & CSSに興味がある人や実践している人

 

 

HTML & CSSをやってみてどうだった?

f:id:yosuke1:20180728140854j:plain

 

僕が最初に始めたのがHTML & CSSでした。

HTML & CSSは、Webページの見た目をデザインするプログラミング言語です。

 

最初は覚えることがあって大変でしたが、慣れてくるとすごく楽しくなりました

ど素人の僕がプログラミングをやり、あっという間に達成できてしまったのです。

 

具体的に、

f:id:yosuke1:20180728141907j:plain

<h1>と</h1>の間の〇に好きな言葉を入れることで、出力ができます。

もちろん、これだけではありません。

 

・<h1>〇〇</h1>

・<h2>〇〇</h2>

・<h3>〇〇</h3>

・<p>〇〇</p>

 

など使ってWebページを作っていきます。

これをいろんなところで応用できるな!と思いました。

 

 

HTML & CSSを応用してみた!

 

だいたいHTML & CSSの仕組がわかれば、あとはいろんなデザインを作ることが可能になります。

 

そこで僕は、何かマネできないかな?と。

思いついたのは、みんなが知っているこれ!!

 

f:id:yosuke1:20180728143451j:plain

 

メルカリは有名ですよね。

このページにある、

 

f:id:yosuke1:20180728143914j:plain

 

出品ボタンです。

この出品ボタンみたいなのをできないかな?と思ったわけです。

 

で、プログラミングど素人の僕がやってみると、、、

 

f:id:yosuke1:20180728145906j:plain

 

HTMLでは、

・<a>出品</a>

・classはボタンともうひとつが必要だな

・クリックしたときにリンクページに飛ぶ

 

こんなことを予想して書いてみたんです。

そして、

 

f:id:yosuke1:20180728150135j:plain

 

CSSでは、

・btnで文字のカラーは白

・背景は赤

・ボタンが丸いな

 

これを意識してできる限りの知識でやってみたら、、

 

f:id:yosuke1:20180728150356j:plain

 

こんな感じになりました。

まだまだ本物のデザインとは違いますが、プログラミング初心者でもここまでできました。

 

まだまだプログラミングに挑戦し続けます!