プロゲート　HTML＆CSS学習編を終わらせた話

2021.01.17
学習日記

みなさん、おはばんちは。じーぺいです。

今日で、プロゲートのCSS学習コースの上級まで終了し、
道場コースの初級編を終わらせました。

私の学習方針として、学習コースの復習はしない。
復習は道場コースで行う！というもので、現状これでよかったかなと思います。

道場コースを学習して感じたことは、指示のないところでいかに手を動かせるかが難しいと言う点です。
学習コースのようにガイダンスがあれば『余裕じゃん！』なんですが、
何もないところから「さあ、これ作って見て」は初めの書き出しで『うっ』てなります。

明日から、月曜日。仕事が鬱ですが、学習時間が取れるように頑張ります。
朝活の様子はtwitterでリアルタイム投稿しているので、メニューのtwitterボタンからフォローしていただけたら非常に嬉しいです。

以下、本日の学習メモです。じーぺい自身のためだけなので読まない方が良いです。

背景画像の指定
background-image:url(画像の参照元);
背景画像の表示の大きさを切りよく拡大・縮小したい場合
background-size:cover;
要素を中央に配置する
margin:0 auto;

透明度の設定
opacity:0.3;
文字間隔の設定
letter-spacing:2px;
条件細かくした方が覚えやすいと思いきや、正確に定義を覚えた方が応用効きそう

ボタンの設置
タグ　タグはインライン要素なので編集しづらい
↓
displayプロパティでインラインブロック要素に変える
CSSで
display:inline-block;

共通の部分があるがそれぞれ小さい変化をつけたいとき
↓
半角スペースで区切る
div class=”btn blue”/div
div class=”btn red” /div

.btn{
共通のCSS
}
.blue{
color:blue;
}
.red{
color:red;
}

カーソルが乗った時に変化をつける
↓
CSSでセレクタ:hover
例
div:hover
background-color:red;

角を丸める
↓
border-radius:10px;

textなどのインライン・インラインブロック要素を寄せたり中央にしたりする
↓
text-alignプロパティ　center left right で指定

<復習>
imgタグに閉じタグは不要。
画像のURLを指定する際は　img src=”URL”で指定

transition で変化をつける。
多くの場合hoverと組み合わせる。
div
transition:all 1s

div hover
background-color:red;

line-height で行の高さ

line-height: px
高さの中心を指定するときはline-heightを高さと同じ値にすると中央に配置される。

文字の太さ
font-weight normal か　bold で指定
h１〜h６までは初期がbold になっている

widthやheightをpxでなく%で指定することもできる。”

要素を重ねる。（画像と文字を重ねてかっこよく見せるなど）
position:absolute;
top: px
left: px
左上を基準にしてずらしていく。
position:relativeでその要素の左上に基準位置を変更することもできる

class=”text-contents”

ボタンに影をつけて立体的にする。
box-shadow: 水平px 垂直px 影の色;

＜クリックしているように見える＞
１、セレクタにactive
div:active
background-color:red;
２、CSSを打ち消す
none
btn:active
box-shadow:none;
３、要素の位置を移動させて動いているように見せる
btn:active{
position:relative;
top:6px
box-shadow: none;

スクロール時にヘッダーを固定させる。（要素の固定）
position:fixed; 範囲はtop left right bottom で指定

重なりの順序を指定する。
z-index で必ずposition と併用する。
優先順位方式で、値が大き程上に表示

メディアクエリの書き方
@media(条件){ }
例　@media(max-width:1000px )

パソコン全体１１７０px 幅２５％　文字サイズ４５px
タブレット１０００px ５０％　３２px
スマホ６７０px １００％　２４px

レイアウト崩れを直す（paddingなどもふくめて１つのまとまりとすることでwidth%を最適に表示できるようにする。※marginは含まれない）
box-sizing:border-box
これはすべての要素に適用されるべきことがほとんどのため＊で指定することを推奨

レスポンシブデザインの型
1,headタグ内に定型文の記述（viewpoint）
2,メディアクエリ用のCSSを準備
3,HTML内に読み込ませる。この時、viewpointの下にCSSを読み込ませる。
　復習　link rel=”stylesheet” href=”responsive.css”
4,floatは親要素の高さを０にする性質があり、これが段ずれの原因となる。よって
　divの空タグとCSSでのclearの適用でこれを解除する。
　div class=”clear”/div

.clear
clear:left
5.ボタンを画面いっぱい広げる（スマホでも押しやすくする）
width:100% marginの設定など
6,画面サイズごとのフォントサイズの変更
7,逆に大画面でコンテンツレイアウトが間延びしないようにする
　　max-width
例
.container
max-width:1170px; ←1170pxを上限として
width:100%; ←１００％表示させる
8.スマホでヘッダーメニューをアイコン表示する