KATインターン No.5

☆前回の課題の振り返り

毎日タイピング、今まで学習したタグをなるべく使ってページを作る。

→タイピングは少し数値は上がったけれど、まだ満足いく数値でないので継続。ブラインドタッチはめちゃ難しい。どうしても手の位置が変わってしまい、正確に打てなくなる。

ページ作成はあまりしっかりと行えなかった。スケジュール管理不足。

 

マウスが変わると画像が変わる、表をつくることを行う。

→ページ作成を行っていた時に画像が上手く表示されなかったので画像のサイズ調整ができなかった。(解決済み)

〇画像サイズが違ったので調整を行う。

 

☆今回行ったこと

1. index2.htmlのページ作成をする。

今まで使っていたページとは異なるページを作り、

<div>

  <h1>タイトル</h1>

  <h2>見出し</h2>

    <p>文章</p>

</div>

 

<div>

  <h1>タイトル</h1>

  <h2>見出し</h2>

    <p>文章</p>

</div>

のような感じのタグを記述した。(この時見やすさのためにdivタグの間は一行あけておく。) 

 

2.CSSを学んだ。

HTMLの時みたいにDOCTYPE宣言をする必要は無い。

CSSを書くためには様々な方法があるが、今回は外部のファイルを読み込む方法で行った。

そこでindex2.htmlのvscで

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

と記述する。これによってHTMLファイルからCSSファイルを読み込むことができ、CSSファイルでのスタイルが適用できる。

そして、

h1{

  color:red;

}

 

h2{

  color:blue;

}

 

p{

      color:green;

}

のように記述すると先程のindex2.htmlの文字色が、h1が赤、h2が青、pが緑色になる。1回1回サイズや色などを記述しなくて済む。

HTMLでマーク付を行い、CSSでレイアウト調整を行っているような感じ。

 

☆やってみての感想

インターン中は今自分が何をやっているのか俯瞰的に理解出来ておらず、とりあえず言われるがままやっている状態だった。このブログを書くことによって構造理解が少しはできたのではないかと思う。なんとなくの現時点の印象だけれどCSSは効率化みたいな感じのイメージ。(まだ少ししかやっていないので今後変わっていくだろうけど)

あと、可視化と事前準備の大切さを感じた。

可視化は、CSSの色付けをした時に分からないままに記述していたものが実際に色が変わってその時にほんの少し仕組みを納得した。可視化は大切。

事前準備は、タイピングの時に感じた。

インターンのメンバーの1人がすごく数値が上がっていたのだが(めちゃめちゃすごい)、その要因としてとにかくやり込むこととインターンの時間の前にウォーミングアップ的な感じでやっていたと話していた。私はその話を聞いた時、あっ…と思った。なぜかというと、タイピング中に指の動きが寒さでかたいなと感じていたからだ。思い返せば、昔習っていたピアノも発表会当日の朝、家でピアノを弾いて指慣らしをしていた。次回は実践…っと。

 

☆次回までの課題

index2.htmlでいろいろやって見る。

前回の課題でできなかったサイズ調整を行う。

タイピングの継続。