progateでhtmlとcssについて学ぼう初級編2
こんにちは。いつでもどこでも初心者のぽんきちさんです。
今日は、progateでhtmlとcssを勉強しようと思います。
[フリー画像素材] 人物, 子供, 赤ちゃん, PC / パソコン, 家電製品 ID:201309162000 - GATAG|フリー画像・写真素材集 4.0
前回の記事でprogateの「htmlとcss」について学び始めたよということをご報告しました。
前回の記事の時点では
初級編の52%まで学べたようです。
「予想外に進んでいた」
ちょっと驚きましたが、眠かったので内容が頭に入っている気がしない。
何回もリトライするのがちょうどいいのかもしれません。
ヘッダーを作る
続きはヘッダーを作るところからでした。
ヘッダーって…ページの上のほうだよね?
基本的に乏しい知識を補いながら学んでいくスタイルです。
ヘッダーの要素は縦に箇条書きではなく、横並びにするので
cssをfloat:left;と指定します。
「コーヒー…フロート…」
(いらんことを考えて本題を忘れていくスタイル)
いらんことを考えつつ、progatenさんの指示にしたがって
cssに書き込んでいきます。
「float:left;が何回も出て来たから、どこに指示しているのかわからないよう;;」
泣きそうになりますがとにかく進みます。
余白の調整
次は余白の調整です。
ああ、これは見た目で「余白をあけるんだな」とわかるからなんだかホッとします!
しかも、ブログのカスタマイズにすぐにでも役に立ちそうです!
ふむふむ、余白をあけるには「padding」なのね。
うん、わかりやすそう。
paddingにはいろんな書き方があるようでした(白目)
たぶん、見た感じ一番右のやつだけを覚えればいいんじゃないかなあと思います(信じないように)。
ほら見て!
書く時には、上下と左右を指定すればいいみたいよ!(ドヤ顔)
フッターを作る
次はフッターを作るようです。
フッターは、ロゴが左にあって
ほかの要素は右側に縦に並べたいようです。
<li>要素のみにcssを適用させる方法みたいです…(白目)
上の図だと、「ヘッダーのリスト」と書いてある2つの文の文字だけが
#ff0000(赤っぽい色)になるみたいです。
「ピンチである」
もうわけがわからなくなってきましたよ…!
プログラミングができる人にとっては
こんなレベルのお話は
小学1年生で初めて漢字を習った時みたいな雰囲気なんだと思いますが
できない私は、いきなり困難を感じ始めます。
これは繰り返しチャレンジするしか覚える方法はないね。
まずは、懇切丁寧な指示に従います。
htmlの画面で、言われた通りに書き込んでいきます。
このままだと言われないとなにもできない人のできあがりですが、
最初がわからないと本当に何もできないので
まずは言われた通りに学ぶのです。
次はcssの場面で、さっき習ったことを書いていきます。
「確認して次へ進む」のボタンを押して次に行きますが、
間違えていると
赤で大きく「間違っておるぞ」と知らされます。
「何が違うのか全くわからない…」
「li要素に対するfloatの指定を削除してください」
と言われました。
そのつもりで、<li>を指定したんだけど…?
困惑していましたが、上のほうに指示を発見。
しかもちゃんと詳しく教えられています。
28行目付近と同じことを書いてあるのがいけないのですね。
なので、この
float:left;
padding:33px 20px
の二行を消しました。
もう、コピペして元の文を消す、でよかったよね!
そしたら「おめでとう」って。正解だったみたいです。
「ありがとう」(お礼)
全然理解できている気がしませんが、次回は次に進みたいと思います。
ちなみに、レベルが24もありますが
過去の私が全然理解できなくて、何回もやり直したからだと思われます。
今もわからなくて白目になっていますが
全体像とコツをつかむまでは練習あるのみですね。