20220113🐱

【初期トレーニング6】

今回はclassタグとレイアウトをした。

classタグは同じセレクタだけど違うスタイルにしたいときに使用する。

①まずhtmlでクラス指定をする

<div class="navigation">

　　　<h1>タイトル</h1>

　　　　<p>文章</p>

<div>

<div class="main">

　　　<h1>タイトル</h1>

　　　<h2>タイトル</2>

　　　　<p>文章</p>

</div>

②次にCSSで個別規定を行う

div.navigation {

　　　text-align : center ;

}

div.main {

　　　text-align : right ;

}

class名である"　"内の言葉は自分で指定することができ、1ページ内で何度も使うことができる。利用制限はないが、class名を指定する際は使える文字の制限と命名のルールがある。

・半角英数字、ハイフン、アンダーバー が使用可能。

・頭文字はアルファベット にする

(要素に名前を付けるにはidというタグもあるがidは1ページ内で2つ同じ前をつけることができない)

レイアウトはデベロッパーツールから確認することができる。(ctrl+shift+I)

・margin(マージン)　一番外側の余白

・border(ボーダー)　枠

・pudding(パディング)　内側の余白

値の指定はpx(実数指定)、%(パーセンテージ)、auto(幅・高さを状況に応じて自動設定)がある。パソコンでの閲覧とスマホでの閲覧は画像などのサイズが変わってくることがある。その場合は％を使うとよい。margin-top、margn-right、margin-left、margin-bottomのように個別に指定することもできる。

キャッシュとCookie

キャッシュは閲覧した"ウェブページの情報”を一時的に保存する仕組みのことで、よく閲覧するページの表示スピードが上がるというメリットがある。反対に、ウェブページの更新があっても最新版は表示されずに更新前のキャッシュデータが表示されるというデメリットがある。(今回自分が指定したCSSの内容が反映されなかったが、その原因はキャッシュが残っていたから)アプリなどにもキャッシュデータがあるため使用頻度の低いアプリなど定期的にキャッシュの消去を行うことで端末の動作が早くなる。

Cookieはウェブページを閲覧した"ユーザー情報"を一時的に保存する仕組みのこと。会員登録が必要なサイトなどでログインが保持されていたり、IDとパスワードが入力されたままになっていて『ログイン』をクリックするだけの状態などはCookieにより可能になっている。ウェブページを閲覧しているときに表示される『Cookieを有効にしてください』というメッセージは言い換えると『入力内容の保持を承諾してください』という意味になる。