はじめに
ガクチカにしたいのもあってアプリ制作を(微)進行させているので、その一環でHTMLとCSSのお勉強をしました。今日はCSS編をとりあえず全部視聴。日誌に何かこうかと思ったのですが、自分用に備忘録として学んだことをまとめようと思います。
CSSの基本事項
CSSって？→HTMLの「見た目」を定義するもの：フォントとか色とかレイアウトとか
どこに書くん？→基本的には「CSSファイル」に書いて「linkタグ」でHTMLに読み込む
→もしくは：HTMLの「headタグ」上に「styleタグ」を作って記述する
書き方↓
[適用対象] ｛
[設定項目]： [設定値]；
｝
今日学んだプロパティ＝設定項目
〇色の指定
・文字色→color: [色];
・背景色→background-color: [色];
☆[色]は色名で指定 or RGBの16進数表現で指定
→16進数表現はwebの「カラーピッカー」などで調べられる
〇フォントの指定
・文字の太さ→font-weight: [太さ];
・文字のサイズ→font-size: [サイズ];
・文字の種類→font-family: [種類];
〇レイアウトの指定
・要素の枠線→border: [?(枠線の種類?)];
・要素の内側余白→padding: [ピクセル数];
・要素の外側余白→margin: [ピクセル数];
☆開発ツールの呼び出し方 in Google Chrome↓
①右上の設定ボタンをクリック
②「その他ツール」→「デベロッパーツール」を選択
③「インスペクタ」ボタンをクリック
レスポンシブデザイン
〇レスポンシブデザインとは？
→webページを表示するディスプレイの種類によって、最適なレイアウトは異なる
→単一のHTMLファイルで、サイズが異なるディスプレイ間で自動的に最適なレイアウトで表示することを実現
〇Bootstrap「コンテナ」
・基本的な書き方↓
①クラスを定義
・head内で、いつもの↓の形でstarter-templateクラスを定義
.starter-template {
[設定内容]
}
②必要部分をdivで挟んでstarter-templateを適用
<div class=”container”>
<div class=”starter-template”>
[starter-templateの内容を適用したい部分]
</div>
</div>
グリッドシステム
〇グリッドシステムとは？
→最近のwebページで主流になっている定番のデザイン
→グリッド＝方眼で区切ってレイアウト
〇Bootstrap グリッド
・12分割のグリッドを利用してレイアウト
・基本的な書き方↓
<div class=”container”>
<div class=”row”>
<div class=”col-sm-[マス数]”>
[適用したい部分]
</div>
</div>
</div>
NEXT：→HTML
次はHTML！
コメント