CSS(初級編)
CSSをコーディングしていくうえで必要なことの備忘録です。
通常忘れることはないと思うのですが、
最近忘れっぽいような気がするので、HTMLとともに備忘録としてまとめておきます。
CSSは、ドットインストールなどのプログラミング学習のサイトで、
学習させていただきました。
ドットインストールは、すごく丁寧なサイトで、動画でとても分かりやすいです。
備忘録として
- index.htmlと同じ階層にcssフォルダを作成し、その中にstyles.cssを作成する
- <head>の中に、<link rel=”stylesheet” href=”css/styles.css”>を記入し、cssフォルダと関連付ける
- styles.cssにデザインの記入する
- Cromeでは、windowsであれば、ctl+shift+iでデベロッパーツールを使用することができる
- 色はいろいろな書き方ができる
- h1{
color:red;
color:rgb(0, 255, 0);
color:#0000ff;
} - /* コメント*/
- webページで右クリック⇒検証から要素を検証。余白についてどのmarginなのか?
- ul{margin:0px;}など 余白0
- li{
display: inline-block;
padding: 4px 8px;
font-size: 12px;}など
- header{
background-color: pink; 背景をピンク
text-align: right; 全体を右よせ
padding:10px; 余白10ピクセル}
- header li > a{
text-decoration: none;
color: inherit;
} ヘッダー内のliの中のaという細かい制限ができる - header li > a:hover{
color:royalblue;
} ヘッダー内のリストのリンクの上にhoverすると色がロイヤルブルーになる