本日の概要

１．課題サイト作成
２．アップロード（確認）
３．ワイヤーフレーム（書き出し）・・・PDF、PNG、JPEG、SVG

CSS

URLについて

　https://URL(URI)/（「index.html」）
GoogleのSEOのために、「 URL/ 」 で終わりたい。
（「index.html」）は、自動的にあるものとして判断されます。

contact.htmlなどは、Google検索で損になります。

全てindex.htmlフォルダ名に工夫することが大事です。

XFREEやStarserverFreeはWordPress使い始めてからでよいので、
Myサイトは、ホームページ領域を忍者ツールズに載せればよいです。

ホテルの法則

玄関のindex.htmlがないと、全ての情報が盗まれてしまいます。

OOCSS

スペースでclassを並列するような書き方をOOCSSと呼びます。

inherit

rem・em

Google fonts

Noto Sans ≒　源の角ゴシック
Noto Sans以外のUフォントやメイリオを使うと見栄えが悪くなります。
それに加えて、paddingなどをディセンダのせいで汚くなってしまいます。

Web Fonts（Google API）

font-familyの昔の書き方

font-familyは、使われていない書体から書いていきます。
Mac、Win、Linux、汎用の順
今は、Noto Sansだけ書いていればよいです。
それの方がコンピュータにどのフォントを選ぶか
という余計なコストをかけなくて済みます。

インラインレベル要素のクラス名

①ブロックレベル要素のクラス名の場合
　.xxx
②インラインレベル要素の場合
　a.current　インラインレベル要素名.クラス名

CSSシグネチャー

Macサーバー

Macのサーバーはセキュリティー的にCyberduckを使えばよいです。
授業では、WinSCPを使います。

無料サーバーではFTPを使うこと

新しいサイトをアップロードしたいとき

別のアカウントを忍者ツールズで作って行います。

illustrator

ワイヤーフレーム

wireframe.ai
wireframe.pdf
wireframe.gif
wireframe.png
wireframe.jpeg

スマホとPC用のサイトのワイヤーフレームをPDF用の保存

ファイル＞別名で保存

スマホとPC用のサイトのワイヤーフレームをjpegやpng用での保存

ファイル＞Web用に保存

日本のサイトの四季を作ってみる

height,padding,border-bottom,box-sizing:border-box;を使って作ってみましょう。

　border-boxは、padding、borderを高さや幅に含めます。

指にあるスマホを切り抜きたい場合

どうも7noteです。画面幅いっぱいに背景画像を表示したい時の方法を紹介。

また、1920pxくらいある大きな画面で見たときにも崩れにくい方法も解説します。

画面幅いっぱいに画像を出すなら、background-size: cover;

.bg {
  background-image: url(bg.jpg);
  background-size: cover;  /* 要素いっぱいに */
  background-position: center center;
}

だけど横幅の短い画像だと思ったところが表示されないことも。。。

下の例だと崖の部分が映らなくなってしまう場合があります。

なので元の画像を加工して、横幅を1920px以上の画像にします。
そうすることで高さはそのまま、横幅が変わっても幅いっぱいに画像が表示されます。

これで横幅が変わっても拡大縮小されにくくなりました。

1920pxにしたのは、一般的なディスプレイがおおきいもので1920pxが多いからです。
画像の高さは、実際に表示される高さと同じ

まとめ

オシャレなサイトでよく幅いっぱいに画像を表示するデザインを見かけるので、参考にして入れてみてください。
比較的簡単でオシャレになるので、background-size: cover;は重宝してます。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

検証する説

今回お持ちした説は、こちらです。

※ devroomさんを使わせていただきました。

どのような仕組みか

• <input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。
  • <label>をクリックすると、チェックの切り換えが可能になる。
• チェックボックスがチェックされている時、チェックボックスの状態がcheckedになるため、疑似クラスセレクター:checkedが使える。
• 要素の後ろにある同じ階層のセレクタの指定(~)を駆使すれば、その状態を他要素に伝えることができ、表示の変更が可能。

これらをフルで使うことによって、on/off切り換え機能を伴うUIはすべてCSSのみで実装が可能であると考えました。

※ 仕組みがわかりやすいように、あえて直タグでスタイルを当てております。良い子は真似しないでください。
※ デザインは仕組みが伝わるレベルです。

1. アコーディオン

アコーディオンがHTML・CSSのみで作れる！という話をよく聞くので、これは確実にいけそうですね！

※ details/summaryを使えばいいやん！と思った方もいるかもですが、あくまで今回は検証のため、checkboxとlabelで実装します。

2. ハンバーガーメニュー

ハンバーガーメニューも、理屈はアコーディオンと同じなので、作れそう！

htmlの構造はビミョーですが、ハンバーガーメニューとしては機能するものができました！

3. モーダル

用件を満たせるかは怪しいけど、無理やり頑張れば行けそう...

labelタグを使いまくることで、モーダルを開くボタンをクリックすると開き、×ボタンもしくはoverlayをクリックすると閉じるモーダルが完成しました。

検証結果

※ こちらもdevroomさんを使わせていただきました。

実装はできますが、コードの可読性の低下や、意味合いを意識したマークアップができないなどの懸念がございます。
止むを得ずjavascriptが使えない場合のみ、参考にしていただけたらなと思います。

背景

flex の要素にスクロールバーを追加するため、overflow-y: scroll を追加すると、スクロールバーは表示されるがスクロールしてくれない。

height を指定すれば解決するが、flex 要素なのでやりたくない。

理想

現実

結論

スクロールバーを追加したい要素の親要素を overflow: hidden としなければならない。

ソースコード

https://codepen.io/buyoh/pen/vYGPgjx

<div class="col" style="width: 320px; height: 240px;">
  <div class="flex">
    foo
  </div>
  <div class="flex row" style="overflow-y: hidden;">
    <div class="flex scroll">
      <div id="loongitem"></div>
    </div>
    <div class="flex">
      bar
    </div>
  </div>
</div>

body{
  font-family: monospace;
}
div{
  margin: 1px;
  padding: 1px;
  border: 1px solid red;
}
.col{
  display: flex;
  flex-direction: column;
}
.scroll {
  overflow-y: scroll;
}
.row{
  display: flex;
  flex-direction: row;
}
.flex{
  flex: 1 1 auto;
}
#loongitem{
  width: 40px;
  height: 800px;
  background-color: #7cf;
}

コメント

何が起きているのか、推測してみました。
デフォルトのvisibleの場合。

• overflow:scroll の付いた flex 子要素に、縦に長い要素をレイアウトする
• flex 親要素は、overflow:visible なので、子要素を全て描画する
• flex 親要素には高さ指定がされていないので、flex の計算値を無視して（？）子要素が全て描画されるような高さに調整する（？）
• 子要素の高さは、親要素の高さに追従する
• びよーん

hiddenの場合。

• overflow:scroll の付いた flex 子要素に、縦に長い要素をレンダリングする
• flex 親要素は、overflow:hidden なので、子要素を全て描画しない
• 全て描画する必要がないので、親要素の高さは子要素の高さに依存しなくなる
• 親要素の高さが依存するのは flex の計算値のみ
• 親は枠からはみ出ない

確かに、一般には要素の高さは親要素では無く子要素に依存しますよね。

依存が逆転するようなケースの場合、子要素の大きさの依存を明示的に断ち切る必要があって、それが今回の overflow:hidden　では？

headerを固定したら下の要素と重なる時の対処法（headerの高さが可変)

がうがうです。
headerを固定した時に下に続く要素が重なる時の対処法です。
試行錯誤して3種類試したので覚え書きです。

先日マークアップの練習としてそれっぽいページを作っていた時に
ヘッダーを固定すると、

1.ヘッダーと下に続く要素が重なる
2.ページ内リンクした時に見出しの位置がズレる

以上2点の問題が発生したので、色々調べてみました。

コードサンプル

See the Pen
qiita_css_position-sticky/sample-failure by がうがう (@gawgaw-2020)
on CodePen.

今回はヘッダーの高さがPC表示とスマホ表示で可変になっています。

結論　色々試した結果「position: sticky」が便利だった

様々なアプローチがあると思いますが、marginで高さをとったり、JavaScriptで挑戦してみましたが、
最終的に「position: sticky」が一番シンプルに記述できたので記事にしてみました。

デモはこちら

position: stickyで解決

https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-sticky/

CSSのみ。marginで解決

https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-margin/index.html

JavaScriptで解決

https://gawgaw-2020.github.io/qiita_css_position-sticky/sample-js/index.html

GitHubはこちら

https://github.com/gawgaw-2020/qiita_css_position-sticky

CSSのみ。position: stickyで解決

ヘッダータグのposition: fixedをposition: stickyに変更

header {
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  height: 90px;
  /* ヘッダーを固定 */
  /* position: sticky;に変更 */
  position: sticky;
  top: 0;
  z-index: 9999;
}

position: stickyは
高さが保たれる
指定した位置にくっつく
といった特徴があるため、ヘッダーの高さが可変でも下に続く要素が隙間なく続いてくれました。

See the Pen qiita_css_position-sticky/sample-sticky by がうがう (@gawgaw-2020) on CodePen.

CSSのみ。marginで解決

参考にしたサイトでもこの方法で解決が多かったです。

1.後に続く要素のmargin-topをヘッダーの高さ分とる

.top-image {
  height: 800px;
  background-image: url(../img/top-image.jpeg);
  background-size: cover;
  background-position: center;
  /* ヘッダーの高さ分余白をとる */
  margin-top: 90px;
}

2.スマホ時にヘッダーの高さが変わるので、その分margin-topも修正

@media screen and (max-width: 768px) {
 .top-image {
   margin-top: 40px;
 }
}

この方法の場合、ページによってヘッダーの高さが違う場合などに記述が増えたり、管理が大変だなと感じました。

See the Pen qiita_css_position-sticky/sample-margin by がうがう (@gawgaw-2020) on CodePen.

JavaScriptで解決（未解決?）

最近JavaScriptの勉強を始めたので、実は最初にこちらを試しました。
ヘッダーの高さが可変なので「読み込み時にヘッダーの高さを取得して、その分コンテンツを下げよう」というのが魂胆です。

// ヘッダーの高さを取得
const height = document.getElementById('header').clientHeight;
// 高さ文のマージンを適用する要素を取得
const topImage = document.getElementById('top-image');

// ページ読み込み時にスタイルを追加
window.addEventListener('load', () => {
  topImage.style.marginTop = height + 'px';
});

今回はヘッダーの高さが可変のため、
最初に読み込んだ時と、画面幅が変わった場合に明らかにおかしい隙間が発生してしまいます。

See the Pen VwaRzby by がうがう (@gawgaw-2020) on CodePen.

resizeイベントと時間差での処理を使って実装でもいいかもしれないと書いていて思いました。

ページ内リンクした時に見出しの位置を合わせる

こちらに関しては、今回はリンク先に「anchor」クラスを追加して対応しました。

<section id="philosophy" class="philosophy anchor">
    <h2>企業理念</h2>
  </section>
  <section id="service" class="service anchor">
    <h2>事業紹介</h2>
  </section>
  <section id="contact" class="contact anchor">
    <h2>お問い合わせ</h2>
  </section>

/* 数値は調整可能 */
 .anchor {
  padding-top: 120px;
  margin-top: -120px;
}

クラスつける前

クラス追加後

調整できました。
全てのリンク先にクラスをつけないといけないので、少し面倒臭いなぁと感じてしまうので
JavaScriptなどで調整する方法も調べてみたいと思います。

最後に

「header 固定? fixed & top して padding-top か margin-top して z-index でしょ」から
「他に方法ないかなぁ」と考えることができたので良かったと感じました!!

参考サイト

positionプロパティを身に着けよう！stickyの仕様と使い方を解説！

はじめに

今回はstyled-componentsを使ってレスポンシブデザインをできるだけ楽にする方法を紹介します。

他のstyled-componentsの記事はこちら
* styled-componentsを使ってみる
* styled-componentsでJavascriptの値を使う
* styled-componentsのThemeを使ってみる

実際に描いてみる

今回のは一回書いてしまえばつかいまわせるので簡単に書きます。

src直下にmedia.tsを作成し、以下のコードを書きます。Javascriptで書く場合はtypeの部分は全部消します。

src/media.ts

import {
    css,
    CSSObject,
    FlattenSimpleInterpolation,
    SimpleInterpolation,
} from 'styled-components';

export const sp = (
    first: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
): FlattenSimpleInterpolation => css`
    @media (max-width: 560px) {
        ${css(first, ...interpolations)}
    }
`;

export const tab = (
    first: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
): FlattenSimpleInterpolation => css`
    @media (min-width: 561px) and (max-width: 1024px) {
        ${css(first, ...interpolations)}
    }
`;
export const pc = (
    first: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
): FlattenSimpleInterpolation => css`
    @media (min-width: 1025px) {
        ${css(first, ...interpolations)}
    }
`;

styled-componentsからインポートしたcssは、関数みたいにも使えます。sp(スマートフォン)、tab(タブレット)、pc(パソコン)という関数を作って、それぞれのサイズでスタイルを当てたい時に呼び出して使います。

引数のタイプはVSCodeの型推論と同じになるようにしただけです。

次にApp.tsxで以下のコードを書いて、使ってみましょう。

src/App.tsx

import React from 'react';
import styled from 'styled-components';
import { pc, sp, tab } from './media';

export const App = () => <Box>レスポンシブ</Box>;

const Box = styled.div`
    background-color: red;
    ${sp`
        width: 20px;
        height: 20px;
    `}
    ${tab`
        width: 50px;
        height: 50px;
    `}
    ${pc`
        width: 100px;
        height: 100px;
    `}
`;

ブラウザで確認するとそれぞれのサイズでちゃんと赤い正方形のサイズが変わると思います。
ブレイクポイントなど自由に変えて使ってみてください。

終わりに

ここまで読んで頂きありがとうございます！現在、PHP(Laravel)を中心に勉強しているのでそちらの方の記事を多く投稿していくと思います。感想やリクエストなどどんどん送ってくれると嬉しいです！

参考記事

• styled-componentsドキュメント
• 【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]

はじめに

今回はstyled-componentsのThemeに焦点を当てていきたいと思います。
themeに関しては実務で使った事がなく、あまり理解できていないところもあるので、詳しい方コメントで教えていただけると幸いです^_^

他のstyled-componentsの記事はこちら

• styled-componentsを使ってみる
• styled-componentsでJavascriptの値を使う
• styled-componentsでレスポンシブを楽に書く

themeとは？

ReduxみたいにProviderで囲ったコンポーネント内のどこからでもアクセスできる値みたいなイメージです。

styled-componentsドキュメント引用↓

// Define our button, but with the use of props.theme this time
const Button = styled.button`
 color: ${props => props.theme.fg};
 border: 2px solid ${props => props.theme.fg};
 background: ${props => props.theme.bg};
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border-radius: 3px;
`;
// Define our `fg` and `bg` on the theme
const theme = {
 fg: "palevioletred",
 bg: "white"
};
// This theme swaps `fg` and `bg`
const invertTheme = ({ fg, bg }) => ({
 fg: bg,
 bg: fg
});
render(
 <ThemeProvider theme={theme}>
   <div>
     <Button>Default Theme</Button>
     <ThemeProvider theme={invertTheme}>
       <Button>Inverted Theme</Button>
     </ThemeProvider>
   </div>
 </ThemeProvider>
);

themeのメリット

themeというぐらいなので、色を全体的に変えたりなどスタイルの雰囲気をガラッと変えたりするのに使いやすそうです。

実際に使ってみる

ドキュメントの例でも十分ですが、せっかくなので使ってみましょう！
index.tsxにAppProviderコンポーネントを作って、ボタンを押したらthemeが切り替わる感じにします。

AppコンポーネントはThemeProviderで挟んで、themeを渡します。これでAppコンポーネント内ではt hemeが使えます。

src/index.tsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import { App } from './App';

const AppProvider = () => {
    const [is_theme_dark, set_is_theme_dark] = useState(false);

    const default_theme = {
        text_color: 'black',
        background_color: 'white',
    }

    const dark_theme = {
        text_color: 'white',
        background_color: 'black'
    }

    const toggle_theme = () => {
        set_is_theme_dark(!is_theme_dark);
    };

    return (
        <>
            <button onClick={toggle_theme}>Change!</button>
            <ThemeProvider theme={is_theme_dark ? dark_theme : default_theme}>
                <App />
            </ThemeProvider>
        </>
    );
};

ReactDOM.render(<AppProvider />, document.getElementById('app'));

次にAppコンポーネントことApp.tsxに以下のコードを書きます。

src/App.tsx

import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';

export const App = () => {
    const theme = useContext(ThemeContext);

    return (
        <TitleWrapper>
            <h1>Hello World!</h1>
            <Button>No Event</Button>
        </TitleWrapper>
    );
};

const TitleWrapper = styled.div`
    width: 100vw;
    height: 100vh;
    background-color: ${(props) => props.theme.background_color};
    text-align: center;
    h1 {
        color: ${(props) => props.theme.text_color};
    }
`;

const Button = styled.button`
    color: ${(props) => props.theme.text_color};
    background-color: ${(props) => props.theme.background_color};
`;

themeはhooksのuseContextにstyled-componentsからインポートしたThemeContextを渡してあげるとindex.tsxで定義したthemeの値が入ります。そしてテーマの値をスタイルに使っています。

ブラウザを見てみると下の画像のようにdefault_themeが表示されると思います。

左上のボタンを押すとdark_themeに変わります。

使ってみた感想

今回は簡単な物を作ったのであまり恩賜を受けられませんでしたが、グローバルステートと組み合わせて、サイト全体のテーマを変えたりするのに使えそうな感じがしました。

ここまで読んでいただきありがとうございます！今後もいろいろな記事を書いていきたいと思っているので感想や要望などいただけたら、モチベーションにもつながります。

参考記事

styled-componentsドキュメント

はじめに

一応、下の記事の続きとして書いているのでインストールなどはお手数ですが下の記事をご覧ください。

• styled-componentsを使ってみる

他のstyled-componentsの記事
* styled-componentsのThemeを使ってみる
* styled-componentsでレスポンシブを楽に書く

今回はstyled-componentsでJavascriptの値を使う方法を試していきます。

実際にやってみる

連想配列で定義した値を使う

まず、srcディレクトリ直下にstyle.tsファイルを作り、以下のコードを書きます。

src/style.ts

export const COLOR = {
    RED: '#FF0000',
    ORANGE: '#FFA500',
    YELLOW: '#FFFF00',
    GREENYELLOW: '#ADFF2F',
    GREEN: '#008000',
    BLUE: '#0000FF',
    SKYBLUE: '#87CEEB',
    PURPLE: '#800080',
    PINK: '#FFC0CB',
    BROWN: '#A52A2A',
    WHITE: '#FFFFFF',
    GRAY: '#808080',
    BLACK: '#000000',
};

上のコードを見ると、色の名前とカラーコードの連想配列になっています。

App.tsxに以下のようなコードを書いてみましょう。App.tsxはsrc直下にあり、index.tsxにインポートする感じで書いています。

src/App.tsx

import React from 'react';
import styled from 'styled-components';
import { COLOR } from './style';

export const App = () => {
    return (
        <TitleWrapper>
            <h1>Hello World!</h1>
            <Button>Click</Button>
        </TitleWrapper>
    );
};

const TitleWrapper = styled.div`
    text-align: center;
    h1 {
        color: ${COLOR.RED};
    }
`;

const Button = styled.button`
    color: ${COLOR.WHITE};
    background-color: ${COLOR.BLUE};
    &:hover {
        background-color: ${COLOR.SKYBLUE};
    }
`;

先ほど作ったstyle.tsをインポートしてスタイルに使っています。このように、色や大きさの値をどこかのファイルにまとめて、インポートして使う感じにすると共同開発でもわかりやすくなります。

propsを渡して、その値を使う（例１）

App.tsxを以下のように書き換えてみましょう。Typescriptを使わない場合は、interfaceやの部分は消しましょう。

src/App.tsx

import React, { useState } from 'react';
import styled from 'styled-components';

export const App = () => {
    const [is_red, set_is_red] = useState(true);

    const handleClick = () => {
        set_is_red(!is_red);
    };

    return (
        <TitleWrapper is_red={is_red}>
            <h1>Hello World!</h1>
            <Button onClick={handleClick}>Click</Button>
        </TitleWrapper>
    );
};

interface ITitleWrapper {
    is_red: boolean;
}

const TitleWrapper = styled.div<ITitleWrapper>`
    text-align: center;
    h1 {
        color: ${({ is_red }) => is_red ? 'red' : 'blue'};
    }
`;

const Button = styled.button`
    color: white;
    background-color: blue;
    &:hover {
        background-color: skyblue;
    }
`;

※実際はクリックすると赤と青で切り替わります

上から見ていきましょう。まず、is_redという初期値がtrueのstateを作り、is_redはButtonをクリックするたびにtrue<->falseで切り替わる事がわかります。また、TitleWrapperにはis_redを渡している事がわかります。

そして、下の方のTitleWrapperを見てみるとis_redの値が使われています。ここでは三項演算子を使って、h1のテキストの色を変えています。

is_redの状態	色
true	赤
false	青

propsを渡して、その値を使う（例２）

また、下のようにスタイルの連想配列をそのまま渡す方法もあります。

src/App.tsx

import React, { useState } from 'react';
import styled from 'styled-components';

export const App = () => {
    const [text_color, set_text_color] = useState({ color: 'blue' });

    const handleClick = () => {
        set_text_color({ color: 'red' });
    };

    return (
        <TitleWrapper text_color={text_color}>
            <h1>Hello World!</h1>
            <Button onClick={handleClick}>Click</Button>
        </TitleWrapper>
    );
};

interface ITitleWrapper {
    text_color: {
        color: string;
    };
}

const TitleWrapper = styled.div<ITitleWrapper>`
    text-align: center;
    h1 {
        ${({ text_color }) => text_color};
    }
`;

const Button = styled.button`
    color: white;
    background-color: blue;
    &:hover {
        background-color: skyblue;
    }
`;

※この場合はクリックしたら青から赤になり、その後にボタンを押しても色は変わりません

渡された連想配列がそのままスタイルとして適用されています。

うまく説明できたかわかりませんが。styled-componentsでは今回説明したJavascriptの値を使えるという部分が個人的にかなりいいなと思っています。次はthemeについて書きたいと思います。

ここまで読んでいただきありがとうございます！少しでもお役に立てれば幸いです！

参考記事

styled-componentsドキュメント

はじめに

今回はstyled-componentsの簡単な使い方をやります。

他のstyled-componentsの記事
* styled-componentsでJavascriptの値を使う
* styled-componentsのThemeを使ってみる
* styled-componentsでレスポンシブを楽に書く

styled-componentsとは？

styled-componentsはReactにおけるCSSの当て方の一つで、Reactのコンポーネントのようにjsの値を渡したりでき、コンポーネントのようにスコープが作られるため、使いやすいです。

インストール

Reactの環境ができている方は下のコマンドはスルーしてください。
できていない方は以下のコマンドを打つか、記事を見ながら作ってみてください。
typescriptを使わない場合は下のコマンドの--typescriptは必要ありません。

ターミナル

npx create-react-app --typescript [アプリ名]

webpackでReact+Typescriptの環境構築をする

VSCodeで開き、ターミナルで以下のコマンドを打ちます。Typescriptを使わない場合は@types/styled-componentsは必要ありません。

VSCodeのターミナル

//npm
npm install --save styled-components
npm install --save-dev @types/styled-components

//yarn
yarn add styled-components
yarn add -D @types/styled-components

準備完了！

実際に使ってみる

早速使ってみましょう！

普通にスタイルを当てる

まずはApp.tsxに以下のコードを書いてブラウザで見てみましょう。

src/App.tsx

import React from 'react';

export const App = () => {
    return <h1>Hello World!</h1>;
};

ちなみにindex.tsxは以下のようにしています。

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App/>, document.getElementById('app'));

ただの黒いHello World!が表示されるはずです。

次にstyled-componentsを使って、スタイルを当ててみましょう。
以下のような感じで使います。

VSCodeの拡張機能のvscode-styled-componentsを入れるとシンタックスハイライトが効いてみやすくなります。

const [コンポーネントとして使う名前] = styled.[タグ名]`
    //style
`;

App.tsxにstyled-componentsをインポートして、h1にスタイルを当てています。

src/App.tsx

import React from 'react';
import styled from 'styled-components'

export const App = () => {
    return <Title>Hello World!</Title>;
};

const Title = styled.h1`
    color: red;
`;

今度は赤く表示されるはずです。

補足：下のコードように連想配列で書く書き方もあるみたいです。詳しくはドキュメント

const Box = styled.div({
  background: 'palevioletred',
  height: '50px',
  width: '50px'
});

コンポーネント内の要素にスタイルを当てる

App.tsxを以下のように書き換えてみましょう。

src/App.tsx

import React from 'react';
import styled from 'styled-components';

export const App = () => {
    return (
        <TitleWrapper>
            <h1>Hello World!</h1>
        </TitleWrapper>
    );
};

const TitleWrapper = styled.div`
    text-align: center;
    h1 {
        color: red;
    }
`;

中心に赤くHello World!が表示されるはずです。
上のようにある要素の中の要素にスタイルを当てるといった使い方もできます。

擬似要素を使う

App.tsxを以下のように書き換えてみましょう。

src/App.tsx

import React from 'react';
import styled from 'styled-components';

export const App = () => {
    return (
        <TitleWrapper>
            <h1>Hello World!</h1>
            <Button>Hover</Button>
        </TitleWrapper>
    );
};

const TitleWrapper = styled.div`
    text-align: center;
    h1 {
        color: red;
    }
`;

const Button = styled.button`
    color: white;
    background-color: blue;
    &:hover {
        background-color: skyblue;
    }
`;

先ほどに加えて、hoverで水色になるボタンが表示されます(hover前は青)。

&の後に擬似要素を書くことで使えます。

コンポーネントにスタイルを当てる

App.tsxを以下のように書き換えてみましょう。

src/App.tsx

import React from 'react';
import styled from 'styled-components';

export const App = () => {
    return (
        <TitleWrapper>
            <h1>Hello World!</h1>
            <Button>Hover</Button>
            <StyledButton>Hover</StyledButton>
        </TitleWrapper>
    );
};

const TitleWrapper = styled.div`
    text-align: center;
    h1 {
        color: red;
    }
`;

const Button = styled.button`
    color: white;
    background-color: blue;
    &:hover {
        background-color: skyblue;
    }
`;

const StyledButton = styled(Button)`
    color: black;
    background-color: white;
`;

上では色だけを変えたボタンを新しく作っています。このように、作ったコンポーネントに上書きする形でスタイルを当てる事ができます。
MaterialUIなどにも使う事ができて便利です。

ここまで読んでいただきありがとうございます！少しでもお役に立てれば幸いです！

参考記事

styled-componentsドキュメント