前回のステップで、なんとなく始め方はご理解できたでしょうか？
今回から本格的にHTML×CSSの練習に入っていきます。
エンジニアへの一歩を踏み出していきましょう。
まだまだ序盤ということで、今回も動画をご用意しました。
動画の後で、テキストを交え、さらに詳細な解説をしていきます。
大事なのは、知識としてインプットするだけじゃなく、実践することです。
ただ、黙って動画を見る、ということはやめましょう。
実際に、自分で手を動かしながら、進めてみてください。
まず、百聞は一見にしかずということで、下記のソースコードを御覧ください。
<!--index.htmlファイルに記述しています。-->
<h1>HTML×CSSコーディングの基本を理解しよう！</h1>
<h1>がHTMLタグで「タイトル」という意味を持っています。
基本的にHTMLタグは文字や要素等を「囲って」使います。
<h1>が開始タグで、閉じタグは</h1>となります。
閉じタグにはスラッシュ「/」がつくんですね。
<h1></h1>で囲まれた文字列には「タイトル」という意味がつきます。
HTMLは「意味を持つタグで囲う」作業です。
<h1>のように様々な意味を持つタグがたくさんあります。
例えば、<p></p>は文章を意味します。
<article></article>は記事を意味します。
記事のエリア全体を覆うタグですね。
<a href=”http://aaaa.com”>リンク</a>と囲うとリンクになります。
WEBサイトにはタイトルだけではなく文章もあります。
画像もありますし、箇条書きもあります。
こうした要素それぞれを、タグで囲って意味付けしていくのです。
これが、HTMLでコーディングする作業となります。
ただ、囲って意味づけしても「色や細かい配置」は設定されません。
色などの全体的なデザインを反映させるのは「CSSの役目」となります。
CSSの基本的な書き方について
こちらも百聞は一見にしかずということで、下記のソースを見てください。
//common.cssファイルに記述しています。
.fontColorRed{
color:#ff0000;
}
上記は文字の色を赤に変える、というcssです。
common.cssの中に書いています。
ただcssファイルの中に書いただけだと、何も反映されません。
では、どうやってhtmlに反映させれば良いのでしょう。
反映させるには、htmlファイルの反映させたい箇所を下記のように編集します。
<!--index.htmlファイルに記述しています。-->
<h1 class="fontColorRed">HTML×CSSコーディングの基本を理解しよう！</h1>
<h1>の箇所にclassという記述が加わりましたね。
classには「fontColorRed」と書いてあるのが分かると思います。
CSSの記述を見ると、同じく「fontColorRed」があります。
つまりCSSとHTMLをこのクラス名「fontColorRed」で結びつけるのです。
これで、<h1>の文字列は赤くなります。
ご自身の作ったファイルでも、試してみてくださいね。
なお、このクラス名「fontColorRed」の文字ですが、自由に決められます。
処理の内容が分かりやすければ、なんでも問題ありません。
colorRedでも良いですし、redFontでも良いです。
英数字で分かりやすいように記述してください。
また、CSSファイルで、クラス名の前に「.」がありますが「.」をつけることで「クラス」の意味になります。
「.」がついてないとクラスとして認識されません。
cssファイルでクラスを書く時は「.」を忘れないようにしてください。
どうclass名をつけるべきか
基本的には命名ルールを自分で考えます。
こうしたルールは「命名規則」と呼ばれています。
例えば、私たちがよく使うルールは「機能」+「内容」の組み合わせですね。
先ほどのfontColorRedもそうです。
fontColorが機能でRedが内容ですね。
これで、パッと見で効果がわかりやすいclass名になります。
いくつかclassを使う場所が限定されている時は「使う場所」も追加します。
例えばコンセプトのエリアで使う、fontColorRedの場合。
conceptFontColorRedとしても良いでしょう。
大抵「場所」+「機能」+「内容」の3種類で組み合わせています。
これが、最初に使う命名規則です。
ただし命名規則は会社や働く場所によって違うので確認しましょう。
命名規則に関しては、後半でさらに詳しく説明します。
ただ、最初からあまり強く意識しすぎると、手が進まなくなりがちです。
なので今は、このくらいの命名規則だけ意識してみてください。
また、fontColorRedを見ると、単語ごとに頭文字が大文字となっていることにお気づきでしょうか。
このような記述方法をキャメルケースと呼びます。
大文字になっている部分が、ラクダのこぶみたいになっていますね。
だから、キャメルケースと呼ばれます。
CSSの書き方について
ではCSSに戻って、詳しい書き方について進めていきましょう。
まず、下記のソースコードをご覧ください。
//common.cssファイルに記述しています。
.fontColorRed{
//この中に処理を記述。
}
CSSの処理は、{}で囲んだ中に記述していきます。
先程は、color:#ff0000;と書きましたね。
こちら「color」の部分を「プロパティ」と言い、色々な機能が用意されています。
font-sizeであればフォントの大きさ、margin-topであれば、余白を上に空けます。
このように、CSSには、たくさんのプロパティが用意されています。
そして、プロパティに対応する数値や色などの設定を「値」と言います。
「値」は、プロパティによって異なります。
試しに、上に10px余白を空け、フォントサイズを24pxにしてみましょう。
さらに、色も赤くしてみます。
CSSで書いた場合、こうなります。
//common.cssファイルに記述しています。
.fontLmarginTop10px{
font-size:24px;
margin-top:10px;
color:#ff0000;
}
あとは、fontLmarginTop10pxをHTMLの該当箇所にclassで記述すればOKです。
実際にご自身の作ったファイルで試してみてください。
こうしてCSSを記述していきます。
後は、どんなプロパティがあって、いつ使うかを練習するだけですね。
他にもプロパティは色々ありますが、今回はここまで覚えておいてください。
後は、ミッションを仕上げていく中で覚えていきましょう。
基本的にコーディングは練習量
よく、コーディングを「学ぶ、勉強する」というワードが飛び交っています。
もちろん勉強したり学んだりするのは必要です。
インプット無しに、アウトプットはできませんからね。
ただ、学ぶ、勉強するに囚われすぎて、実際に手を動かさなければ無意味です。
コーディングやプログラミングは、スポーツにも似ています。
技術書だけ読んだところで、実際に練習を繰り返さなければ意味がありません。
繰り返し体に覚えさせなければ、実際に出来るようにならないのです。
逆に、何度も繰り返すことで、徐々にできるようになってきます。
最終的には頭で考えなくても、自然と体が動くようになるでしょう。
そうなれば、後は仕事も一気に楽になります。
学ぶと同時に作りましょう。
インプットと同時にアウトプットしましょう。
STARTOUTではその考えを元に、次から課題形式で進めていきます。
ぜひ、アウトプットしながら学んでみてください。