Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブcss

2018年8月27日 By KD コメントを書く

React Styled Componentsを試してみよう

React Styled Componentsを試してみよう

Reactを中心とするコンポーネントベースのWebアプリケーション開発は、CSSをモジュール化しようとする動きにも影響を与えています。今回はReactのStyled Componentsを簡単に試してみましょう。(2019/2/1にアップデートしました)

はじめに

CSSのモジュール化の流れは自然な発想です。そもそもCSSはグローバルスコープであるため、あるCSSファイルに書いた内容は全てのCSSファイルに影響を及ぼします。誰かが書いたCSSを見てどれがどこに影響を及ぼしているかの全容を把握するのはそもそも難しいのです。そこで近年、SASS等のCSSフレームワークやBEM等の命名規約を用いることでローカルスコープっぽく扱おうとするモジュール化の動きが盛んになりました。そして最近ではCSS Modulesがよく使われるようになってきました。Webpackのcss-loaderのmoduleオプションを有効にすることで、CSSのクラス名を一意に変換し、あるReactコンポーネント用のCSSファイルが他のCSSファイルに影響を及ぼすことを回避できるようになりました。そして、次のパラダイムとして、CSSを完全にコンポーネントに閉じ込めることでJavascriptの力を引き出す方法がCSS in JSであり、Reactでそれを実現したのがStyled Componentsです。

今回はcreate-react-appで作成したアプリケーションを元に、まずはCSS Modulesを適用し、その後でStyled Componentsを適用して違いを見ていきましょう。

CSS Modulesの適用

まずはCSS Modulesを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。

準備

それではcreate-react-appでサンプルアプリケーションを作り、CSS Modulesを有効化しましょう。

$ create-react-app my-css-modules-app
$ cd my-css-modules-app
$ yarn eject
$ yarn install
$ vi config/webpack.config.dev.js
...
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: true, // 追加
                  importLoaders: 1,
                  localIndentName: '[name]__[local]__[hash:base64:5]' // 追加
                },
              },
...

index.js

index.cssの内容をCSS Modulesで書き直します。

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

import styles from './index.css';

ReactDOM.render(<App className={styles} />, document.getElementById('root'));
registerServiceWorker();

App.js

CSS Modulesで書き直しましょう。

import React, { Component } from 'react';
import logo from './logo.svg';

import styles from './App.css';

class App extends Component {
  render() {
    return (
      <div className={styles.App}>
        <header className={styles['App-header']}>
          <img src={logo} className={styles['App-logo']} alt="logo" />
          <h1 className={styles['App-title']}>Welcome to React</h1>
        </header>
        <p className={styles['App-intro']}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

動作確認

元のスタイルが反映されていることを確認しましょう、

$ yarn start

Css modules

OKですね。CSSのクラス名に一意の値が自動的に設定されています。

Styled Componentsの適用

それでは、いよいよStyled Componentsを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。

準備

create-react-appでサンプルアプリケーションを作り、必要なパッケージをインストールしましょう。

$ create-react-app my-styled-components-app
$ cd my-styled-components-app
$ yarn add styled-components

index.js(old)

index.cssの内容をinjectGlobalを使って書き直します。

import React from 'react';
import ReactDOM from 'react-dom';
import { injectGlobal } from 'styled-components';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

injectGlobal`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`;

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

App.js(old)

Styled Componentsを使って書き直しましょう。

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import logo from './logo.svg';

const AppWrapper = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img.attrs({
  src: logo,
  alt: 'logo',
})`
  animation: ${rotate360} infinite 20s linear;
  height: 80px;
`;

const AppTitle = styled.h1`
  font-size: 1.5em;
`;

const AppIntro = styled.p`
  font-size: large;
`;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          To get started, edit <code>src/App.js</code> and save to reload.
        </AppIntro>
      </AppWrapper>
    );
  }
}

export default App;

index.js(new)

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

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

App.js(new)

Styled Componentsを使って書き直しましょう。index.cssの内容はcreateGlobalStyleを使って書き直します。

import React, { Component } from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';
import logo from './logo.svg';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`;

const AppWrapper = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img.attrs({
  src: logo,
  alt: 'logo',
})`
  animation: ${rotate360} infinite 20s linear;
  height: 80px;
`;

const AppTitle = styled.h1`
  font-size: 1.5em;
`;

const AppIntro = styled.p`
  font-size: large;
`;

class App extends Component {
  render() {
    return (
      <>
        <AppWrapper>
          <AppHeader>
            <AppLogo />
            <AppTitle>Welcome to React</AppTitle>
          </AppHeader>
          <AppIntro>
            To get started, edit <code>src/App.js</code> and save to reload.
          </AppIntro>
        </AppWrapper>
        <GlobalStyle />
      </>
    );
  }
}

export default App;

動作確認

CSSファイルを削除しても元のスタイルが反映されていることを確認しましょう、

$ rm src/index.css
$ rm src/App.css
$ yarn start

Styled

表示もアニメーションもOKです。CSSのクラス名には一意の値が自動的に設定され、スタイルが正しく適用されています。

最後に

いかがでしたか?Styled Componentsをざっくりではありますが、理解できたのではないでしょうか。新しいプロジェクトでは積極的に使っていきましょう。では。

環境

  • create-react-app: 1.5.2
  • yarn: 1.9.4 -> 1.13.0
  • styled-components: 3.4.5 -> 4.1.3

カテゴリ : 技術 Tips & Tutorials タグ : css, css-modules, react, react-styled-components

2018年5月4日 By KD コメントを書く

CSS Grid Layoutで4カラムのレイアウトを一瞬で作る方法

CSS Grid Layoutで4カラムのレイアウトを一瞬で作る方法

4カラムのレイアウトは基本的なレイアウトであり、あらゆる場面で必要になります。そして、CSS Grid Layoutは今最も新しいデザイン方法であり、今マスターすべき技術の一つです。今回は、CSS Grid Layoutを使い、4カラムのレイアウトを一瞬で作る方法を紹介します。

はじめに

CSSの進化には興味深い物があります。昔はテーブルデザインという今見ると古臭いデザインがあり、モダンなデザインにしたいという時代の要望に答えるかのようにfloatを使ったテクニカルなデザインに移行していきました。そして、iPhoneなどの登場によりレスポンシブデザインが流行り始めると、Bootstrapが登場し、グリッドシステムというデザイン方法が主流となりました。最近では、CSS3の登場により、CSS Flexbox Layoutが登場し、一次元レイアウトを簡単に扱えることから、デザイナーは誰もが使うようになりました。そして、ついにCSS Grid Layoutの登場した事により、2次元レイアウトさえも簡単に扱う事ができるようになりました。

Grid Layoutの登場で過去の技術はどうなるか?

Gird Layoutの登場により、過去のデザイン技術がどうなるかは、誰もが気にしているところです。未来の事は誰にも分かりませんが、私の主観を述べることにします。

  • floatによる全体デザイン -> 消滅する。もちろんプロパティとしては普通に使う。
  • Bootstrapのグリッドシステム -> グリッドシステムはGird Layoutで代替可能のため、グリッドのために使う理由は無い。どちらかと言えばCSSデザイン用のフレームワークの一つとして使われる。
  • Flexbox Layout -> 1次元レイアウト(行または列で制御するレイアウト)の場合に採用される。また、Grid Layoutと組み合わせて使うこともあるので、普通に使われ続ける。

まあ、そんな感じでしょう。今デザインを学ぶなら、Flexbox LayoutとGrid Layoutの両方学ぶ必要があることは間違いありません。

4カラムのレイアウト(CSS Grid Layout)

ということで、一瞬で4カラムのレイアウトを作ってしまいましょう。

作業フォルダとファイルの準備

$ mkdir 4column
$ cd 4column
$ mkdir css
$ touch css/grid.css
$ touch index.html

index.htmlの作成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/grid.css">
  <title>4 Column layout</title>
</head>

<body class="grid">
  <header class="header">Header Area</header>
  <main class="main">
    Main Area
    <h2>4 Column Layout with CSS Grid Layout</h2>
    <p>Gird Layout is awesome!</p>
  </main>
  <aside class="sidebar">Sidebar Area</aside>
  <footer class="footer">Footer Area</footer>
</body>

</html>

grid.cssの作成

.grid {
    display: grid;
    grid: 100px auto 100px / repeat(12, 1fr);
    grid-template-areas:
        "H H H H H H H H H H H H"
        "M M M M M M M M S S S S"
        "F F F F F F F F F F F F";
    grid-gap: 5px;
    min-height: 100vh;
    margin: 0;
}

.header {
    grid-area: H;
    background-color: #DC9191;
}

.main {
    grid-area: M;
    background-color: #DCC491;
}

.sidebar {
    grid-area: S;
    background-color: #74B074;
}

.footer {
    grid-area: F;
    background-color: #677394;
}

動作確認

それでは、見てみましょう。普通にブラウザで開いても良いのですが、変更するたびにブラウザをリフレッシュするのはアナログ過ぎるので、live-serverで起動しましょう。これを使うと、HTMLやCSSを変更した時にブラウザが自動的にリフレッシュされて表示されます。

$ npm install -g live-server
$ live-server

「http://localhost:8080」を開くと

Css grid 4column result

4カラムのレイアウトが表示されました。

これをChromeのデベロッパーツールで見てみると

Css grid 4column inside

Grid Layoutにより縦3分割、横12分割されていることが分かります。まさに一瞬でレイアウトができましたね。

最後に

いかがでしたか?今回は触り程度の内容でしたが、CSS Grid Layoutは今後主流となるデザイン方法ですので、できるだけ早く学んでおくと良いでしょう。では。

カテゴリ : 技術 Tips & Tutorials タグ : css, grid-layout

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
  • バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!
    バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes