LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Tomochan_taco(Tomoko Ohashi)

CSSに関する自分用メモ

Last updated at Posted at 2023-01-27
  • 「* {color: skyblue;}」すべての要素
  • 「h1, p」複数のセレクタ
  • 「div span」div の下にある階層の span 全て
  • 「div > span」div の直下にある span だけ
  • 「p + p」p の次に来る p 要素
  • 「p.points」（くっつけたセレクタ）p 要素であって、なおかつ pointsクラスがついたもの
  • 「a[title] 」a タグのうち title 属性があるもの
  • 「a[href="https://www.yahoo.co.jp/"] 」a タグの href 属性がyahoo だった場合
  • 「a[class~="search"] 」a タグのうち class 属性に search が含まれているもの
  • <a href="https://www.yahoo.co.jp/">
    a[href^="https"] { 　　前方一致
    a[href$="co.jp"] { 　　　後方一致
  • <a href="mailto:mememe@yahoo.co.jp">
    a[href*="mememe"] {　　　部分一致

・jQueryのSwiperとかを読み込む際は、オリジナルのCSSの上に、SwiperのCSSとかmin.jsとかを読み込むこと。

・アニメーションプロパティ
https://pengi-n.co.jp/blog/css-animation/

・aタグやspanタグなどにpaddingを指定するときは、displayを指定しないと（display:inlineのままだと）paddingの効き方がおかしくなる。

・親要素に「text-align: center;」を指定するだけでなく、子要素に「text-align: left;」を指定することで、要素全体は中央に配置しながらテキストを左揃えにすることができる。

Flexbox

  1. 「display: flex;」とすると、親要素になる。そして、子要素が横並びになる。（デフォルトで「flex-direction: row;」になっているから。）
    ※「display: inline-flex;」とすると、inline-blockの性質も併せ持つ。

  2. それぞれ親要素と子要素につけられるプロパティは決まっている。

  3. 親要素の直近の子要素だけで、孫要素なんかには反映されない。

  4. 子要素の横幅がCSSで指定されていても、display: flex;とすると、それを無視して全子要素を一列に並べようとする。これは flex-wrapがデフォルトで要素折り返さないnowrap;になっているから。wrapにすると、幅があふれた場合に折り返してくれる。

  5. flex-direction と flex-wrap は、flex-flow というプロパティで一気に指定することも可能。順不同かつ片方は省略可能なので、例えば wrap column としてあげると、折り返しつつ縦に並べてくれる。

親 子
flex-direction order
flex-wrap flex-grow
justify-content flex-shrink
align-items flex-basis
align-content　 align-self

z-index

img { 
  position: fixed;   // 常に要素を指定した位置に固定。（windowの固定位置）
	top: 10px;
	left: 40px;
}
  1. position: static; は、ブラウザのデフォルト値で、すべての要素に振られている。だから、特に覚える必要はない。
  2. position: absolute;を使うと、要素同士を重ねて表示することが出来る。
  3. position: absolute;を子要素の中で使うときは親要素にrelativeを設定することによって意図した場所に指定できる。
  4. 親要素に position: ralative; とつけて、その子要素にposition: absolute;としてみる。そうすると、まず position: ralative;とつけたほうの高さがまず0になって、(多分子要素が浮いた感じになるから？) position: absolute;は、そのrelativeがついている親要素の左上からの絶対位置で要素を表示するときに使う。
  5. position: absolute; top left は、positionがstatic以外の親要素の絶対位置をtopとかleftで決めていく。だから、上の親要素にposition: relative がついていないと、上まで見に行ってとかまでみにいく。
  6. Absoluteにtop:0; left:0; とすると親と子の配置がそろう。
  7. z-indexを有効にするにはpositionはstatic以外になっていないといけない。だからあえてposition: relative;と書く場合もある。absoluteの他、fixedもstickyもstatic以外だから、z-indexを使用することができる。
  8. 孫要素にz-indexがついていなくても、その親の子要素のz-indexが大きくて一番手前に出ていれば、その孫要素が一番手前に現れる。そして、この孫要素のz-indexが、他の子要素のz-indexより小さくても、前述の理由で前に表示される。
  9. z-indexがautoは、z-indexを書かない場合と同じ。
  10. position: sticky;は、その親要素をスクロールすると追随するようになる。（あくまで親要素のheightの中で！）
  11. stickyの親要素にoverflow: hiddenがついていると動作しなくなる。
  12. 親要素にpadding-topとかpaddingがついていたとしても、子要素がabsoluteでtop: 0;
    right: 0;　background-image: url(hello.jpg);とかになっていたとしたら、そのバックグランド画像はpaddingを無視してトップにペタッと表示される。
  13. position: absolute; を指定した要素において、top と bottom の両方が指定されていない場合、その要素は親要素に対して上下左右の位置が未定義となります。このため、親要素の左上隅を原点として、要素が最初に出現する位置が指定された場所となります。

nth-child（あくまで同じ階層にある要素のうち何番目かを見るもの）

<div class="main">
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
  <p>Hello World!</p>
</div>

.main > p:nth-child(3) {}  //3番目の要素
.main > h2:nth-child(3) {}  //もし3番目がpじゃなくてh2だったら。
.main > p:nth-child(3n) {}   //3の倍数
.main > p:nth-child(odd) {}    //奇数
.main > p:nth-child(even) {}   //偶数
.main > p:first-child {} 
.main > p:last-child {}
.main > p:not(:last-child) {}   //最後以外の要素

nth-of-type（同じ階層に並んでいる要素の、同じ種類の要素のうち何番目か）

.main > p:nth-of-type(3) {}
.main > p:nth-of-type(3n) {} 
.main > p:nth-of-type(odd) {}
.main > p:nth-of-type(even) {}
.main > p:first-of-type {} 
.main > p:last-of-type {}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>  //①
    p {color: orange;}
  </style>
  <link rel="stylesheet" href="style.css" type="text/css">  //②
</head>
<body>
  <p style="color: violet;">こんにちは。</p>  //③
</body>
</html>

④　ビューポートの単位
vw viewport width ビューポートの幅に対する割合
vh viewport height ビューポートの高さに対する割合
vmin viewport minimum ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax viewport max ビューポートの幅と高さのうち、値が大きい方に対する割合
1vw は 1% と同じ長さ

③ ☆　width: 80%;とすると、スマホの時はよくてもPCででかくなりすぎてしまう！というときは、以下の様にするとよい。

width: 80%;
max-width: 500px;

☆　幅500pxの画像が、幅320pxのスマホではみ出てしまう！という時は、max-width: 100%;を指定すると、小さい画面で見たときにも画面サイズより画像が大きく表示させることがなくなる。
※max-width使用時に縦横比が崩れてしまった場合は、height: auto;を追記する。

☆　大きい画面でも適切に表現できるように。

max-width: 1170px;
width: 100%;

② positionプロパティで、上下中央に配置する方法と、FontAwesomeを疑似要素で読み込む方法。

  &::after {
    position: absolute;
    top: 50%;　//まずは親要素のtop50%に合わせた後で、、
    font-family: "Font Awesome 5 Free";  //FontAwesomeを疑似要素で読み込む。
    content: "\f005";  //FontAwesomeを疑似要素で読み込む。
    font-weight: 400;  //FontAwesomeを疑似要素で読み込む。
    transform:  translateY(-50%);  //要素の幅と高さの50％（半分）マイナス方向に移動（変形）
  }

・font-weightは、指定するアイコンの種類（スタイル）によって異なる。
Solid→ font-weight: 900;
Regular→ font-weight: 400;
Brands→ font-weight: 400;
Light (Pro)→ font-weight: 300;
参考サイト： https://www.webdesignleaves.com/pr/plugins/fontawesome_01.html

① HTMLのデフォルトのフォントサイズは16px。だから、

html {
  font-size: 100%;
}

で指定すると、16pxになる。
remはルート要素、emは親要素に対するfont-size比。
0.1emは0を省いて.1emと表記することも可能。

⦁ 頭に 「@charset "UTF-8";」をつける。
⦁ CSS では後から書いたほうが優先。
⦁ <h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなる。
⦁ 基本的に１ページにつき、h1は一つだけ。サイトのタイトルのみ。
⦁ <a>タグはインライン要素なので、中身のテキストの部分しか大きさを持たない。その結果、<a>タグをクリックできる範囲はテキストの部分だけ。
⦁ 継承されないプロパティでも、継承したかった場合、 inherit というキーワードを使う。CSSの継承する・しないを調べるには、MDNサイトの、各プロパティの継承の部分を調べる。

	body {
	coror: red;
	border: 1px solid black;
	}
	h1 {
	border: inherit;
	}

インラインブロック.png

⦁ 画像をCSSだけで簡単に小さくする方法。

img {
  max-width: 160px;
  height: auto;
}

⦁ imgタグは、widthとheightも、いちいちブラウザが高さを計算しないから、つけておくとよい。
⦁ div の場合、デフォルトで width は親要素の幅いっぱい、高さはコンテンツの高さになっている。div の親要素がなにかというと body と html になるので、「body, html { height: 100%; }」と指定する。親要素のheightが指定されていないと%指定は効かない。
⦁ height: autoだと要素の中身（文や画像、子要素、paddingなど）の分だけの高さ。
⦁ bodyまで一切pxで幅が指定されていないと、ブラウザの幅＝bodyの幅になる
⦁ width:33.333%というように指定すれば、3等分できる。
⦁ 文字に対してマージンをかけて思ったより広いな、と思ったときは行間のスペースが含まれているかもしれないから、そうゆうときはline-height: 1;とするとうまくいく。
⦁ 入れる。
⦁ 頭に「@charset "utf-8";」入れる。

777cfeca930c-20221213.png

autoだとwidthの中にpaddingとborderが含まれる。
100%だとpaddingとborderの分が含まれない。
width:100%の要素にborderかpaddingが指定されていると、その分だけ親要素からはみ出てしまう。その為、box-sizing: border-boxを指定する
※　アスタリスクに対して指定することが推奨されている。

* {
  box-sizing: border-box;
}

vertical-align
テキストと画像を一行に入れたときに、そのポジショニング！

margin

  1. marginの値を３つ記述した場合：上、左右、下になる。

  2. marginにautoを指定するときは、必ずwidthを併せて指定する。上下のmarginにautoを指定することはできない。

  3. 上下にブロックボックスが並んだ場合、(上下方向に限って発生する。)その間の margin は結合されて、大きな方の margin になる。

  4. ブロック要素にはmargin: 0 auto;、インライン要素・インラインブロック要素にはtext-align: center;

  5. divにtext-align: center;を指定しても、その中のh1とかpだけが中央揃えになる。

  6. autoは、あまった余白を割り当てるという意味。だから、margin-left: auto; margin-right: auto; とすると、均等に割り振られて、画像が中央に来る。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?