技術ブログ

（技術系中心）基本自分用備忘録なので、あくまで参考程度でお願いします。

CSSのチートシート 前編

HTML/CSS

CSSのチートシート 前編

CSSのよく使う小技のチートシートをまとめました。

idセレクタ

HTML : id属性 CSS: #を使って選択

  <div id="test">
    テストの文章
  </div>

#test {
    color:blue;
}

これでidがtestのdivタグの色を青色に指定することが出来ます。

classセレクタ

HTML : class属性 CSS: .を使って選択

  <div calss="test">
    テストの文章
  </div>

.test {
    color:blue;
}

idとclassの違い

■class：
→1ページ中に何度でも使える。

■id：
→ 同じid名は、1ページ中に1度しか使えない。

CSSのスタイルの優先順位

CSSには優先順位があります、これを理解できないとハマる事が多々あります。

優先順位はスタイルの指定方法によって決まる。

f:id:lhiroki1205:20190210152405j:plain > いちばんやさしいHTML&CSS入門教室

基本的に細かくセレクタを用いるほど優先度が高くなる。 優先度が同じなら、後から読み込まれたCSSが優先される。

p { font-size: 10px; } 
p { font-size: 20px; }

この場合font-size: 20px; が優先される

CSSの書き方

1. HTMLタグに直接書き込む

    <h1 style="color:blue">青色のCSSのサンプル </h1>
    <h1 style="color:red">赤色のCSSのサンプル </h1>
    <p style="font-size:10px">10pxのサンプル</p>

2.headタグのstyleタグに直接書き込む

headタグのstyleタグに直接styleタグを埋め込むことでCSS読み込みが出来ます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>MyPage</title>
    <style tyep="text/css">
      h1 {
        color:blue;
        font-size: 15px;
      }
      p {
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <h1>青色のCSSのサンプル </h1>
    <h1>赤色のCSSのサンプル </h1>
    <p>10pxのサンプル</p>
  </body>
</html>

3. linkタグに書き込む

一番利用されている方法がlinkタグで外部ファイルのCSSを読み込む方法です。

htmlファイル
.
.
<head>
  <meta charset="utf-8">
  <title>MyPage</title>
  <link rel="stylesheet" tyle="text/css" href="style.css">
</head>

CSSファイル(style.css)
.
.
h1{
  color:blue;
}

p {
  color: aliceblue;
}

インライン要素とブロック要素

1. インライン要素

文書の一部として扱われる

インライン要素として扱われるタグ例
- a
- span
- image

2.ブロック要素

前後が段落された形になる。

ブロック要素として扱われるタグ例
- p
- div 
- table
- h1 ~ h6

より詳しい情報はこちらのサイトが分かりやすい。

CSSセレクタの使い方

HTMLを指定するCSSセレクタの利用方法は多種多様です。 詳細情報は以下のサイトに記載されています。 CSSセレクタのチートシート

擬似要素

擬似要素を利用するとユーザリビティがアップします。

1. link

まだ訪問していないリンク。

index.html
.
.
    <h1>heading 2</h1>
    <a href="##">mainクラスの子要素2</a>　　<----- まだ訪問してないアンカーリンク
    <p>サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。
      サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。
    </p>

style.css
.
.
a:link {
  color:red;
}

訪問していないリンクが赤色になっている。 f:id:lhiroki1205:20190322092619p:plain

2.visited

訪問済みのリンク。

index.html
.
.
    <h1>heading 1</h1>
    <a href="#">mainクラスの子要素</a>　<----- 訪問済みのアンカーリンク
    <p>サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。
      サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。サンプルの文章。
    </p>

style.css
.
.
a:visited {
  color:green;
}

訪問済みのaタグは緑色になった。 f:id:lhiroki1205:20190322092833p:plain

3. focus

フォーカスされている時にバックグラウンドカラーを黄色にする場合は以下のように記載。

style.css
.
.
a:focus{
  background-color: yellow;
}

4. hover

マウスが乗っている時にリンクの下線を消したい場合は以下のように書く。

style.css
.
.
a:hover {
  text-decoration: none;
}

構造的な擬似要素

最初の子要素

最初の子要素を対象にスタイルを当てたい時はfirst-childを利用します。
例えばliタグの最初の子要素だけを青色にしたい場合は以下のように書く

  <ul>
    <li>The first child</li>
    <li>The secound child</li>
    <li>The third child</li>
    <li>The fourth child</li>
    <li>The last child</li>
  </ul>

li:first-child{
  color: blue;
}

最後の子要素

逆にliタグの最後の子要素だけを赤色にしたい場合は以下のように書く 序でに、最後のliタグにはボーダボトムを消しておきましょうー

li:last-child{
  color: red;
  border-bottom:none;
}

f:id:lhiroki1205:20190322095415p:plain

1. サイズの指定方法

文字サイズの指定方法は絶対サイズと相対サイズの２つがあります。

絶対サイズ

絶対サイズとは基準値が不変なサイズのこと

- in (インチ)  
- mm (ミリメートル)  
- cm (センチメートル)

2. 相対サイズ

絶対サイズとは基準値が変わるサイズのこと

- ex ("x"の高さを基準（=1)とする時のサイズ)  
- em (一文字の高さを基準(=1)とする時のサイズ)  
- px(ドット一つ分）  
- %（パーセント）

3. 単語による指定方法

プロパティに対して指定方法が決まっている、タグもあります。

- align
  center / left / right

- vertical-align
  middle / top / bottom

- text-decoration
  underline  / none  / ....

- margin
  auto(余白を自動的に調整する。ブロック要素が中央寄せされる）

およ要素の設定を継承する方法

inheritを利用すると、親要素の設定を強制的に継承させることができます。

<p>
  <a>ここには嫌要素であるpタグのカラーの指定は有効ではない</a>
</p>

CSSチートシート　中編に続く

参考サイト

www.youtube.com