progateでhtmlとcssについて学ぼう初級編４
こんにちは、知らないことは希望のかたまりだと思っているぽんきちさんです。
今日も、progate でプログラミングの学習をしたいと思います。
[フリー画像素材] 人物, 子供, 赤ちゃん, PC / パソコン, 家電製品 ID:201309162000 - GATAG｜フリー画像・写真素材集 4.0
progateさんのサイトはこちらです。
progateのキャラクターがかわいいです。
たぬき？レッサーパンダ？
羊もいい空気感を出してきています。
もう、このたぬきくんが「ぽんきちさん」でもいい気がしてきました。
こんにちは。忍者のぽんきちさんです。
余白
今日はまず、線の上と外の余白の付け方から学びます。
なるほど、余白も文字のまわりだけでなく
線の上下で考えることができるのですね。
これまで余白をつけるときはpaddingを使ってきましたが、
paddingは文字のまわり…というより、線の内側の余白を開けるのに使います。
線の外側に余白を開けるときには、
marginを使うそうです。
なるほど、外側はmargin。メモメモ。
「今まで何気なく見てきた余白も、こうやって考えられて作られていたんだなあ」
正確には余白はきっと気づいてもいませんでした。
でも、デザインではきっとすごく大事ですよね、余白。
生活にも余白は大切。
結論としては、余白は大切。
今まで知らなかったのですが、
線は引かれていなくても
常に見えないborderが存在しているのです。
その内側がpadding、外側がmarginです。
ボックスモデルというそうです。
セクションタイトルの文字の下(padding-bottom)を15pxに。
そのボックスの下（margin-bottom）を50pxにします。
だんだん意味がわかってきたような気がします！
あれ、わかってきたと思った矢先に「まちごうとるで」と指摘されました。
いったいどこが…
あ！
コンテンツが「どんてんつ」になってる！！
「スペルミスがおおくてつらい」
まずは英語を学習しなくてはいけない感じがすごくする…！
無事にどんてんつをコンテンツになおして、次に進みます。
お問い合わせフォーム作り
テキスト部分
次は、お問い合わせフォームを作ります✨
何それめっちゃ楽しそう！
はてなブログ無料版にもつけられるでしょうか、お問い合わせフォーム。（必要か？）
一行だけ入力する欄（メアド）と
複数行入力が必要な欄（お問い合わせ内容）が必要なのね、ふむ確かに。
それと送信ボタン。
どうやって作るんだろう？
まずはhtmlで、画面に見えているテキスト部分を作ります。
言われている通りに書いているだけなので、例によって覚えている気がしません。
何度もやって覚えることとします。
入力欄
次は入力欄を。
初めて見るタグが出てきました。
１行入力用は<input>
複数行入力用は<textarea></textarea>のタグで囲みます。
「インプットは終了タグがいらないんだね」
あとから、このことを忘れて「終了タグがない！」と
騒ぐ未来が目に見えるようです。
それはもう手に取るように。
そして相変わらず「textarea」などの英文をタイピングするスピードが遅い。とにかく遅い。
ぐうぬうぬう。
さて、送信ボタンも、１行入力と同じinputを使うのだそうです。
type属性にsubmitを指定すると
ブラウザに設定されている言語で表示されるんだそうです！
「type属性にsubmitを指定する」
ルー大柴さんが止まらない。こみあげる笑いも止まらない。
ちなみに、「保存」というボタンにするにはこのように書くそうです。
value属性に任意の値を指定するのです。
他の言葉もできますよね。「発車」とか。必要ないけど。
…！そうか！
このブログの下にある「下書きを保存する」というボタンも
さては<input type=submit" value=下書きを保存する"なのか？
（これ）
右にプルダウン用の矢印があるからもっと複雑そう。
でもおもしろいですね！
全然記憶にとどめておけないけれどね！
コンマ「,」で区切るのだそうです。
一個一個書いていたら途中でわけがわからなくなりそうなので
これは便利ですね。
htmlに、
先ほど習ったinputとtextareaタグを入れ、
typeはsubmitにします。
cssではinputとtextareaをコンマで区切って両方を指定して
幅や余白なんかの指定をしていきます。
そして「まちごうとるで」と指摘されます。
「どこだ」
わからなすぎて解答を見ました。
解答を見ると、経験値が半減するそうです。全然いいです。見ます。
原因がわかりました。
73行目です。
input とtextareaの前に「.」がいらなかったのでした。
え、いるのといらないのってどう違うんだっけ（混乱）
何か、最初のほうでいる場合と入らない場合が説明されていたような…。
あとで宿題といたします。
そうこうしているうちに、なんと！
おめでとう！
初級編コースを完了いたしました！
「わーいわーい！」
嬉しいですねー。
とはいえ、あまりわかっていなかったところも多いので
何度か復習してみたいと思います。
