備忘録:CSS(初級編)

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すると色がロイヤルブルーになる