はじめに…
編集リクエストやご指摘のコメントをいただきありがとうございます。
正直「誰も見ていないっしょ!」というノリで自分用復習メモ兼学習意欲継続の為のルーティンとして始めた事だったので驚きました。
そもそも書き方があまり分かっていないのでお見苦しくなってしまう事も多々あるかとは思いますが、気になる点があればご指導頂けると幸いです。
学習内容
引き続きUdemy講座です。もっと時間が欲しい…
HTML/CSS
<div></div>
タグ自体は意味を持たない。領域を区別(division)するためのタグ…らしい。
<div class="クラス名"></div>
グローバル属性。上記の様に書く事で区別するためのグループ名をつける事が出来る。
div {
margin: 長さ;
}
上記の様にすると、上下左右の余白を任意の絶対値や相対値で一括指定できる。auto
と入力するとウィンドウサイズに合わせて自動で調整される設定になる。
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
この様に入力する事で上下左右それぞれ個別に余白を指定する事も可能。
div {
margin: 10px 20px 30px 40px;
/*
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
と同じ
*/
}
上
右
下
左
の順でショートハンドプロパティでも書ける。
また、上
下
、左
右
において同値の場合は後半の記述を省略できる。
div {
padding: 長さ;
}
内側の余白が設定出来る。幅の指定の仕方はmarginと共通。
div {
background-color: カラーコード;
}
RGB(rgb(0, 0, 0)
)やHEX(#000000
)など指定出来る他、white
やblack
などの色の名前も使える。
div {
border: 長さ;
}
線のタイプ、線の色も指定が可能。
所感
少しづつ覚えることが増えてきたがまだまだ初歩の段階なので復習しつつ身に付けよう。
CSSの記述真っ赤だし見やすい書き方を調べようと思います。
追記:taiy様より編集リクエストいただき格段に見やすくなりました。ありがとうございます。自分だけでも見やすく書ける様にならなくては…