【プロゲート版】HTMLとCSSの学習開始‼

こんにちは．Ryuです．

まずはホームページを作成するうえでの代表的なプログラミング言語，「HTML」と「CSS」の学習を開始しました．

このホームページもワードプレスで作成しているため，エディタを使って何となくHTMLとCSSを扱ったことがありましたが，以前学んでいた時から時間もたっていること，しっかりと基礎を固めることの意味合いで，一から改めて学び始めました．

そこで便利なサイトがドットインストールやプロゲートというサイトです．これらのサイトはあくまでの基礎学習です．これをまんべんなくやっていても，実践レベルまでは至らないとプログラミングスクールのカウンセラーに聞きました．

少し話が脱線しますが，これまでプログラミングスクールのカウンセリングを受けてきて，スクールに通う大きなメリットは次の2つであると考えています．それは「モチベーション維持」「つまずいたときに相談できる」です．

モチベーション維持は理解できると思います．ひたすらパソコンにカタカタカタカタとコードを打ち込むだけの作業は，かなりの根気がいります．誰かに励ましてもらいながら実施していくことは必然といえます．また，「つまずいたときに相談できる」ですが，これはかなり大きなメリットです．初心者がコードを書いていると必ずと言っていいほど，問題にぶち当たるとのことです．いったいどこの要素が間違っているのかを探り，修正するのに初心者だと1週間かかるところを，プロは10分程度で見つけてくれるとのことです．学習スピードが大きく違ってきますよね．

しかしプログラミングは今後一生学び続けるものです．ずっとスクールに通い，つまずいたときは誰かに教えてもらう環境にいることはできません．ですが，最近便利なサービスがあります．有料ですが，スキルマーケットのココナラというサイトです．HTMLなど入力し検索するとわかりますが，フリーランスのエンジニアなどが，相談に乗ってくれたり，実際にエディタを修正してくれたりします．何回も依頼すれば当然コストはかさみますが，スクールに入るよりかは断然安いです．

話を戻します．まず私はプロゲートというサイトで勉強を始めました．実際に学んだことを列挙していきます．

まずは「HTML」の基礎．

WEBページは「HTML」と「CSS」という言語を組み合わせて作られている
「HTML」や「CSS」のコードをテキストエディタ（テキストファイルを編集するためのソフトウェア）に書いていく
「HTML」はテキスト，「CSS」はデザイン
見出しは<h1>＜/h1＞や<h2></h2>を使う．数字が小さいほど大きな文字．見出し以外の文に関しては<p></p>
リンクを張るときは<a href="url">を使う．aの後のスペース，URLをダブルクォーテーション（""）で囲むことを忘れずに
画像を貼るときは<img src="url">を使う．テキストではないため終了タグなし
<li>は、囲む要素によって種類が変わる．<ul>は黒点が先頭につく．<ol>は数字が連番でつく．要素を要素で囲むことを入れ子と言う．囲む方の要素を親要素、囲まれる要素を子要素と呼ぶ．

次に「CSS」の基礎．

CSSはHTMLの要素に対して色，大きさ，配置などを指定し，ページをデザインするための言語．
CSSもインデント（字下げ）する．
CSSのプロパティの末尾にはコロン（:），行末にはセミコロン（;）をつける
色の指定はcolor:#ff0000;
文字の大きさを指定するにはfont-sizeプロパティを使う．font-sizeは、px(ピクセル)という単位を用いる．
文字の種類を変えるときはfont-family: フォント名; を使う．フォント名にスペースがある場合は，ダブルクォーテーション（""）で囲む．
背景色を変えるにはbackground-colorプロパティを用いる．#ddddddと同じ文字が続く場合は，#dddに省略できる．
要素の横幅はwidthプロパティ，高さをheightプロパティを用いて変更する．width, height共にpxで指定する．
特定に要素にCSSを適応するには，「HTML」でclassをつけておく．class名をダブルクォーテーション（""）で囲む．classを入れるところを間違えないよう注意．class名は何でもいいが，同じclass名をつけた要素にはすべて適応される．「CSS」でclass名の前にどっと（．）を必ずつける．