4月17日-progateの有料登録、HTMLとCSSの学びなおし-
１．本日の目標
本日の目標は１から任意のＷＥＢページを真似するための勉強をすることだ。そのためにprogateの有料登録をした。実際の所、HTMLとCSSについてはドットインストールで勉強した。だからショーヘーさんの企画で提唱されいているprogateの部分はすっ飛ばした経緯がある。でもそれでは身についていないようなので今回、登録してしっかり学びなおそうという決意をした。
２．結果・感想
初級コースから学びなおした。
コース〇まで進んだ。
補完機能がprogate内の解答欄で使えるのでそこは楽だと感じた。
でもEMMETにある、li*3とかdiv.classnameとかはできないみたいで悲しい。
18:30から勉強開始して途中休憩を挟みながらも現在0:30までで初級と中級を終了。
ドットインストールやpaizaラーニング(有料コース)でずっと学んできたけどprogateは音声じゃなくてスライドショー方式。けっこう大事な所がしっかり書いてあるのでわかりやすいと感じた。音声だとモチベーション維持にはなるけど、ペースは音声のペース(ペース変えられる機能もあったけど結局利用していない)。スライドショーは自分のペースで出来るから、細かい所をしっかり把握した上で進められるし、分かる所はどんどん飛ばせるからこれも良い点。どちらも一長一短ある。でも最初からスライドショーで勉強を始めたらここまで続けて来れなかったかもしれない。最初に始めるのはpaiza、次にドットインストール、最後にprogateって流れが個人的にはお勧め。
３．学んだことの書き出し
テキストをマークアップする場合に終了タグが必要
aタグはリンク
インデントの理由は親要素と子要素を区別しやすくするため
；セミコロンと：コロン
文字の大きさはfont-sizeで指定し(セレクタ)、プロパティはpxで指定
font-familyはフォントの種類を指定
フォント名にスペースがあれば" "で囲む
背景色はbackground-colorで変更
head内にはページに関する情報、boby内には表示する内容を書く
divはdivisionの略。要素をグループ化するために利用。
list内でfloat:left(or right);で横並びになる
spanタグには改行が入らない
改行が入るものはblock要素:div,h1,p
改行が入らないものはinline要素:span,a
border:全方向に線
border-方向(bottomなど):指定方向のみに線
borderのプロパティは太さ、種類、色
borderのpaddingは内側、borderのmarginは外側
margin外側の余白、border枠線、padding内側の余白
formタグの中に
inputタグ（終了タグ不要）で1行入力用の要素
textareaタグ（終了タグ必要）で複数行入力用の要素
inputのtype属性をsubmitとすると送信ボタンになる
そのあとにvalue属性で表示するテキストを変更できる
backgrount-size:cover;でbackgroundを埋め尽くすように写真を調整
opacity:不透明度
letter-spacing:文字の間隔調整
inline要素にはwidthやheightが指定できない、marginやpaddingの上下が指定できないが、inline-blockを使えば指定可能
角を丸めるにはborder-radius:数字が大きいほど角が丸くなる
text-aline:left,center,right;
block要素ならmargin:0 auto;
inline-blockとinline要素ならtext-aline:center;
rbgaは背景色だけが透過、opacityは要素の中身も透過
transitionを使うとアニメーションをつけられる、変化の対象、変化の時間を指定
line-heightで行の高さを指定
aタグはインライン要素。そのためクリック範囲がテキスト部分のみ。block要素にしてボタン全体をクリック出来るようにできる
font-weight:normal or boldで文字の太さ
position:absoluteはサイトの左上が基準
position:relativeは要素が基準
position:relativeを指定した要素にposition:absoluteした要素を重ねていける
box-shadow:水平方向(横) 垂直方向(縦) 色で影をつける
cursor:default,pointer,textでカーソルの画像変更
:activeでクリック時のみの反応を設定
position:relativeとtopやleftを利用して要素の位置を少しずらす
position:fixedで画面上に位置を固定(フッターを常時表示するときに使う)
z-indexで要素の重なりの順序を指定。大きい方が上にくる(positionプロパティと併用して利用)
４．明日の課題
HTML/CSSの上級コースを終わらせること。
