【Web開発 / 学習メモ】HTML / CSS / JavaScript / Node.js / React.js

はじめに

業務でWeb開発に関する知識が必要になってきたので、学んだ内容についてメモします。

ベンダープレフィックスとは
CSSのプロパティの先頭に「-webkit-」「-moz-」など付いているものを指す。
CSSのプロパティの拡張機能を、各ブラウザ（Chome、Mozillaなど）に実装するために付ける接頭辞のこと。

p { color : #ff0000; }

種類	概要	サンプル
全称セレクタ	全ての要素のスタイルを指定したい場合に使用する。アスタリスクを使う	`*{ color : #ff0000; }`
要素セレクタ	特定のタグのスタイルを指定したい場合に使用する	`p{ color : #ff0000; }`
子孫セレクタ	特定のタグの中にあるタグの、スタイルを指定したい場合に使用する	`article p{ color : #ff0000; }`
複数セレクタ	複数のタグに共通のスタイルを適用したい場合に使用する。カンマで区切って複数指定する	`h1,h2{ color : #ff0000; }`
class/idセレクタ	特定のclassに対してスタイルを指定したい場合に使用する	`p.text{ color : #ff0000; }`

<div>タグとは
タグのみだと意味を意味をなさない（レイアウトの見た目に影響を及ぼさない）。
CSSを適用させるためのかたまりだったり、クラスを付与したい場合に利用する。
参考サイト
MDN | <div>: コンテンツ区分要素

あいうえお
<br>
<br>
かきくけこ

divタグで囲う例

const Sample = () => {
    return (
        <div> // ＜＝ divタグで囲った例
            <p>段落1</p>
            <p>段落2</p>
        </div>
    )
}

!

以下のように空のタグにすると、不要な要素を追加せずに対処することが可能とのこと

divタグで囲う例

const Sample = () => {
    return (
        <> // ＜＝ 空のタグで囲った例
            <p>段落1</p>
            <p>段落2</p>
        </>
    )
}

拡張子を「jsx」とすることが可能。
Reactコンポーネント用のファイルであることを明示する際に使えそう。

-- hoge.js
++ hoge.jsx

パスカルケースで命名する
※先頭を大文字とする命名規則

例

SampleComponentName