Weｂデザイン勉強42日目の成長報告！

はいどうも！

HTML2日目です！

HTMLの勉強始めてから目がしぱしぱするようなｗ

Photoshopよりもコードじっくり見るので目が疲れてるのかもしれません

（いうて2日目だけどｗ）

昨日はheadタグの中身をやりましたので、今日からbodyタグに入りました！

【入力したコード】

<h1></h1>

　見出し

<p></p>

　パラグラフ＝段落

<br>

　改行　

　※改行は終了タグがいりません！

　pタグの中に入れると、同じ段落だけど改行すると言う意味を持たせることができます！

<img src="photo/main.jpg">

　画像を挿入するタグです！

　photo＝フォルダ名

　index.htmlと同じ階層にあり、どのフォルダから画像を参照するかと言う意味

　main.jpg＝画像ファイル名

　フォルダ内のどの画像を参照するかと言う意味

※img srcの後ろにaltとはセットで入力しました！

　「alt"画像名・読み上げる際の文字を入力する"」

　こんな感じで入力します。

　書いてある通りですが、画像名や読み上げの際の文字です！

【属性の書き方】

今回は画像サイズの変更(width)をしました。

タグ名の後ろに追加することで指示を出すことができました！

今回の入力例

<img src="photo/main.jpg" alt="メイン画像" widht="500">

【文字色の変更の仕方】

<h1 style = "color : red ; " >

　style＝CSSの記述のこと

　書き方がちょっとややこいのでここはちょっと注意だな〜と思いました。

<header></header>

　 その名の通りヘッダー

<div></div>

　要素を入れる「箱」の意味。要素をまとめることができる。

<footer></footer>

　その名の通りフッター

<li></li>

　listの意味

　リストの頭文字

　これを定義すると、文字の頭文字に「・」が表示される

<ul></ul> 

　Unordered listの意味

　リストの範囲を定義する箱の意味。liの上下にはulがセットで記述されている。

【インデントの方法】

タグを選択し、「tab」でインデントをあけることができる。

<nav></nav>

　ナブタグ

　今回記述したリストタグはナビゲーションとして定義するため、navタグで囲むことでナビゲーションの意味をもたせました！

今日の作業はこんな感じで終了しようと思います

いや〜いいですね

PhotoshopでHPをトレースするのも結構楽しかったけど、あれは見落とし一個すると大変でしたがHTML楽しい！

まだ最初だからかもしれないですが。笑

ひとまず今日はここまで！＾＾