プログラミング日記#02 〜CSS基礎学習〜

こんばんは。よっしーです。

プログラミング日記2日目。今日も学習内容を振り返ります。

まだ2日目で当たり前かもなんですが、モチベーションは非常に高いです。コード打つのタノシイ。。

今日の学習内容

・ドットインストール「詳解HTML　フォーム部品編」（全8回完了）

・ドットインストール「詳解CSS　基礎文法編」（全33回中24回完了）

今回からCSSの基礎学習を始めました。といっても、CSSの基礎理解はある程度終えているので、半分ほどは復習といった感じ。

今日の振り返り①HTML　フォーム部品について

まず、HTMLのフォーム部品から振り返ります。

フォーム部品とはなにかというと、ユーザーからの入力を受け取る部品のことです。

例えば、検索フォームやパスワードの入力欄、テキストの入力欄などですね。

タグ1つ1つの説明をしていると長すぎるので割愛しますが、使用頻度が高かったものだけご紹介します。

<input type="text"> … テキストの入力欄が表示できます。type属性を"password"に変えてあげれば、入力内容を●で隠してくれます。

<textarea>…複数行のテキストを入力できる入力欄が表示されます。

<value> ...初期値を設定するタグです。あらかじめテキストを入力欄に表示することができます。

<checkbox>…選択欄を表示させます。複数の選択が可能。

<radio>…同じname属性の中から1つだけ選択することができます。

<select>…ドロップダウンリストを作るのに必要なタグです。中に<option>タグを入れてメニュー内容を表示させます。

<form> …入力した内容を他プログラムに送信するために必要なタグです。

<button>…フォーム内で送信ボタンの役割を果たします。

やや長くなりました。フォーム部品は少しややこしかったですが、なんとかなりそうです。

ちなみにフォーム部品の学習はドットインストールでなくとも、こちらのYouTube動画で学習できます。

というか、今上記動画の再生リストを見たら、他言語もこれで学べそうです。

お金をかけたくない！という方はYouTubeで学習できますよ。

今日の振り返り②　CSS基礎文法

今日からCSSの学習もスタートです。ほとんどやったことのあった内容だったのでスムーズに進みました。

やや理解に苦しんだところだけ振り返り。

・line-height　単位”em”の使い方

"em"は1文字分を表す単位です。単純に（倍）という単位がつくと考えた方がわかりやすいかもしれません。

例えば、font-sizeが16px、line-height（行の高さ）を2emと指定します。

すると行の高さは16px×2(em)なので、32px分の高さが取られることになります。

・ine-height　単位なしの場合

単位なしにおいても、1文字分を表す単位であることは変わりません。

ただ、親要素にline-heightを指定したときは、単なる〜倍という設定だけが継承されます。

たとえば、親要素がfont-size32px、子要素が16pxだとします。

line-heightの値は 2 としましょう。

すると、64pxのline-heightで表示されますが、子要素で囲った部分だけは32pxの行の高さで表示されます。

このように、単位を指定しないときは要素に応じた値で設定されます。

まとめ

ちょっと長くなりました、今日は以上です。

2日目にして思ったんですが、まったくの1からプログラミング勉強するなら、テキストより間違いなく動画のほうがいいですよ。

プログラミングに触れたことのない状態で、テキストで学ぼうとしても、わかった気になっているだけで、実際やってみると「よくわからん…」といったことになります。

”頭で覚えるよりも体に染み込ませろ"です。

はじめにテキストを買って学習をはじめた自分に向けて。