こんにちは やはです。

 

 

 

今回は基礎知識編の続きとなります。まだまだ座学です、頑張りましょう。

 

  • HTMLの役割
  • CSSの役割

今日は上記2点のお話しとなります。

 

HTMLの役割

 

HTMLは、簡単に言うとテキストにタグと呼ばれる印をつけて、それが何であるかを

 

示すテキストファイルのことです。

 

 

画像で見ると少しはわかりやすくなりました?

 

 

<h1></h1>

 

 

この部分がタグと言われるものです。

 

 

<h1>

タイトル

</h1>

 

画像はこのようになっていますね、なぜ2つあるのでしょう?

 

タグと言われるものはその1つ1つに意味があるんです、ちなみにこのh1は文字の

 

サイズを大きくするもので主に見出しであったりホームページのトップ画面に使われ

 

ているものです。

 

タイトルという文字をホームページの見出しにしたい、なのでこれをh1といわれる

 

タグで挟んでその役割を適用させようということです。

 

後半</h1>は /(スラッシュ)がついていますが、これはそのタグはここまでで終わり

 

です。といった具合に、適用させる範囲をここまで!ってするものです。

 

この部分を閉じタグといいます。少しずつでいいので単語を覚えていきましょう。

 

HTMLはこのタグといわれるものが概ね100種類ほどあります、これを駆使して

 

ホームページの文章を構成していきます。

 

100種類って聞くとうんざりしますよね、そんな記憶力ないよ!って話

 

 

ですがご安心ください、一般的に使用されるタグはそのうちの一部なのでホームペー

 

ジを作成しているうちに主要のタグは勝手に覚えてます。体が勝手に覚えてくれます

 

よ。そしてあまり使わないタグは必要になった際に調べればいいだけなので、こんな

 

タグもあったなくらいに覚えておけば大丈夫です。タグの入れ方ではなく、タグがあ

 

ったことだけ頭に入れておきましょう。テストではないので無理に暗記する必要は

 

ありませんからね。

 

HTMLは文章を書き、そこにタグをつけるための言語になります。

 

タグをつけることを英語でマークアップ(Markup)といいます。HTMLはマークアップ

 

言語と呼ばれる種類の1種で「Hyper Text Markup Language」を略した言葉です。

 

これがHTMLの役割になります。ホームページの文章を構成する箇所と覚えてくださ

 

い。HTMLを母体に色々をくっつけていくわけです。

 

 

CSSの役割

 

 

CSSは「Casucading Style Sheets」の略で、簡単にいうとHTMLでタグをつけた

 

内容を指定した表示方法に変更する物です。HTMLのタグだけでホームページを作成

 

するととても地味なホームページができるのです。なぜかというと基本的にHTMLは

 

サイズや段落を変えることはできるんですが、配置を変えたり色を変えたりという事

 

ができないからなんですね。

 

HTMLが文章を構成して、そこについたタグに「文字色」「背景色」「文字サイズ」

 

を任意的に変えるのがCSSというわけなんです。

 

「ホームページの見出しを作ったけど色を変えたいな」

 

「見出しの色を変えてもっとインパクトをつけたい!」

 

そういう時にスタイルでタグを指定して、変化させることができるんですね。

 

文章だけだとわかりにくい所がありますが、実際にコードを書き始めると「なるほ

 

ど!」ってなるので安心してください。むしろ覚える必要もなく勝手に身につきま

 

す。CSSの種類はHTMLの100種類を大きく超えて300種類ほどあります。

 

覚えれるか!!

 

って皆様思うはずです。安心してください、覚えられません。

 

「だめじゃん」ってなるかと思うんですが、HTMLでもお話しした内容と同じで

 

こういうのできたねっていうのを覚えておくだけで後は調べれば丁寧に教えてくれる

 

優良サイトがたくさんあります。なので触り程度に覚えていけば問題ありません。

 

もちろん、よく使うCSSのコードは勝手に頭に入るので毎度調べる必要があるなんて

 

ことはありません。気楽にいきましょう。

 

 

 

本日のまとめ

 

  • HTMLは文章を構成するための母体
  • CSSは地味なHTMLをデザインするための装飾
 
色々と書いてありますけど、要約すると一言で終わっちゃうんですよね。
 
書いてある通りで、文章を構成するための言語、装飾するための言語、この二つを
 
Markup言語。これだけ頭にいればおけば大丈夫でしょう。
 
次からは少しずつVSCを使っていきます。やっとか!って思う方といらっしゃると
 
思いますが、何事も基礎、基本は大事です。ここを知ってるかどうか学習速度に
 
差が出てます。これ本当
 
なのでわからなくても頭に入れていく事が大事なんですね、今は点でしかわからなく
 
ても、勉強を進めていくことに線でつながっていきます。線でつながった時は脳に
 
鮮明に残るのでわからなくても続けていく事が重要です。私は少しでもわかりやすく
 
記事をかくよう練習していきます。また次もがんばっていきましょう!
 
お疲れさまでした。 やはでした!!
 
 
 
私はこちらの参考書を使って勉強していきました。

 

テスト問題などもそうですが、知識0からでもわかりやすく勉強できたところが

 

一番のポイントかと思います。もし自分でもどんどん学習したいのであれば

 

数ある参考書の1つの目安として考えてもいいかもしれません。