インターン初期トレ 6回目

今日はcssの続き

前回はプロパティを増やそうというところまで行ったから、今回はclassタグを使って、ブロックごとのスタイルの変更のしかたなどを教わった。

冒頭

vscで書いたものが、ローカル（ディレクトリ）では表示されていて、urlからは反映されていない場合はキャッシュの消去をする。キャッシュは、データを０から読み込むということが非効率だから前のバージョンから読み込んで早く処理しようというシステムだということ。このキャッシュが消去されないと、動作が重くなったり、前のバージョンからだから反映されなかったりする現象が起こる。実際私のキャッシュを調べたら318メガあって、それを消去したら無事サイトに自分の書いたものが反映された。

cookieは個人情報などを含むもので、この役割は、何かサイトにログインするときわざわざパスワードを入れなおさなくていいというシステム。

キャッシュとcookieの違いは、Cookieはユーザーのユニークデータを保存し、キャッシュは一度アクセスしたWebページを保存するということ。

cookieは何かと厄介なイメージで、cookieがオンになってないとログインできないだの、オンになってるから入れないだのいろいろめんどくさいことを体験してるからあんまり好きじゃないな…。逆にキャッシュはよくスマホで消去したりしてて、そのたびに容量が増えたりするから、好きという個人的な感想。

本題

クラス編

今日はclassを使い、ブロックをクラス分けして個別に指定するやり方を教わった。

このタグは、とにかくいろんなサイトでめちゃくちゃ見るものだから一回調べたけど、ブロックがどうとか、まだブロックを習ってないときに出てきたから苦手意識を持ったやつ。でも、今その用語も理解できるし、実際やったらめちゃくちゃ簡単だし、使い勝手がいい。

classに名前を付けることが必要になるけど、この場合わかりやすいネームにするといい。注意なのがこの名前は基本英字で表示する！これは、一瞬でどこを指しているのかわかるようになるから。

例えばclass="main"だと「メインコンテンツのことです。」という表示の仕方になるということ。この表示を初めてみたとき、この名前もあらかじめ指定されていると勝手に思っていたから、自由にできるっていうことに違和感。自由に書き込み出来るのは、コメントと文章とかだけだと思ったから。

次にdivのタイトル（子要素）だけ適応したい場合などは、divの後に半角スペースを入れて指定したりタグを入れて後はいつも通りに大かっこを入れて、コードを書く。

クラスの場合は、divとタグの間に「 . (ドット)＋classの名前」を着けて表示する。

class mainは何個使ってもよくて、その中で分ける場合は上記の使い方でできる。

レイアウト編

ブロック一個で周りだったり中の余白を決めることができる。

レイアウトではマージン、ボーダー、パディングと呼ばれるものがある。

マージン...箱の外。一番外側の余白のことを言う。

ボーダー…「枠」のことで、いじると枠が太くなる。ここはあらかじめ枠が設定されていないと検証の時にはいじれない。

パディング…箱の中。天井からどのくらい余白をつけるかを調整。ボタンの時によく使われる。

これはディベロッパーツール（ctrl+shift+I）から見ることができる。

値の設定はpxと%、autoで指定できる。

％は主に、スマホ版、パソコン版で表示するときに使われるものでautoだと幅高さなどを自動で設定してくれるものになっている。これは状況によって使い分けされる。autoはそのままautoと記入。

個別で指定する場合。

マージン10で指定すると余白は全部10でしてくれる。

他にもトップとボトムで10だったり0、20、20、20で書き込むとそのように指定することができる。

ディベロッパーツールはまだ使い方が慣れてなくて、どこを押したらコードがよく見れるようになるのかとか、一番下にあるwhat's nameが何とかよくわかってないから、苦手。でもちょっとづつ使って覚える。でもディベロッパーツールの出し方とマージンの見方はもう完璧だから今のところは問題ない。

覚えること

index2　　　　　　　　　　　　　　　

<div class="main">

　　<h1>タイトル</h1>

　　　<p>文章</p>

style.css

div.main {

　　　text-align : right ;

}

子要素

div〇h1〇{

　　　text-align : right ;

}

div.main〇h1〇{

　　　text-align : right ;

}

注意

※自分のurlにvscで書いたものが反映さえれない場合、キャッシュを消去する。

※文字の色など、すべて適応できていない場合は、index2のほうで指定しているstylesheetが何を表示させようとしているかを確認すること。