生涯、学習していきたい

2018年はプログラミング学習に凝っています。

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

こんにちは、知らないことは希望のかたまりだと思っているぽんきちさんです。

今日も、progate でプログラミングの学習をしたいと思います。

f:id:ponnkichi:20171222213745j:plain

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

 progateさんのサイトはこちらです。

progate.com

 

f:id:ponnkichi:20171220221751p:plain

progateのキャラクターがかわいいです。

たぬき?レッサーパンダ

羊もいい空気感を出してきています。

もう、このたぬきくんが「ぽんきちさん」でもいい気がしてきました。

こんにちは。忍者のぽんきちさんです。

 

 

 

余白

今日はまず、線の上と外の余白の付け方から学びます。

f:id:ponnkichi:20171221091946p:plain

なるほど、余白も文字のまわりだけでなく

線の上下で考えることができるのですね。

 

これまで余白をつけるときはpaddingを使ってきましたが、

paddingは文字のまわり…というより、線の内側の余白を開けるのに使います。

線の外側に余白を開けるときには、

marginを使うそうです。

f:id:ponnkichi:20171221092150p:plain

なるほど、外側はmargin。メモメモ。

f:id:ponnkichi:20171219214742p:plain「今まで何気なく見てきた余白も、こうやって考えられて作られていたんだなあ」

 

正確には余白はきっと気づいてもいませんでした。

でも、デザインではきっとすごく大事ですよね、余白。

生活にも余白は大切。

結論としては、余白は大切。

f:id:ponnkichi:20171221092422p:plain

今まで知らなかったのですが、

線は引かれていなくても

常に見えないborderが存在しているのです。

その内側がpadding、外側がmarginです。

ボックスモデルというそうです。

f:id:ponnkichi:20171221093215p:plain

セクションタイトルの文字の下(padding-bottom)を15pxに。

そのボックスの下(margin-bottom)を50pxにします。

だんだん意味がわかってきたような気がします!

f:id:ponnkichi:20171221093426p:plain

あれ、わかってきたと思った矢先に「まちごうとるで」と指摘されました。

いったいどこが…

あ!

コンテンツが「どんてんつ」になってる!!

f:id:ponnkichi:20171219214742p:plain

 

「スペルミスがおおくてつらい」

 

 

まずは英語を学習しなくてはいけない感じがすごくする…!

 

無事にどんてんつをコンテンツになおして、次に進みます。

 

お問い合わせフォーム作り

テキスト部分

次は、お問い合わせフォームを作ります✨

何それめっちゃ楽しそう!

はてなブログ無料版にもつけられるでしょうか、お問い合わせフォーム。(必要か?)

f:id:ponnkichi:20171221093702p:plain

一行だけ入力する欄(メアド)と

複数行入力が必要な欄(お問い合わせ内容)が必要なのね、ふむ確かに。

それと送信ボタン。

どうやって作るんだろう?

f:id:ponnkichi:20171221094158p:plain

まずはhtmlで、画面に見えているテキスト部分を作ります。

言われている通りに書いているだけなので、例によって覚えている気がしません。

何度もやって覚えることとします。

入力欄

次は入力欄を。

f:id:ponnkichi:20171221094349p:plain

初めて見るタグが出てきました。

1行入力用は<input>

複数行入力用は<textarea></textarea>のタグで囲みます。

f:id:ponnkichi:20171219214742p:plain

「インプットは終了タグがいらないんだね」

あとから、このことを忘れて「終了タグがない!」と

騒ぐ未来が目に見えるようです。

それはもう手に取るように。

そして相変わらず「textarea」などの英文をタイピングするスピードが遅い。とにかく遅い。

ぐうぬうぬう。

 

さて、送信ボタンも、1行入力と同じinputを使うのだそうです。

f:id:ponnkichi:20171221094820p:plain

type属性にsubmitを指定すると

ブラウザに設定されている言語で表示されるんだそうです!

「type属性にsubmitを指定する」

ルー大柴さんが止まらない。こみあげる笑いも止まらない。

f:id:ponnkichi:20171221094958p:plain

ちなみに、「保存」というボタンにするにはこのように書くそうです。

value属性に任意の値を指定するのです。

他の言葉もできますよね。「発車」とか。必要ないけど。

 

…!そうか!

このブログの下にある「下書きを保存する」というボタンも

さては<input type=submit" value=下書きを保存する"なのか?

f:id:ponnkichi:20171221095154p:plain(これ)

右にプルダウン用の矢印があるからもっと複雑そう。

でもおもしろいですね!

全然記憶にとどめておけないけれどね!

 

これら複数のセレクタを一気にcssで指定するのには

コンマ「,」で区切るのだそうです。

f:id:ponnkichi:20171221095334p:plain

 

一個一個書いていたら途中でわけがわからなくなりそうなので

これは便利ですね。

f:id:ponnkichi:20171221100211p:plain

htmlに、

先ほど習ったinputとtextareaタグを入れ、

typeはsubmitにします。

f:id:ponnkichi:20171221100328p:plain

cssではinputとtextareaをコンマで区切って両方を指定して

幅や余白なんかの指定をしていきます。

そして「まちごうとるで」と指摘されます。

f:id:ponnkichi:20171219214742p:plain「どこだ」

わからなすぎて解答を見ました。

解答を見ると、経験値が半減するそうです。全然いいです。見ます。

f:id:ponnkichi:20171221100621p:plain

原因がわかりました。

73行目です。

input とtextareaの前に「.」がいらなかったのでした。

f:id:ponnkichi:20171219214742p:plainえ、いるのといらないのってどう違うんだっけ(混乱)

何か、最初のほうでいる場合と入らない場合が説明されていたような…。

あとで宿題といたします。

 

そうこうしているうちに、なんと!

f:id:ponnkichi:20171221100824p:plain

おめでとう!

初級編コースを完了いたしました!

f:id:ponnkichi:20171219214742p:plain「わーいわーい!」

嬉しいですねー。

とはいえ、あまりわかっていなかったところも多いので

何度か復習してみたいと思います。