CSSだけで複雑な背景画像を作ってみる
CSS3で追加された線形グラデーション linear-gradient
と円形グラデーション radial-gradient
を使用すれば、さまざまなパターンを表現することが可能です。
これに background-size
プロパティを組み合わせれば、CSSだけで背景画像を作成することができます。
CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。
今回は下記の背景画像を作成してみます。
- pattern1
- pattern2
まずはそれぞれの仕様についてです
linear-gradient
書式
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);
角度 (省略可能)
角度は deg
を単位として指定します。 0deg
を指定すると下から上への方向となります。正の数値は時計回りの回転を示します。
デフォルトは 180deg
で、上から下への方向となります。
方向 (省略可能)
角度のかわりに方向をキーワードで指定できます。
キーワードとしては、 left, right, top, bottom
の4つになります。
斜めの方向を示すには、 left top
right bottom
などと指定します。
最新仕様では必ず to
をつけて記述します。
開始色 位置 / 終了色 位置
カラーコードやカラーネームで色を指定します。
開始色の位置を示す 0%
、終了色の位置を示す 100%
は省略可能です。
開始色に位置を指定した場合は、その位置までは開始色がそのまま描画されます。 終了色に位置を指定した場合は、その位置からは終了色がそのまま描画されます。
経過色 / 位置 (複数指定可能)
開始色と終了色の間に経過色を入れる場合は、開始点からの距離を示す位置とともに指定します。
経過色の位置は単位を %
や px
で指定しますが省略可能です。省略したときは両隣の色の中間に配置されます。
radial-gradient
書式
radial-gradient(形状 サイズ at <ポジション>, 色 位置 [, 色 位置]+ );
形状 (省略可能)
円を示す circle
か、楕円を示す ellipse
のいずれかを指定できます。
デフォルトは ellipse
です。
ポジション (省略可能)
グラデーションを開始するポイントです。
pxや%での数値指定と、キーワード指定ができます。
キーワードは、left, right, top, bottom, center
があります。
デフォルトは 'center' です。
サイズ (省略可能)
px
や %
での数値指定と、キーワード指定ができます。
キーワードは以下の4つがあります。
キーワード | 説明 |
---|---|
closest-side | 中心から最も近い辺に接するように外円が描かれます。 |
farthest-side | 中心から最も遠い辺に接するように外円が描かれます。 |
closest-corner | 中心から最も近い角の点を通るように外円が描かれます。 |
farthest-corner | 中心から最も遠い角の点を通るように外円が描かれます。 |
デフォルトは farthest-corner
です。
色 / 位置 (複数指定可能)
色はカラーコードやカラーネームで2色以上指定します。 位置はpxや%で数値指定します。
今回はこの linear-gradient
と radial-gradient
を使用して背景画像を作成していきます。
それでは pattern 1 を作成します
コード
.pattern1 { background-color: #3cc; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); background-position: 0 0, 40px 40px; background-size: 80px 80px; }
radial-gradient
の一行目の方では40%の大きさの円をrgba(255, 255, 255, 0.1)
色で表示し、40%以降は透明( ''' transparent ''' )になっています。そのため、円の周りは背景色である#3ccが表示されます。
2行目は1行目と同様に20%の円を作成しています。
background-position
では 0, 0
が radial-gradient
の1行目で作成した40%の円の位置を決めており、40px, 40px
で2行目の円の位置を決めています。
続いて pattern 2 を作成します
repeating-linear-gradient
上で紹介した radial-gradient
を使用してもストライプを作成できるのですが、 repeating-linear-gradient
を使うと簡単にストライプを作成できます。
repeating-linear-gradient(ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …])
第1引数にストライプの角度を指定し、その後はストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。
コード
.pattern2 { background-color: #e9d4b9; background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); }
repeating-linear-gradient
で色を複数指定することで複雑なストライプ柄も簡単に実装することができます。
サイト作成しました
色々なパターンを作成しまとめたサイトを作成しました。 よかったら見てみてください。
Elastic | A collection of background image created by CSS only
react で 「Warning: It looks like you're using a minified copy .....」のwarningを消す方法
warning内容
以下のwarningの消し方に結構詰まったので共有。
Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.
webpack
か browserify
を使っている場合だと、公式サイトに対応方法が書いてあるが、
grunt
を使っていて、対処法が載っていなく困った。
その公式サイトはここ
要するにproduction
用のbuildをしろと言うことなので、
いろいろ調べた結果、grunt-env
というプラグインをいれて設定すれば解決できた。
手順
1, grunt-env
のインストール
npm install --save-dev grunt-env
2, gruntfile.js
でタスクを読み込む
grunt.loadNpmTasks('grunt-env');
3, gruntfile.js
に記述を追加
grunt.initConfig({ ... env: { production: { NODE_ENV: 'production' } }, ... });
4, gruntfile.js
でタスクを登録する
grunt.registerTask('default', ['env:production', 'browserify']);
browserifyのタスクの前に実行する必要がある。
これでgruntを動かし直したら production
用のビルドになり、warning
が消えました。
webpack で react, scss のコンパイルと ESLint を設定する方法
webpackとは
webpackは依存関係のあるJSやCSSなどを、まとめてくれるビルドツールです。
webpackにはLoaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定することができ、 そのLoaderを使うことで、scssやJSXなどで書かれたファイルを変換することができます。
ここでは、react (jsx) , scss のコンパイルと、javascriptの構文をチェックしてくれるツールの ESLint をwebpackで行えるように設定します。
構成
今回は、以下のようなディレクトリ構成を想定し、
src の中の react と scss ファイルをdestディレクトリ内に配置することを考えます。
src ├─ react └─ scss dest ├─ js └─ css package.json node_modules webpack.config.js
gitを使用する場合は、node_modules
をバージョン管理の対象外にしたいため、
src や dest と同じ階層に.gitignore
を作成し、下記を記載します。
// .gitignore
node_modules/
webpackのインストール
package.jsonの作成
まずはprojectのpackageを管理するためのファイルである、
package.json を作成するために以下のコマンドを実行します。
$ npm init -y
-y
オプションは聞かれる質問に全て yes でファイルを作成するというものです。
今回は全てyesで問題ないため、このオプションを実行します。
webpackのインストール
次に今回ビルドツールとして使用する webpack をインストールします。
$ npm install -D webpack
-D
オプションは開発時にのみ必要なライブラリをインストールしつつ、
packpage.json に依存関係を記述してくれるオプションです。
scssのコンパイル設定
続いて scss のコンパイルのための設定を行います。
パッケージのインストール
$ npm install -D style-loader css-loader sass-loader node-sass extract-text-webpack-plugin
scssのコンパイルをcssファイルとして出力する場合には extract-text-webpack-plugin
というプラグインが必要になります。
webpack.config.js でビルド設定を書く
まずはwebpackの内容を記述するファイル webpack.config.js
を作成し、
タスクを書いていきます。
// webpack.config.js const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { common: './src/scss/common.scss' // コンパイル対象ファイルのpath }, output: { path: './dest/css/', // コンパイル後に出力するpath filename: '[name].css' // [name] には entry の key の値が入る(今回では common ) }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize!sass-loader") } ] }, plugins: [ new ExtractTextPlugin('[name].css') ] }
"css-loader?minimize!sass-loader"
の ?minimize
を外すと
ビルド結果がminifyされてない形で生成されます。
コンパイル実行
これで src/scss/common.scss
を作成し、
$ ./node_modules/.bin/webpack -w
を実行すれば dest/css/common.css
にビルド結果が生成されます。
reactのコンパイル設定
続いて react (JSX) のコンパイルの設定を行います。
babelのインストール
babelを使ってjsxファイルをトランスパイルします。
$ npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react
「babel-xxxxxx」というプラグインが多いですが、
babel-preset-xxxxx は、es2015 や JSX を変換するためのプリセットが babel 本体と分離しているので、個別にインストールする必要があります。
reactのインストール
実際に react をインストールします。
$ npm install -S react react-dom
-S
オプションは、アプリケーションに必要なライブラリを、 packpage.json
に追加しつつインストールをします。
webpack.config.js でビルド設定を書く
上で書いた webpack.config.js
に reac tのビルドタスクを追加していきます。
// webpack.config.js const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ // ここから react のコンパイルタスク entry: { app: './src/react/index.jsx', }, output: { path: './dest/js/', filename: '[name].js' }, module: { loaders: [ { // babelの対象ファイルの指定 test: /\.(js|jsx)$/, loader: 'babel', exclude: /node_modules/, // node_modules配下のファイルは対象外にする query: { presets: ["es2015", "react"], } }, ] }, },{ // ここから scss のコンパイルタスク entry: { common: './src/scss/common.scss' }, output: { path: './dest/css/', filename: '[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize!sass-loader") } ] }, plugins: [ new ExtractTextPlugin('[name].css') ] }]
コンパイル実行
これで src/react/index.jsx
を作成し、
$ ./node_modules/.bin/webpack -w
を実行すれば dest/js/
に js のビルド結果が、
dest/css/
に css のビルド結果が生成されます。
ESLintを導入する
ESLintの設定方法についてはこちらに書いてあるので、参考にしてください。
ここでは、ESLintの設定は完了していることを前提とし、
webpackでのビルド時にESLintを実行させる設定を行います。
ライブラリのインストール
まずはwebpackでESLintを使用するためのnpmのライブラリをインストールします
$ npm install -D eslint-loader
webpack.config.jsに記述
ESLintの組み込みもこれまでと同様に webppack.config.js
内に書いていきます。
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ entry: { app: './assets/javascripts/app.jsx', }, output: { path: '../app/assets/javascripts/', filename: '[name].js', }, // eslint の設定ファイルの読み込み eslint: { configFile: './.eslintrc.json', }, module: { loaders: [ { test: /\.(js|jsx)$/, loader: 'babel', exclude: /node_modules/, query: { presets: ["es2015", "react"], } }, // esLintの対象ファイルの指定 { test: /\.(js|jsx)$/, loader: 'eslint', exclude: /node_modules/, // node_modules配下のファイルは対象外にする } ] }, },{ .....
実行
実行コマンドはこれまでと同様、以下になります。
$ ./node_modules/.bin/webpack -w
Lintに引っかかった場合にはerrorログが表示されます。
サンプル
今回のサンプルはこちらにあります。参考にしてください。
GitHub - sottar/react_scss_compile_on_webpack_sample
ReactでESLintを使う
ESLintの導入
まずはnpmからESLintをインストール
$ npm install --save-dev eslint eslint-plugin-react
設定ファイルの生成
ESLint の魅力は、ルールを自由に設定出来ることです。
設定ファイルの生成は --init を使って設定ファイルを作成すると簡単です。
$ eslint --init
上のコマンドを実行すると対話形式で設定ファイルを作成できます。
$ ❯ Answer questions about your style $ Use a popular style guide $ Inspect your JavaScript file(s)
- Answer questions about your style
AirBnBやGoogleのJavaScriptのスタイルガイドを使用できます。 - Use a popular style guide
対話形式でルールを作成していきます。
今回は Answer questions about your style
を選択します。
すると以下の質問に1つずつ答えていくことになります
$ ? Are you using ECMAScript 6 features? Yes $ ? Are you using ES6 modules? Yes $ ? Where will your code run? Browser $ ? Do you use CommonJS? No $ ? Do you use JSX? Yes $ ? Do you use React Yes $ ? What style of indentation do you use? Spaces $ ? What quotes do you use for strings? Single $ ? What line endings do you use? Unix $ ? Do you require semicolons? Yes $ ? What format do you want your config file to be in? JSON
質問の後ろに書いてあるのが今回の私の入力です。
インデントやセミコロンなどの設定はお好みに応じて変更してください。
入力が完了すると、.eslintrc.json
が以下のように生成されます
{ "env": { "browser": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }
設定ファイルの修正
react/jsx-uses-vars
を追加
ESLintは標準パッケージで jsx をサポートしてるのですが、
React の独自表記の部分はサポート外となっているため、
pluginを使用する必要があります。
"rules": { "react/jsx-uses-vars": 1, // ← 追加 "indent": [ "error", 2 ], "linebreak-style": [ "error", ......
ESLintの対象外のファイルを設定する
.eslintignore
というファイルを作成することでESLintの対象外のファイルを指定できます。
node_modules
ディレクトリ以下のファイルは対象外にしたいので設定します。
.eslintignore
というファイルを作成し、以下を記述
node_modules/
ここまでの設定で使っても問題はないのですが、使いやすいように少し手を加えます。
必要に応じて変更してください。
インデントをスペース2つにする
デフォルトだとインデントがスペース4つになっているので、2つに変更します。
"rules": { "indent": [ "error", 4 ], .....
上を下に変更
"rules": { "indent": [ "error", 2 ], .....
jQqueryを使用する
Ajaxなどで jQuery を使用したい場合、 最初の設定ファイルだとjQueryの使用が許可されていないため、それを許可します。
"env": { "browser": true, "es6": true },
上を下に変更
"env": { "browser": true, "es6": true, "jquery": true },
最終的な形
最終的には .eslintrc.json
ファイルは以下になります。
{ "env": { "browser": true, "es6": true, "jquery": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "react/jsx-uses-vars": 1, "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }
実行方法
$ node_modules/.bin/eslint hoge.jsx
gulpやgrunt, webpack のビルド時に実行させることもできます。
実際にはこう言ったビルドツールと合わせて使うと思いますが、
記事が長くなってしまうのでまた別の記事に書きます。