【必見】プロゲート活用方法！！【プログラミング】

みなさん、おはばんちは。じーぺいです。

HTMLCSSの学習記事になります。
今日でプロゲートの初級編を終了しました。

一通りプロゲートを触って見た感想ですが、
わかりやすい！！！！
この一言に尽きます。２年前、やる気満々で入門書を買いすぐにBOOKOFFへ売りに行ったじーぺいでもついていけました。
無料で学習できるのは初級編編だけなので、速攻月額会員登録しましたよ。

プロゲートのメリットデメリット

メリット

無料
言うまでもなく、無料に越したことはありません。こんなクオリティを無料で試せるなんてすごい！

すぐにためせる
プログラミングを始めるには、記述するためにたくさんの英語サイトからたくさんのファイルをダウンロードしてたくさんの初期設定をする必要があります。ここでゲロ吐きそうになるんですが、このサイトならそんな難しいこと考えずにまずやってみることができます。
試してみてできそうだと思うなら本格的に始めてみれば良いのかなと。

楽しむ工夫
ポケモン大好きじーぺいはレペルアップ！とかやってくれるだけで、どんどん先の講座へ進みたくなってしまいます。

デメリット

わかりやすすぎる
贅沢なデメリットかもしれませんが、学習する上で気をつけないといけないなと思いました。
具体的に言うと、分かった気になっただけで身についていない恐れがあると言うところです。
受験勉強で、有名講師に教わった後「すげーわかりやすかった」と思ったけど後日復習したら全然問題解けないみたいな。
あくまで、プロゲートは補助してくれるだけで覚えるのは自分と肝に命じました。

楽しすぎる
似たような話ですが、楽しいとプロゲートを何周もしてしまいそうだなと思いました。
ポケモン大好きじーぺいは、最初の草むらで永遠とレベル上げはしません。先に進めばたくさん経験値もらえますから。
って言う精神で挑戦します。

プロゲート以外にも学習サポートしてくれるツールはいっぱいありますが、
迷っているならバカな未経験３０歳でも分かったこのプロゲートを試してみると良いかなと思います。

以下、勉強メモです。
見せるように書いていないので読まないで大丈夫です。

headerタグはWEBページ上部に表示されるロゴやメニューに当たる部分。
divでclassをつけることでロゴとメニューなどを区別し編集しやすくする。
例
div class=”header-logo” じーぺい　/div

メニューの部分は複数項目があることが多いのでリストでクラス化する
例
div class=”header-list”
ul
li 未経験 /li
li 文系 /li
li 初心者 /li
/ul
/div

li要素は・（黒点）が表示されてしまうのでCSSで消す。
例
li
list-style:none;

HTMLの内容は縦書きなのでCSSで横並びに変える。
floatプロパティのleftで横並びの左順
例
li
float:left;

ロゴとメニューを横並びにしたいときはheader-logo にfloatを追加する

要素間に余白をとった見た目にしたいときはpadding:◯◯px;で指定
上だけならpadding-top 上下左右指定できる。

footerを作る
div class=”footer-logo” じーぺい
ul
li プロフィール /li
li ブログ /li
li twiiter /li
ul
/div

このままの状態だとヘッダー作成時に指定したliタグの余白がフッターにも適用されてしまう。
↓
CSSを個別に指定
例）
.header-list li
color:red;

こういうことをするためにもdiv class は大事！！[outline]

mainを作る
要素は３つで「copy-container」「contents」「contact-form」と指定されたが、実際は自分の作りたいページを思い描き、要素が２つだろうと「contents」という名前でなくても良さそう

文中の一部だけ色を変えたい場合
span要素で囲む
例）おはばんちは、じーぺいです。　のじーぺいだけ赤くする場合
HTML
おはばんちは、span じーぺい　/span です。

CSS
span
color:red;

ブロック要素とインライン要素
div やp 要素は、WEBページの横いっぱいにひろがる。→ブロック要素
span は指定しても改行されることない→インライン要素

ここまでで、基本的な構造のについては理解できたので
どんな要素があるのか、また、どんな使い方をすればよいのかの蓄積があれば自由にやってみることができそう。

文字に線を引きたいとき
border-bottom: ◯px 戦の種類（solidなど）red;
４方を囲みたいとき
border

[margin] [padding] [border]の話
いずれも余白を作るためのものだが言葉ではとても説明できないので、復習するときはイラストのあるサイトで見た方が良い。
しかも、デザインきにするときは大事そう。

input 一行の入力項目を作るとき
textarea 複数行の入力項目を作るとき
input要素は終了タグいらないので注意

input要素にはtype属性の指定ができ、送信ボタンを作ることができる
例
input type=”submit”
デフォルトで「送信」とボタン表示される。
「送信」を任意のテキストにしたい場合はvalue属性で指定
例
input type=”submit”value=”保存”
で「保存」ボタンが表示される。

複数のタグに同時に同じCSSを適用したいとき
, で区切る。
例）
input,textarea
color:red;
これでinputとtextare 両方の文字が赤くなる