[Progate]HTML/CSS中級編スタート

f:id:tanabro:20191120182829p:image

 プログラミング初心者による勉強メモ(みなさんのお勉強のモチベーションになればうれしいです)

  

悲報

 

一週間前にブログを書いたとき、土曜日までに上級まで終わらせると言っていたのに昨日始めたんです。えへへ(なんだこいつ)

 

そんな計画性なしのクズがProgateできるようになるのか?とりあえず何もしないと始まらないので中級編スタートしました!

 

言い訳

とはいえ、Progateやるのが久々というのとテストがあり徹夜してしまったのでパソコンに向き合う気力もなく、今回はアプリ版でやっていきます。

良い子は真似しないようにしましょう。

 

徹夜しないでテストに望めるようにしたいところです。でもですね、ブログ初めてから授業中に寝なくなったのでいつもより中間テストの出来が良かったような気がします!

 

やってみた

f:id:tanabro:20191120173804p:image

ここまで進みました!

やってることは初級編と同じような感じでした。初級編よりどこが間違えてるのかがわからなくなることが増えて、結構答え見ちゃいましたのが悔しいところです。

 

1.全体のレイアウトを作ろう

まずヘッダーとフッダーを指定しなければならないようです。

ヘッダー(header)、フッダー(footer)は英語でそれぞれ頭と足という意味ですが、始まりと終わりのようなものだとわたしは理解しました。

 

2.トップ部分のレイアウトを作ろう

ヘッダーとフッダーの間に入れる部分を作っていきます。言うなればボディ(体)に当たる部分だと思います。今回作ろうとしているレイアウトではボディに「トップ、レッスン一覧、メッセージ」の項目を入れていく予定のようです。

背景は"CSS"で「background-image」を使用してbackground-image:"画像のURL";で指定できるそうです。わたしは「"」を何回も忘れてスマホをぶん投げそうになりました!

文字の位置は初級編で習った「padding」と「margin」で余白を調節していきました。このとき、数字の指定を間違えると大変なことになりました。paddingとmarginがわからない方はProgate html/css初級編の「15.ヘッダーの空白」のスライドをみると詳しく書いてあります。

 

3.透明度、文字の間隔を調整しよう

「opacity」を0〜1に指定することで透明度を(数字が小さい方が透明になる!)

「letter-spacing」で文字と文字の間(余白ではない)を調節しました。

 

4.ボタンを作ろう

ボタンつくりました笑

横に並べたり縦に並べたり色々ありましたのでちょっと割愛。気になる方は是非Progateに課金してみてください!

 

 

今後の予定(12月15日まで)

html→cssjavascriptjQuery

なぜ12月15日までかといいますと、Progateの契約を1ヶ月で切りたいからです。中級編からはお金がかかってしまうので短期集中で終わらせたいと思います!

 

お金についてはこちらをCHECK!!

www.tanakait.work

 

たなかからのコメント

cssのbackground-image:の後のURLは、画像までの「パス」を書きます。パスはパソコンの中での位置を表すものです。ただのURLではないので注意です!

 

 

にほんブログ村 大学生日記ブログへ
にほんブログ村

 ーーーーーーーーーー

たなかのTwitterをフォロー

 

ばいすちのTwitterをフォロー