Reactでstyled-componentsを利用する。

成果物

ソースコード

App.tsx

import styled from 'styled-components';

// Headerのスタイルを定義
const Header = styled.div`
  background-color: #2196F3;
  padding: 16px;
  color: white;
`;

const Main = styled.main`
  padding: 16px;
  display: flex;
  flex-direction: column;
`;

// Footerのスタイルを定義
const Footer = styled.div`
  background-color: #2196F3;
  padding: 16px;
  color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
`;


// 例: Articleコンポーネント
const Article = styled.div`
  background-color: #FFFFFF;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
`;

function App() {
  return (
    <div>
      <Header>
        <h1>Header</h1>
      </Header>
      <Main>
        {/* 他のコンポーネントをここに配置 */}
        <Article>
          <h2>Article 1</h2>
          <p>This is the content of article 1.</p>
        </Article>
        <Article>
          <h2>Article 2</h2>
          <p>This is the content of article 2.</p>
        </Article>
        {/* 他のコンポーネントも同様に追加できます */}
      </Main>
      <Footer>
        <p>&copy; 2023 My App</p>
      </Footer>
    </div>
  );
}

export default App;