HTML入門⑨

こんにちは。
初心者がWEBデザイナーを目指し、学んだことを記録していくブログです。

本日はHTMLについてふれてみようと思います！

前回の投稿はこちら↓
HTML入門①
HTML入門②
HTML入門③
HTML入門④
HTML入門⑤
HTML入門⑥
HTML入門⑦
HTML入門⑧
  

先日より、腰を痛めてしまい、日常の行動がぎこちない今日この頃・・
日頃の健康がいかに貴重なものかを日々実感いたしております。
 
PC作業が多くなると、ついつい姿勢が悪くなっていってしまう、何てことありませんでしょうか。
私は午後になるにつれて姿勢が悪くなってしまって、姿勢の悪さを公開する日々です。
特に、コーディングをしていると、気づいたら何時間も経っていたりするので、
デザイナーの皆さんは集中しつつも姿勢の崩れには要注意ですね！！

 
さて、前回はタグの説明の途中で終了しました。
 
タグの読み方ってなかなかわからないところもありますよね。
 
タグではないのですが私がデザイナーになってからへえ～と思ったのが、【PNG】。
最初は「ピーエヌジー」と呼んでいたのですが、正式には「ピング」または「ピン」と読むそうです。
  

本日も引き続きタグの説明を進めていきます。
 
前回は、”div”と”a”タグを説明しましたので、
  次は”img”についてご説明します。
 
こちらは画像を表示するためのタグとなります。
終了タグはなく、単独で使用します。
使い方は以下の通り
  

  
“img”の読み方は【イメージ】です。
  
“Image”の略です。
  
“src”の読み方は【ソース】です。
“Source”の略です。
  

“src属性”は、html内に表示する画像の場所を設定するためのもので、
属性の値に”URL”を指定することで、画像の場所を設定できます。
 
“src属性”は、”img”のほかに、【frame,script,iframe,input】などの要素に使われます。
 
最初のうちは、”img”要素で使うことが多いと思います。
なので、まずは”img”とセットで覚えておきましょう！
     

さて、次は”class”についてご説明します。
“class”は属性で、一つまたは複数の要素に対して名前を設定します。
  

  
このような形で、htmlっがあったとして、
太陽の塔と岡本太郎は一つのグループ、ゲルニカとパブロ・ピカソはもう一つのグループで分けて考えたいとしたときに、
このままでは、タグや要素的には同じ扱いとなってしまいます。
 
ですので以下のように名前を付けてあげると、グループ化が可能です。
   

このような形で、クラス名で違うグループに分けることが可能です。
分けることで、これから進めるcssを用いて、文字の色や大きさを変更するときにすごく楽に変更が可能ですよ！
指定したところを、この色にしたい！この文字にしたい！って設定するだけです。

さて、”class”が