目次
はじめに
第1章 開発環境を作る
第2章 さっそく作ってみる
第3章 CSS図形の基本スキルを獲得する
第4章 全力で挑むボス戦
あとがき
はじめに
ようこそ。CSS図形の世界へ！！
ここ10年間における「Web関連技術」の進歩は目覚ましく、とどまるところを知りません。そして「CSS」も、CSS3になって、本来「デザイナーに画像を作ってもらう」ことでしか対応できなかった表現が、どんどんCSSだけで実現できるようになってきています。また、JavaScriptでしかできなかった「動き」に関することも、CSSアニメーションで実現可能となり、CSSの能力は拡大し続けています。
「平成時代」が終わり「令和時代」になる、これからのフロントエンドにおいて、CSSアニメーションが盛り上がる兆しを感じています。そして、CSSアニメーションをいくつか作るにあたって、次第に痛感してくることがあります。それは、「CSSだけでどれだけの図形が表現できるのか？」ということです。もしCSSだけで図形が表現できない場合は、デザイナーさんに新たに画像を作ってもらう必要があります。「なるべくなら、CSSだけで済ませたい」その限界に挑戦するのが「CSS図形」のはじまりです。ということで、この本は、CSSで様々な図形を作っていきます。
この本は、「CSS図形に取り組む人口を増やしたい」という思いがありまして、入門編という位置づけになっています。そのため、画面キャプチャやソースコードが盛り盛りの構成で書かれています。ぜひぜひ、CSS図形の世界を楽しんでいってください。
想定する読者
本書では、次のような読者を想定しています。
想定する読者
・HTMLとCSSとJavaScriptは分かるけど、お仕事でやった範囲でしか触っていない方
・JavaScriptよりもCSSに興味がある方
・もっとフロントエンドの深みを知りたい方
・CSSアニメーションに興味があるので、まずは動かないCSS図形から勉強したい方動作環境について
なるべく新しい環境を想定しています。
・OS
─Windows環境「Windows10」
─Mac環境「macOS Sierra」または「OS X Mavericks」
・Webブラウザー
─Google Chrome v.73 以降
リポジトリーとサポートについて
本書に掲載されたコードと正誤表などの情報は、次のURLで公開しています。
・https://0css.github.io/index.html
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
底本について
本書籍は、技術系同人誌即売会「技術書典6」で頒布されたものを底本としています。
第1章 開発環境を作る
1.1 ブラウザーを開発環境にする(Windows)
CSS図形をはじめるにあたって、特別な開発環境は必要ありません。身近なブラウザーを開発環境にします。※Mac環境での解説もあります
STEP1 Microsoft Edgeを起動する
PCに標準でインストールされている、Webブラウザーを開きます。①デスクトップの左下にある「スタートボタン」(田のマーク) をクリックして、②「Microsoft Edge」をクリックします。
STEP2 Google Chromeのダウンロードページを表示する
ブラウザーで、Google Chromeのダウンロードページにアクセスします。①URLとして「https://www.google.co.jp/chrome/」を入力し、「Enter」キーを押します。②「Chrome をダウンロード」をクリックします。
STEP3 利用規約に同意してインストール
利用規約が表示されます。内容をよく読んでから、①「同意してインストール」をクリックします。
STEP4 ダウンロードしたインストーラーを実行
Chromeのインストーラーがダウンロードされます。ダウンロードが終わったら、①「実行」をクリックします。
ユーザーアカウント制御が表示される場合は、②「はい」をクリックします。
インストールが開始されます。このまましばらく待ちます。
STEP5 インストール完了
インストールが完了すると、自動的にChromeが起動します。
ちなみに、今回はインストーラーがChromeを自動起動してくれましたが、次回はどこから起動するのでしょうか？
それは、①デスクトップの左下にある「スタートボタン」(田のマーク) をクリックして、② 「Google Chrome」をクリックして起動します。
これで、Windows環境での「Google Chrome」のインストールは完了です。お疲れ様でした。
1.2 ブラウザーを開発環境にする(Mac)
MacでGoogle Chromeをインストールします。インストール後の片付けも行います。
STEP1 Safariを起動する
PCに標準でインストールされている、Webブラウザーを開きます。画面下のDockにある、①「Safari」のアイコンをクリックします。
STEP2 Google Chromeのダウンロードページを表示する
ブラウザーで、Google Chromeのダウンロードページにアクセスします。①URLとして「https://www.google.co.jp/chrome/」を入力し、「Enter」キーを押します。②「Chrome をダウンロード」をクリックします。
STEP3 利用規約に同意してインストール
利用規約が表示されます。内容をよく読んでから、①「同意してインストール」をクリックします。
STEP4 ダウンロードしたインストーラーを実行する
Chromeのインストーラーがダウンロードされます。ダウンロードが終わったら、①ブラウザー右上にある (↓) マークをクリックし、ダウンロードファイル一覧を表示します。ダウンロードファイル一覧の中から②「googlechrome.dmg」をクリックします。
dmgファイルが実行されて、インストーラーが開きます。
STEP5 Google Chrome.appをアプリケーションにドラッグ&ドロップする
インストーラーが開いたら、①「Google Chrome.app」を ②「アプリケーション」にドラッグ&ドロップします。
※アプリケーションの上に「.keystone_install」が重なっていて、ドロップの邪魔です。あらかじめ、マウスで横にどかしておくとスムーズです
「Google Chrome.app」が、アプリケーションにコピーされます。
コピーが終わったら、③インストーラーのウィンドウを閉じます。
STEP6 インストーラーを取り出して終了させる
①デスクトップ上に残ったインストーラーを右クリックして、②「“Google Chrome”を取り出す」をクリックします。
STEP7 Google Chromeを起動する
①画面下部のDockから、アプリケーションをクリックします。②アプリケーションの中から、「Google Chrome.app」をクリックします。
初回起動なので、セキュリティー確認のウィンドウが表示されます。①「開く」をクリックします。
初期設定の確認ウィンドウが表示されます。①ここではふたつともチェックを外して、②「Google Chrome を起動」をクリックします。
Google Chrome が起動します。
これで、Mac環境での「Google Chrome」のインストールは完了です。お疲れ様でした。
1.3 Web Maker を追加する(Windows/Mac共通)
Chromeに便利な機能を追加します。※これ以降はWindowsとMac共通の説明です
STEP1 ウェブストアでWeb Makerを検索する
①Chromeを起動させ、ウェブストア「https://chrome.google.com/webstore/category/extensions?hl=ja」にアクセスします。②左上の検索Boxに「Web Maker」と入力して、Enterキーを押します。
STEP2 Web MakerをChromeに追加する
オレンジ色の正三角形がふたつあるロゴマークが目印です。①Web Makerの欄にある「Chrome に追加」をクリックします。
確認のメッセージが出るので、②「拡張機能を追加」をクリックします。
Web Makerが追加されると、初期ページが開きます。英語サイトと判定されるので、Chromeから翻訳するのか確認が出ます。
STEP3 このサイトの翻訳をOFFにする
特に翻訳は必要ないので、①「オプション」から ②「このサイトは翻訳しない」をクリックします。
STEP4 Welcome画面を閉じる
右上の①「CLOSE」をクリックして、Welcome面画を閉じます。
Web Makerの編集画面が表示されます。次回からWeb Makerを起動するには、②右上のツールバーから「オレンジのアイコン」をクリックします。
これで「Web Maker」のインストールは完了です。お疲れ様でした。
第2章 さっそく作ってみる
2.1 Web Makerで作る
開発環境が整いました。さっそくCSS図形を作っていきましょう。
STEP1 コードを入力する
Web Makerは「HTML」と「CSS」と「JS」の3つの入力欄を持っています。「HTML」は「骨格」を、「CSS」は「見た目」を、「JS」は「動き」を記述します。
※CSS図形では「HTML」と「CSS」のふたつを使用します
サンプルとして、次のコードを入力します。
HTML
1: <div class="sample1"></div>CSS
1: .sample1 {
2: width: 200px;
3: height: 200px;
4: border: solid 1px #000000;
5: background-color: #ff0000;
6: }右側の描画ゾーンに、赤い正方形が描画されればOKです。
STEP2 タイトルをつけて保存する
作った内容を保存します。①左上にある「Untitled X-XXX:XX」という仮の名前をクリックし、「サンプル1」と入力します。②「SAVE」をクリックします。
STEP3 まっさらな状態にする
それでは、きちんと保存されているのか確認するため、一度まっさらな状態にします。右上にある①「NEW」をクリックします。
テンプレートが表示されます。今回は、②「Start a blank creation」をクリックします。
STEP4 保存した内容を読み込む
まっさらな状態になったので、①「OPEN」をクリックします。
右からスーっとメニューが出てきます。保存しておいた ②「サンプル1」をクリックします。
おおおお！できてます！無事にデータが復元できました。
実はこのデータは、PCごとに保存されるので、「エクスポート」して「インポート」しないと、別のPCでは作業できません。このクラウド時代に、少々面倒くさい印象があります。そこで、もっと便利に使うために、CodePenを利用します。
STEP5 作ったデータをCodePenで開く
日々、情報収集に熱心な方は、もしかすると技術記事のサンプルコードとして「CodePen」を見たことがあるかもしれません。Web Makerでは、CodePenへの連携も可能です。下部にある①「Edit on CodePen」をクリックします。
これで、CodePenの編集画面に作ったデータが反映されます。せっかくですので、CodePenのアカウントを作ります。アカウントを作ることで、インターネット上にデータを保存できるようになります。
