生涯、学習していきたい

いろいろなことを考えるのが好きです。

progateでhtmlとcssについて学ぼう初級編2

こんにちは。いつでもどこでも初心者のぽんきちさんです。

今日は、progateでhtmlとcssを勉強しようと思います。

f:id:ponnkichi:20171222213745j:plain

[フリー画像素材] 人物, 子供, 赤ちゃん, PC / パソコン, 家電製品 ID:201309162000 - GATAG|フリー画像・写真素材集 4.0

progate.com

 

 

 前回の記事でprogateの「htmlとcss」について学び始めたよということをご報告しました。

ponnkichi.hatenablog.com

前回の記事の時点では

f:id:ponnkichi:20171220084855p:plain

初級編の52%まで学べたようです。

f:id:ponnkichi:20171215094103p:plain「予想外に進んでいた」

ちょっと驚きましたが、眠かったので内容が頭に入っている気がしない。

何回もリトライするのがちょうどいいのかもしれません。

 

 ヘッダーを作る

続きはヘッダーを作るところからでした。

f:id:ponnkichi:20171220085149p:plain

ヘッダーって…ページの上のほうだよね?

基本的に乏しい知識を補いながら学んでいくスタイルです。

f:id:ponnkichi:20171220085956p:plain

ヘッダーの要素は縦に箇条書きではなく、横並びにするので

cssfloat:left;と指定します。

f:id:ponnkichi:20171215094103p:plain「コーヒー…フロート…」

(いらんことを考えて本題を忘れていくスタイル)

f:id:ponnkichi:20171220091557p:plain

 いらんことを考えつつ、progatenさんの指示にしたがって

cssに書き込んでいきます。

 

f:id:ponnkichi:20171215094103p:plain「float:left;が何回も出て来たから、どこに指示しているのかわからないよう;;」

泣きそうになりますがとにかく進みます。

 

 

余白の調整

次は余白の調整です。

f:id:ponnkichi:20171220091737p:plain

ああ、これは見た目で「余白をあけるんだな」とわかるからなんだかホッとします!

しかも、ブログのカスタマイズにすぐにでも役に立ちそうです!

f:id:ponnkichi:20171220091914p:plain

ふむふむ、余白をあけるには「padding」なのね。

うん、わかりやすそう。

f:id:ponnkichi:20171220092003p:plain

paddingにはいろんな書き方があるようでした(白目)

たぶん、見た感じ一番右のやつだけを覚えればいいんじゃないかなあと思います(信じないように)。

f:id:ponnkichi:20171220092237p:plain

ほら見て!

書く時には、上下と左右を指定すればいいみたいよ!(ドヤ顔)

 

 

フッターを作る

次はフッターを作るようです。

f:id:ponnkichi:20171220092356p:plain

フッターは、ロゴが左にあって

ほかの要素は右側に縦に並べたいようです。

f:id:ponnkichi:20171220092910p:plain

<li>要素のみにcssを適用させる方法みたいです…(白目)

上の図だと、「ヘッダーのリスト」と書いてある2つの文の文字だけが

#ff0000(赤っぽい色)になるみたいです。

f:id:ponnkichi:20171215094103p:plain「ピンチである」

もうわけがわからなくなってきましたよ…!

 

プログラミングができる人にとっては

こんなレベルのお話は

小学1年生で初めて漢字を習った時みたいな雰囲気なんだと思いますが

できない私は、いきなり困難を感じ始めます。

これは繰り返しチャレンジするしか覚える方法はないね。

 

まずは、懇切丁寧な指示に従います。

f:id:ponnkichi:20171220093437p:plain

htmlの画面で、言われた通りに書き込んでいきます。

このままだと言われないとなにもできない人のできあがりですが、

最初がわからないと本当に何もできないので

まずは言われた通りに学ぶのです。

 

次はcssの場面で、さっき習ったことを書いていきます。

f:id:ponnkichi:20171220094444p:plain

「確認して次へ進む」のボタンを押して次に行きますが、

間違えていると

赤で大きく「間違っておるぞ」と知らされます。

 

f:id:ponnkichi:20171215094103p:plain「何が違うのか全くわからない…」

「li要素に対するfloatの指定を削除してください」

と言われました。

そのつもりで、<li>を指定したんだけど…?

 

困惑していましたが、上のほうに指示を発見。

f:id:ponnkichi:20171220094636p:plain

しかもちゃんと詳しく教えられています。

28行目付近と同じことを書いてあるのがいけないのですね。

なので、この

float:left;

padding:33px 20px

の二行を消しました。

 

もう、コピペして元の文を消す、でよかったよね!

 

f:id:ponnkichi:20171220094813p:plain

そしたら「おめでとう」って。正解だったみたいです。

f:id:ponnkichi:20171215094103p:plain「ありがとう」(お礼)

全然理解できている気がしませんが、次回は次に進みたいと思います。

ちなみに、レベルが24もありますが

過去の私が全然理解できなくて、何回もやり直したからだと思われます。

今もわからなくて白目になっていますが

全体像とコツをつかむまでは練習あるのみですね。