close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー

脱入門!わかりやすさ、パフォーマンスにこだわった CSS の書き方 研修コースに参加してみた


2020-10-29 更新

今回参加したコースは 脱入門 わかりやすい、パフォーマンスを落とさない CSS の書き方 です。

Web サイトは、主に HTML でコンテンツを書き、 CSS でスタイルを指定して作ります。

CSS そのものは Web ブラウザで手軽に始められるため敷居は低いのですが、入門レベルを脱しようとすると、どんな順番でレイアウトが決まって表示されるのか、どうすると !important 地獄にならないのか、どう名前や構造をつくるとわかりやすいのか、書き方や設計を知る必要がでてきます。

このコースでは、そもそも Web のパフォーマンスとはなにか、その中でパフォーマンスを落とさない書き方、また、チームでメンテンスするときに、どうルールを作るとわかりやすいのか、 CSS の設計手法のこれまでとこれからを学びました。

では、コースの内容をレポートします!

コース情報

前提知識 基本的な HTML と CSS が書ける方
受講目標 パフォーマンスとメンテナンスを考慮した CSS の書き方や設計がわかる

講師紹介

このコースで登壇されたのは 米山 学さん です。

米山 学
米山 学
Java はもちろん Python / PHP などスクリプト言語、 Vue / React など JS だってなんだってテックが大好き。原点をおさえた実践演習で人気

HTML などのコースでは過去に、「 モダンコーディング(HTML5 / CSS3)入門と WebSocket など新技術」に登壇されています。

余談ですが、↑ のコースで紹介いただいた HTML5 で登場した技術、 WebStorage や WebSocket が最近、役に立ちました。研修に参加してよかったです(役得)。

パフォーマンスを気にした書き方

このコースは、脱初級を狙い、主にパフォーマンスと、わかりやすさ( CSS の設計手法)の、 2 つをテーマにしています。まずは、 CSS のパフォーマンスから始まりました。

Web におけるパフォーマンスとは

まずは Web の世界では切っても切れないパフォーマンスの基礎知識から。

  • パフォーマンスで問題になること
  • ユーザの離脱
    • 特に初回ユーザはロードが遅いと 3 秒で 6 割が離脱(昔は 8 秒)
    • 0.8 秒パフォーマンス良くすると、 1 割コンバージョンが上がる(!!)
  • SEO にも影響
    • 2018 年に Google が検索ランキングの指標としてサイト・スピードを加えた

では、そのパフォーマンスの良し悪しはどのように判断されるのでしょうか。

  • パフォーマンスの指標
    • W3C が定めている
      • Perceived load speed: ページがどれぐらいのスピードでロードされるか
      • Load responsiveness: JS などのコンポーネントがどれだけスムーズに動くか
      • Runtime responsiveness: そのコンポーネントがどれぐらいの時間で動かせるようになるか
      • Visual stability: ユーザの意図に反した動きになっているか。ユーザの行動を邪魔していないか
      • Smoothness: 動きのあるアニメが滑らかに動いているかどうか
    • メトリクス
      • FirstCP: 一部が表示されるまで
      • LastCP: 最大のテキストや画像ブロックが表示されるまで
      • TTI: コンポーネントが動くまでの時間
      • FID: インタラクティブな操作に対して応答している時間
      • TBT: FCP + TTI
    • 計測ツール
      • Lighthouse
        • Google 製。Chrome の拡張ツールだけでなく、 Chrome の DevTools にもある
      • W3C による計測用の API ( JS 製) がある
  • Chrome DevTools

Web のレンダリングの流れ

パフォーマンスについてわかったところで、そもそも web ページの表示の流れ(レンダリング)について見てみます。

クリティカルレンダリングパス

  • HTML / CSS / JS / 画像などが最終的に表示されるまでの流れ
  • 間違えやすいが レンダリング Rendering とペインティング Painting にわかれる
    • Rendering が準備
    • Painting が描画

流れ

  1. loading
    • ダウンロードして解析
    • HTML は DOM ツリーに、 CSS は CSSOM( CSS Object Model )に
  2. scripting ( JS の実行が終わる)
    • ここが終わらないとレンダリングに入らない
    • 並列処理やバックグラウンド処理をしよう
  3. レンダリング
    • レンダリングツリーを構築
    • 詳しいことはのちほど
    • CSS のオブジェクトモデル( CSSOM )はキャッシュされてない
    • CSSOM 構築が終わらないと、レンダリングは始まらない
      • レンダリングをブロックするものと、しないものをわける
      • 絶対に必要な軽量 CSS 、遅れても構わない巨大 CSS にわける
    1. レンダリングツリーの構築
      • ルールセット ex.
        h1 {
          font-size: 2em;
        }
        • セレクタ(場所: h1)とプロパティ(振る舞い: font-size)
      • ルールセットは右から左に解析・マッチングされる
      • クラスでレンダリングできるようになるほうがよい
    2. レイアウト
      • 大きさや場所の計算をする
      • ボックスモデル( margin や border, padding )の計算が終わったらレンダリング
      • DOM 要素の座標が変わったときに再レンダリング
        • eg. ウインドウサイズがかわる
        • DOM ツリーの変化
          • ボタンのクリック、フォームの入力など
      • 再計算させない工夫が必要
        • 再計算しても再レンダリングしない条件がある
        • 再計算しても、発生する場所を限定するとできる

この中でも気をつけたいところが、

ルールセットは右から左に解析・マッチングされる

です。以下のサンプルで考えてみます。

article > div.logo {
  /* style */
}
    ルールセットの解析・マッチングの流れ

  1. 一番右の logo
  2. div かどうか
  3. article の直下かどうか

つまり article p { /* style */ } としてしまうと、 p のたびにマッチングしにいってしまいます。。

ついつい場所だけを気にして、、うっかりやらかしがちです。もちろん私はやらかしています。

CSS パフォーマンスチューニング

では、 CSS のパフォーマンスチューニング手法にはどのようなものがあるのでしょうか。

なお、最近ではハードウェアやネットワークの性能向上、 Web ブラウザが高性能され、セレクタの最適化などでパフォーマンスが落ちることは少なくなっています。

    CSS のファイルサイズの削減

  • Minify する
  • 未使用/重複のルールセットの削除
  • ショートハンドプロパティ( background-color より background )
  • いろいろあるが Minify が一番効く
  • Minify ツールなどは 10 Best Tools for Formatting and Optimizing CSS Files – Geekflare によくまとまっている
    • CSS Lint はいい感じに効く
  • セレクタの最適化

  • DOM 要素 (div h1 のようなタグの数) × ルールセットでマッチング( = 計算)が行われる
  • ネストを深くしすぎない
  • BEM を活用しよう
  • マッチングの速さ
    • id (#hoge)
    • class (.hoge)
    • tag div
    • Adjacent sibling (h2 + p)
    • Child (li > ul)
    • Descendant (ul li)
    • Universal (*)
    • Attribute ([type=”text”])
    • 擬似クラス :hover
  • とにかくコンビネータを使わない
/* NG */
/* td は table 要素の下なので、tbody など書く必要がない */
table > tbody > tr > td {
    /* style */
}

/* Good */
td {
    /* style */
}
    パフォーマンス劣化のあるプロパティを使わない

  • border-radius
  • box-shadow
  • transform
  • filter
  • :nth-child

私は、角丸大好き! shadow こだわりたい派です!だったのですが、辞めねば。。

    スタイルシートの読み込み

  • インライン
    • 外部リソースの読み込みがないので速い
    • ブラウザのキャッシュが効かない
  • 外部リソース化
    • link タグ以降は DOM 構築に影響しない
    • レンダリングがブロックされる
  • JS による CSS injection (非同期化)
    • レンダリングをブロックしない
    • スタイルがあたってないものが表示される可能性がある
  • media タグを使って非同期にする
    • <link href="css/style.css?d=5000" rel="stylesheet" media="print" onload="this.media='all'">
      • onload を入れて、 print から all に変えている
      • 外部リソースが多い場合、逆に遅くなる可能性がある
      • rel="preload" にすると非同期にできる
        • Firefox などがサポートできてない

速さは最高の UX の土台とも称された dev.to<link> を使わず、 head 内にインラインでスタイルを書いています。

とはいえ、いずれの手法にしても、ボトルネックを確かめて問題を切り分けてからチューニングしましょう。有名な「推測するな計測せよ」ですね。

  • Scripting に時間がかかっているようなら CSS チューニングの影響は少ない
  • Rendering に時間がかかっているなら効果がある可能性が高い
PR

SE カレッジならこのコースを含め、

年間 700 コースを
1 社 / 1 部門 / 1 チーム 単位
月額 28,000 円~で
受講し放題!!

詳しくはこちら

わかりやすいセレクタの書き方やルール( CSS 設計手法)

CSS を書くとき、一度は必ず悩む「どのようにセレクタを書くと、わかりやすいのか」です。カードっぽいから card ? テーブルを覆うタグだから table-container ?

この書き方には、過去から色々な構造化、設計手法が提案されています。

CSS 設計が必要な理由

  • 名前空間がない(= グローバルに適用されてしまう)
    • 予期しないスタイルがあたってしまう
    • あたるべきスタイルが効いてない

もう、ホント、ページや場所ごとに閉じて欲しい。。です

CSS 設計の原則

  • 予測しやすい(名前でわかりやすい)
  • 再利用しやすい
  • 拡張しやすい

このあたりはプログラミングにおける変数名、関数名などにも通ずるお話ですね。ネーミングセンスつけたい(いい名前をマネするぞ)。

CSS 設計手法

歴史的には 3 つあります。

  • OOCSS
  • SMACSS
  • BEM

それぞれどのような設計手法が見ていきましょう。

  • OOCSS
    • オブジェクト指向を使う
    • 多くのCSS設計の基礎になっている
    • 拡張しやすいが、変更による影響範囲が大きい
  • OOCSS のやり方
    • 構造と見た目を分離
  • 適用前
<!DOCTYPE html>
<html>
  <head>
    <style>
      #main .btn-general {
        display: inline-block;
        width: 300px;
        max-width: 100%;
        padding: 20px 10px;
        background-color: darkslateblue;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        color: whitesmoke;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
      }

      #main .btn-warning {
        display: inline-block;
        width: 300px;
        max-width: 100%;
        padding: 20px 10px;
        background-color: red;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        color: yellow;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
      }
    </style>
  </head>
  <main id="main">
    <button class="btn-general">General Button</button>
    <button class="btn-warning">Cancel Button</button>
  </main>
</html>
  • 適用後
<!DOCTYPE html>
<html>
  <head>
    <style>
    /* Structure */
    #main .btn {
      display: inline-block;
      width: 300px;
      max-width: 100%;
      padding: 20px 10px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
      font-size: 18px;
      line-height: 1.5;
      text-align: center;
    }

    /* Skin */
    #main .general {
      background-color: darkslateblue;
      color: whitesmoke;
    }

    #main .warning {
      background-color: red;
      color: yellow;
    }
  </style>
  </head>

  <main id="main">
    <button class="btn general">General Button</button>
    <button class="btn warning">Cancel Button</button>
  </main>
</html>
  • ボタンという構造を変えずに、 Skin を追加しやすい
  • main を外すともっとよい
  • コンテンツとコンテナを分離
    • 特定のエリアだけに留まらない

はい、、、わたしは最近、いちいち書くのがアレだったので、特定ページのボタン要素に background で色を入れました。。

SMACSS

これはだいぶ古いやり方とのこと。。

    段階的にスタイルを適用

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

これにより影響範囲がわかりやすいとのことで、確かに見通しが良くなりそうですね。

  • Base
    • html body form など
  • Layout
    • header main footer section など
    • ページ内で 1 つしか使用されない
    • 今はもう Base に入れてもよいだろう
  • Module
    • Layout 内に配置されるサブ・モジュール
    • ボタンやカード、ナビゲーション、カルーセルなど
  • State
    • 特定の状態になったときのスタイル
      • アクティブなど
    • 接頭詞には is- を入れると良い
      • is-error
  • Thema
    • ページごとにスタイルを変えたい場合

BEM

この BEM が現在、多くの企業、 CSS フレームワークで使われているとのことでした。

  • Block / Element / Modifier の 3 つで命名規則を分ける
  • Block
    • パーツ・モジュール
    • 何を表しているかでクラスの名前を決める
      • NG: red-text
      • Good: error
  • Element
    • ブロックの中の要素
    • e.g. menu__item
      • メニューの中の項目
      • ネストはオススメしない
        • NG: menu__item__link
        • good: menu__link
  • Modifier
    • 見た目や振る舞い、状態を表す
    • ブロック要素を継承して _ でつなげる
    • 単独で使用せず、ブロックと一緒に使う
      • NG: button_small
      • Good: button button-small
    • 単語の組み合わせのときに - を使う
      • button_small color-thema_caution
    • 名前から意図しない振る舞いを入れず、責任範囲を保つ
      • .button_bg-color_red {
        width: 200px; /* 名前から width が入っていると思わない */
        }
  • デメリット: 記述量が増える。。。

最後の BEM はやっぱりわかりやすく、確かに定義することがお多そうですが、マネしやすそうです!

Lint を使おう

あとは脱入門ということで、チームでのコーディングも意識して、 Lint ツールを紹介いただきました。

  • 問題箇所やルールから外れるときにアラートなどを出してくれる
  • Linter を使うといいよ
    • stylelint というツールがいいよ

欲張りですが、 CSS フレームワークごとに Lint ツールがあるといいなぁ(願うのは自由)。

もっとも最新の CSS in JS に触れる

ちょっとお腹いっぱい気味だったのですが、よくインターネットで見かけるやつが出てきたので、もうちょっと頑張ります。

  • JS で CSS を記述する( どゆこと? )
  • 名前空間を閉じることができる ( !! )
  • styled-compornents が代表的なライブラリ
    • HTML と 振る舞い ( JS ) にスタイルを入れたコンポーネント集
  • 書き方
    function tag(array, arg) {
        return "tag():" + array[0] + arg
    }
    const val = 100;
    console.log(tag`abc${val}`);

今回は React でやってみます。

米山さんに用意いただいたサンプルコードを見てみます。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-is@16.13.1/umd/react-is.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
  </head>

  <body>
    <div id="myapp" />
    <script type="text/babel">

      const Title = styled.h1`
            font-size: 1.5em;
            text-align: center;
            color: palevioletred;
        `;

      const Wrapper = styled.section`
            padding: 4em;
            background: papayawhip;
        `;

      ReactDOM.render(
        <Wrapper>
          <Title>
            Hello React!
          </Title>
        </Wrapper>,
        document.getElementById('myapp')
      );
    </script>
  </body>
</html>

body 内のコンテンツは JSX という記法で書かれていますが、なんとなく雰囲気がわかりますね。

  • 実行結果

ここからコンポーネントを拡張してみます。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-is@16.13.1/umd/react-is.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
  </head>

  <body>
    <div id="myapp" />
    <script type="text/babel">

      const Title = styled.h1`
            font-size: 1.5em;
            text-align: center;
            color: palevioletred;
        `;

      const Wrapper = styled.section`
            padding: 4em;
            background: papayawhip;
        `;

      const Button = styled.button`
            background: ${
                props => props.primary ? "palevioletred" : "white"
            };
            color: ${
                props => props.primary ? "white" : "palevioletred"
            };
            font-size: 1em;
            margin: 1em;
            padding: 0.25em 1em;
            border: 2px solid palevioletred;
            border-radius: 3px;
        `;

      ReactDOM.render(
        <Wrapper>
          <Title>
            Hello React!
          </Title>

          <Button>Normal</Button>
          <Button primary>Primary</Button>
        </Wrapper>,
        document.getElementById('myapp')
      );
    </script>
  </body>
</html>
  • 実行結果

このレベルなら React も行けるかと思えます。 が、ステート管理が、 Redux が、とか出てくると、、、

と、この最新の CSS に触れたところで、このコースは修了しました。

まとめ

このコースでは、 CSS について脱入門できるよう、 Web ブラウザの仕組みとパフォーマンスやわかりやすさと設計手法を学べました。

CSS はググればなんとか書けてしまう面がありますが、パフォーマンスを考慮した良い書き方や、チームで開発したり、スクラッチで定義したりするようになるには、断片的にググった知識だけでなく、体系的に学ぶ必要があると感じました。

Web コーディングで入門レベルからステップアップしたい方や、本職ではないもののフロントもある程度コーディングできる方には、とてもオススメです!

 


SEカレッジについて

午前免除 FAQ

タグ一覧