2021/08/24

覚えとくと良さそうなことメモりました。

@ 酒井悠宇

しまぶーの動画みて大事だと思ったところをメモしていきます。
https://www.youtube.com/watch?v=eNfFRNsmnj8&list=PLwM1-TnN_NN457PTxsvNXxVxN8fkbYHKU
https://www.youtube.com/watch?v=xBLIzweHYic&list=PLwM1-TnN_NN5jWN09yjtxWng2XZa88ate

エディタはみんな大好きVSCodeです。

HTMLメモ

正しいマークアップをするべき理由

クローラーにコンテンツを正しく判断させるため

ブラウザの互換性を調べるときに便利なサイト

「MDN」https://developer.mozilla.org/ja/docs/Web/HTML
「Can I use.com」https://caniuse.com/

imgタグでランダムな画像を表示したい

「Unsplash Source」https://source.unsplash.com/

<img src="https://source.unsplash.com" />
#サイズを指定することもできる
<img src="https://source.unsplash.com/50x50" />

ul、liタグを一気に展開したい

#以下のように記述すると
ul>li*3

#こうなる
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ダミーの文章を用意したい

#以下のように記述すると
lorem

#こうなる
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi sint maiores atque cum a molestiae exercitationem at, provident rem optio sapiente perferendis sed incidunt neque necessitatibus voluptatibus consequatur expedita consequuntur.

smallタグ

MDN引用

HTML の <small> 要素は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。

https://developer.mozilla.org/ja/search?q=small

コピーライトとかはこれで書くといいらしい。

CSSメモ

キーワードで指定した色をカラコードやRGB値に変更したい

vscodeに標準で搭載されている「カラーピッカー」

色を指定している部分のコードをホバーするとカラーピッカーが出現する。

文字の場所をクリックすればrgb値やhsl値に変更できる。

右側のバーで色の種類や透明度も柔軟に変更できる。

ユニバーサルセレクター

#全要素に当てるcss
  * {
    color: blue;
  }

#articleタグの中の全部の要素に当てるcss
  article * {
    color: red;
  }

特定の要素に対してのみcssを効かせたい

部分文字列一致セレクター

aタグの中でも、href属性を持っている要素にのみ効く

a[href] {
  color: red;
}

aタグでhref属性を持っている要素の中でも、href属性値が「https://www.yahoo.com/」と「一致する」要素に対してのみ効く

a[href="https://www.yahoo.com/"] {
  color: red;
}

aタグでhref属性を持っている要素の中でも、href属性値が「https://www」から「始まる」要素に対してのみ効く

a[href^="https://www"] {
  color: red;
}

aタグでhref属性を持っている要素の中でも、href属性値に「yahoo」が「含まれる」要素に対してのみ効く

a[href*="yahoo"] {
  color: red;
}

aタグでhref属性を持っている要素の中でも、href属性値が「.co.jp」で「終わる」要素に対してのみ効く

a[href$=".co.jp"] {
  color: red;
}

擬似クラス

articleタグの中の1番目のp要素に対してのみ効く

article p:nth-of-type(1) {
  color: red;
}

articleタグの中の1番目ではないp要素に対して効く

article p:not(:nth-of-type(1)) {
  color: red;
}

擬似要素

h1タグ内の文字列の前に「!!!!」という文字列を追加する

h1::before {
  content: "!!!!";
}

h1タグ内の文字列の後ろに「!!!!」という文字列を追加する

h1::after {
  content: "!!!!";
}

pタグの最初の文字だけ大きくする

p::first-letter {
  font-size: 50px;
}

pタグの最初の行だけ色をかえる

p::first-line {
  color: red;
}

子孫結合子

mainタグ内にある全てのh1要素の色を変える

main h1 {
  color: red;
}

子結合子

mainタグ直下のh1要素のみ色を変える

main > h1 {
  color: red;
}

隣接兄弟結合子

articleタグの中の2番目のp要素から色を変える

article p + p {
  color: red;
}

スタイルが効かない時

以下のどれかが原因

カスケード
詳細度
継承

【CSS #4】基礎からちゃんと学ぶ CSS 入門！スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

カスケードとは

marginの相殺

<div style="margin-bottom: 20px;">おはようございます</div>
<div style="margin-top: 40px;">こんにちは</div>

こんな感じでmarginをかけるとmarginが足されるんじゃなくて大きい方が優先される。
なので今回のような場合は40pxしかmarginが入らない。

ブロックレベル要素とインライン要素

インライン要素はwidthやheightが効かなかったり、改行されなかったりするので注意して使用する。
<img/>とかもインライン。

ブロックレベル要素一覧

https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

インライン要素一覧

https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements