20211222🐱

KATインターン

【初期トレーニング5】

 

今回からcssに入った。

まずディレクトリに新規ファイルを作り、<head>タグ内に

<like rel="stylesheet" type="text/css" href="./style.css"/>

と入れるとstyle.cssが適用される。

 

<div>を使って入れ子構造を作った。

<div>

　　<h1>タイトル</h1>

　　<h2>見出し</h2>

　　　<p>文章</p>

</div>

スペースを入れることで要素の上下関係が明確になり、綺麗なコードが書ける。(Tabキー・スペースキー)複雑なサイトはコードが綺麗に書かれているのでひとまとまりがわかりやすい。

前回からdivについての説明はあったが自分でしていないのでなんとなく理解に欠けている部分があった。今回実際にやってみてサイトの見やすさに驚いた。タイトル、見出し、文章で文字の太さと前後の文章の幅（？）が変わるだけで全然違う。

 

次にCSS。CSSとは"Cascading Style Sheets"の略で、ウェブページのスタイル(フォントサイズやカラーなど)を指定するための言語。CSSを使わないと文字がただ並んでいる簡素的で、見にくいサイトになってしまう。

色の指定。

h1{

　　color : red ;

　}

h1などの指定する要素の事をセレクタという。文字色はred、blueなど以外にも色コードを入れることもできる。

 

来週中にフォントの変更をする！！

 

<表の作り方、画像の切り替え>

 

課題で出されていた表の作り方と、マウスを置いたら画像が切り替わる方法について。

まずは表の作り方。

<table border="1">　　・・・"1"はテーブルの枠線の太さ

<tr>　　　　　　　　　 ・・・trはテーブルの行()

<td>セル</td>　　　　 ・・・tdはテーブルの列

</tr>

</table>

trは「Table Row」の略。表の行をひとつ作成する。tdは「Table Date」の略。表のデータとなるセルをひとつ作成する。

 

次に画像の切り替え。

<img src="./img/image1.jpg"

onmouseover="this.src='./img/image2.jpg'"

onmouseout="this.src='./img/image1.jpg'">

❕シングルクォーテーションとダブルコーテーションがあるので注意する。

上の赤文字の後にwigth="360px"height="480px"という画像サイズ変更の指示を入れることで2枚の画像の大きさをそろえることができる。

 

今回は特に手こずることなく出来た。マウスを置いた時の画像切り替えを確認したら、サイトがちかちかがくがくなってしまったが、入力をミスをしていたのにすぐに気付けたので良かった。