PurgeCSS はプロジェクトで使っていない CSS を削除してくれる便利ツールです。 本来は PostCSS や Gulp などのプラグインとして使うのでしょうが、コマンドラインで都度動かすこともできます。 とりあえず使っていないCSSを削除したいときや、簡単に試してみたい時にはこんな方法でいいかもしれません。 環境 node v10.14.1 purgecss v4.0.0 デモンストレーション ディレクトリ構造 index.html style.css 下記、style.css と index.html を見ていただければわかるのですが、 index.html で使っている css は .mt-50 のみです。 style.css .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <p class="mt-50">test</p> </body> </html> デモではわかりやすく30行程度の CSS ファイルですが、 ユーティリティ系のスタイルをたくさん準備しておくと実際の作業では 数千〜数万行になることもあるのではないでしょうか。 おそらく全てのスタイルは使いません。 そこで PurgeCSS です。 インストール npm i -g purgecss 実行 purgecss --css style.css --content index.html --output style.purged.css オプションの --css は元のCSSファイル、--content は参照先のファイル、--output は書き出しファイルです。 ファイル名、ファイルパスは作業環境に合わせてください。 書き出された CSS ファイル .mt-50 { margin-top: 50px; }
PurgeCSS はプロジェクトで使っていない CSS を削除してくれる便利ツールです。
本来は PostCSS や Gulp などのプラグインとして使うのでしょうが、コマンドラインで都度動かすこともできます。
とりあえず使っていないCSSを削除したいときや、簡単に試してみたい時にはこんな方法でいいかもしれません。
index.html style.css
下記、style.css と index.html を見ていただければわかるのですが、 index.html で使っている css は .mt-50 のみです。
.mt-50
.mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <p class="mt-50">test</p> </body> </html>
デモではわかりやすく30行程度の CSS ファイルですが、 ユーティリティ系のスタイルをたくさん準備しておくと実際の作業では 数千〜数万行になることもあるのではないでしょうか。
おそらく全てのスタイルは使いません。
そこで PurgeCSS です。
npm i -g purgecss
purgecss --css style.css --content index.html --output style.purged.css
オプションの --css は元のCSSファイル、--content は参照先のファイル、--output は書き出しファイルです。 ファイル名、ファイルパスは作業環境に合わせてください。
--css
--content
--output
.mt-50 { margin-top: 50px; }
七行プログラミングとは かつて、使える文字が「7行×79文字」という制限の元でコーディングの技術を競う、七行プログラミングと呼ばれるショートコーディング技術が流行ったそうです。 その流行の中で生まれたのが、以下に紹介する七行で動くテトリスです。 七行テトリスについて 七行テトリスはネット上で何種類かの亜種が見つかりますが、主だったものを紹介します。 498バイト版 (参考：たった7行でテトリスを実装「七行プログラミング」とは) <body id=D onKeyDown=K=event.keyCode-38><script>Z=X=[B=A=12];function Y(){for(C =[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h +=K:t?B=C:0;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;if(e=!e)if(h+=A,f|B)for(Z=X,X=[l= 228],B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[ l]:(P+=k++,c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A< 2|i>228)?i%A?"■":"■<br>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,99-P)}Y(h=e =K=t=P=0)</script> 改良された487バイト版(参考：482バイトテトリス) <body id=D onKeyDown=K=event.keyCode-38><script>Z=X=[B=A=12];function Y(){for(C =[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h +=K:t?B=C:0;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[ [-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P+= k++,c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228 )?i%A?"■":"■<br>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,i-P)}Y(h=K=t=P=0) </script> これらのコードをテキストファイルに張り付け、「tetoris.html」といった適当な名前のhtmlファイルにすると、下の画像のようにCUIベースのテトリスを遊ぶことができます。 操作は矢印キーで移動、スペースキーで回転です（亜種の中にはEnterキーで回転するバージョンもあります）。 七行テトリスの短縮化 これらのコードについてですが、作成されたのはいずれも十年以上前という、古いコードになっています。 本記事はこれらのコードに対し、令和の今のJavaScriptならさらに文字数を削減できないかを試してみた内容になっています。 注意 ロジック部分はそのままです(というか筆者の頭では理解しきれませんでした) あくまでJSの記法をいじって文字数をどうにかしよう、という方針です 七行テトリスからの変更点 その1: event.keyCodeをevent.whichに キーボードから押下されたキーの取得方法である、event.keyCodeは現在Deprecatedになっており、現在のJSなら代わりにevent.keyやevent.codeを使うべきでしょう。 (参考：JavaScriptのキーボードイベント、キー判定にどれつかう？) しかし、これらevent.keyやevent.codeは押下されたキーの「文字」を取得するものであり、数値である「キーコード値」を取得するものではありません。 七行テトリスのキーコードの処理は洗練されています。event.keyならevent.keyCodeより文字数を４文字減らせますが、キーコードを扱うためには結局それ以上の文字数がかかりそうです。 ここではevent.keyCodeの代わりに、Deprecatedですが同じくキーコードが取得できる、event.whichを使います。 ### 修正前 onKeyDown=K=event.keyCode-38 ### 修正後 onKeyDown=K=event.which-38 これで２文字減らせました。 その2: アロー関数を使う 今回最も大きな変更点になります。 function()の代わりに、ES2015から導入されたアロー関数を使うことで、文字数を大きく減らせます ### 修正前 function Y(){for... ### 修正後 Y=()=>{... 当然、const Y=のように変数宣言はせず、グローバル変数として宣言することで文字数を節約します。 また、アロー関数にすることでブロックの末尾に;を加えなければ動かなくなったので追加します。 ### 修正前 ...}Y(h=K=t=P=0) ### 修正後 ...};Y(h=K=t=P=0) これで12文字→6+1文字と5文字減らせました その3: brタグをpタグに（※今回は実施せず） 現在のブラウザでは、<p>タグは別に閉じなくても正常に動作します。 そこで、コード内でブロックを描画している箇所で、<br>タグのかわりに<p>タグを使うことにより、文字数を1文字減らせます。 ### 修正前 "■<br>" ### 修正後 "■<p>" しかしこれをやってしまうと、テトリスとして動作はするものの、画面全体が大きく縦に間延びしてしまうため、今回は見送りました 結果（479バイト） 上記2点の改良を加えたテトリスが以下の通り。6行に収めることができました。 文字数は476（全角文字を含む）、バイト数は479バイトとなります。 <body id=D onKeyDown=K=event.which-38><script>Z=X=[B=A=12];Y=()=>{for(C=[q=c=i=4]; f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h+=K:t?B=C:0 ;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[[-7,-20,6,h =17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P+=k++,c=l+=A); --c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?i%A?"■": "■<p>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,i-P)};Y(h=K=t=P=0)</script> その他修正箇所 ロジック部分を除けば、他にはonKeyDown,innerHTML,setTimeout,<script>~</script>などの文言が目につきますが、これ以上JSの記法を書き換えてコードを短縮化することは難しいのではないかと思います。 setTimeoutの代わりにrequestAnimationFrameが使えるかもしれませんが、文字数が増えるだけです <script>タグはもちろん必要ですし、閉じタグ</script>は無ければ動作しません そのため、これ以上短縮化するにはロジック部分の改良が必要になるかと思います。が、それは他の方に譲りたいと思います。 参考文献 参考：たった7行でテトリスを実装「七行プログラミング」とは 参考：482バイトテトリス 参考：JavaScriptのキーボードイベント、キー判定にどれつかう？
かつて、使える文字が「7行×79文字」という制限の元でコーディングの技術を競う、七行プログラミングと呼ばれるショートコーディング技術が流行ったそうです。
その流行の中で生まれたのが、以下に紹介する七行で動くテトリスです。
七行テトリスはネット上で何種類かの亜種が見つかりますが、主だったものを紹介します。
<body id=D onKeyDown=K=event.keyCode-38><script>Z=X=[B=A=12];function Y(){for(C =[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h +=K:t?B=C:0;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;if(e=!e)if(h+=A,f|B)for(Z=X,X=[l= 228],B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[ l]:(P+=k++,c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A< 2|i>228)?i%A?"■":"■<br>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,99-P)}Y(h=e =K=t=P=0)</script>
<body id=D onKeyDown=K=event.keyCode-38><script>Z=X=[B=A=12];function Y(){for(C =[q=c=i=4];f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h +=K:t?B=C:0;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[ [-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P+= k++,c=l+=A);--c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228 )?i%A?"■":"■<br>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,i-P)}Y(h=K=t=P=0) </script>
これらのコードをテキストファイルに張り付け、「tetoris.html」といった適当な名前のhtmlファイルにすると、下の画像のようにCUIベースのテトリスを遊ぶことができます。
操作は矢印キーで移動、スペースキーで回転です（亜種の中にはEnterキーで回転するバージョンもあります）。
これらのコードについてですが、作成されたのはいずれも十年以上前という、古いコードになっています。 本記事はこれらのコードに対し、令和の今のJavaScriptならさらに文字数を削減できないかを試してみた内容になっています。
キーボードから押下されたキーの取得方法である、event.keyCodeは現在Deprecatedになっており、現在のJSなら代わりにevent.keyやevent.codeを使うべきでしょう。 (参考：JavaScriptのキーボードイベント、キー判定にどれつかう？) しかし、これらevent.keyやevent.codeは押下されたキーの「文字」を取得するものであり、数値である「キーコード値」を取得するものではありません。 七行テトリスのキーコードの処理は洗練されています。event.keyならevent.keyCodeより文字数を４文字減らせますが、キーコードを扱うためには結局それ以上の文字数がかかりそうです。 ここではevent.keyCodeの代わりに、Deprecatedですが同じくキーコードが取得できる、event.whichを使います。
### 修正前 onKeyDown=K=event.keyCode-38 ### 修正後 onKeyDown=K=event.which-38
これで２文字減らせました。
今回最も大きな変更点になります。 function()の代わりに、ES2015から導入されたアロー関数を使うことで、文字数を大きく減らせます
### 修正前 function Y(){for... ### 修正後 Y=()=>{...
当然、const Y=のように変数宣言はせず、グローバル変数として宣言することで文字数を節約します。 また、アロー関数にすることでブロックの末尾に;を加えなければ動かなくなったので追加します。
const Y=
;
### 修正前 ...}Y(h=K=t=P=0) ### 修正後 ...};Y(h=K=t=P=0)
これで12文字→6+1文字と5文字減らせました
現在のブラウザでは、<p>タグは別に閉じなくても正常に動作します。 そこで、コード内でブロックを描画している箇所で、<br>タグのかわりに<p>タグを使うことにより、文字数を1文字減らせます。
<p>
<br>
### 修正前 "■<br>" ### 修正後 "■<p>"
しかしこれをやってしまうと、テトリスとして動作はするものの、画面全体が大きく縦に間延びしてしまうため、今回は見送りました
上記2点の改良を加えたテトリスが以下の通り。6行に収めることができました。 文字数は476（全角文字を含む）、バイト数は479バイトとなります。
<body id=D onKeyDown=K=event.which-38><script>Z=X=[B=A=12];Y=()=>{for(C=[q=c=i=4]; f=i--*K;c-=!Z[h+(K+6?p+K:C[i]=p*A-(p/9|0)*145)])p=B[i];for(c?0:K+6?h+=K:t?B=C:0 ;i=K=q--;f+=Z[A+p])k=X[p=h+B[q]]=1;h+=A;if(f|B)for(Z=X,X=[l=228],B=[[-7,-20,6,h =17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2];l--;)for(l%A?l-=l%A*!Z[l]:(P+=k++,c=l+=A); --c>A;)Z[c]=Z[c-A];for(S="";i<240;S+=X[i]|(X[i]=Z[i]|=++i%A<2|i>228)?i%A?"■": "■<p>":"＿");D.innerHTML=S+P;Z[5]||setTimeout(Y,i-P)};Y(h=K=t=P=0)</script>
ロジック部分を除けば、他にはonKeyDown,innerHTML,setTimeout,<script>~</script>などの文言が目につきますが、これ以上JSの記法を書き換えてコードを短縮化することは難しいのではないかと思います。
onKeyDown
innerHTML
setTimeout
<script>~</script>
requestAnimationFrame
<script>
</script>
そのため、これ以上短縮化するにはロジック部分の改良が必要になるかと思います。が、それは他の方に譲りたいと思います。
参考：たった7行でテトリスを実装「七行プログラミング」とは 参考：482バイトテトリス 参考：JavaScriptのキーボードイベント、キー判定にどれつかう？
[概要] 1.結論 2.なぜslickを使うのか 3.完成形 4.どのように使うのか 5.ここから学んだこと 1.結論 slickの公式サイトからダウンロードして実装する 2.なぜslickを使うのか 簡単に実装できるからです。具体的にいうと公式サイトからファイルをダウンロードをして、必要なものを自分のフォルダの中に挿入して、あとは公式のところから載っているものから自分が使用たいデザインを選んで、実装していくだけだからです。 3.完成形 4.どのように使うのか 1)まず表示させたいビューファイルに画像をいくつか記述します。 index.html.erb <div class="slider"> <div><%= image_tag 'S__19701764.jpg' %></div> <div><%= image_tag 'S__19701765.jpg' %></div> <div><%= image_tag 'S__19701762.jpg' %></div> </div> 2)次にslickの公式サイトに飛び（https://kenwheeler.github.io/slick/）get it nowのボタンを押してDownload Nowのボタンを押してダウンロードする。 3)ダウンロードしたファイルを解凍し、ファイルを自分のフォルダに追加する。 ダウンロードして解凍したファイルを開きslickのファイルを開く。 その中のファイルのajax-loader.gif, fonts, slick-theme.css, slick.css を自分のアプリのCSSファイルに挿入 4)jsフォルダに上記の画像のslick.jsを追加 5)application.html.erbに追加したファイルを記述 一番上にあるajax.googleapis.comはJQueryの読み込みをしている。 application.html.erb <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> </head> 6)最後に最初のビューファイルに記述した画像の記述の下にjavaScritを記述 この記述は自分がデザインしたい記述をそのままコピーして記述する。私はこのデザインをしたかったのでこの記述をコピーしました！！ index.html.erb <div class="slider"> <div><%= image_tag 'S__19701764.jpg' %></div> <div><%= image_tag 'S__19701765.jpg' %></div> <div><%= image_tag 'S__19701762.jpg' %></div> </div> <script> $('.slider').slick({ autoplay:true, autoplaySpeed:3000, dots:true, }); 7)完成！！ これだけで3のような完成形が作られます！！ 私はindex.html.erbに記述しましたが、application.html.erbや他のhtmlファイルに記述することもできます。 5.ここから学んだこと 最初はうまく写真が反映されなかったりjsが動いてなかったりして苦労しましたが、しっかりと検証ツールを使いどこが間違っているのかを確認することができました！！slick自体の導入はシンプルで簡単なので是非試してみてください！！ このほかにもたくさんのデザインと自分の記述次第で好きなようにアレンジできるので試してみてください！！
1.結論 2.なぜslickを使うのか 3.完成形 4.どのように使うのか 5.ここから学んだこと
slickの公式サイトからダウンロードして実装する
簡単に実装できるからです。具体的にいうと公式サイトからファイルをダウンロードをして、必要なものを自分のフォルダの中に挿入して、あとは公式のところから載っているものから自分が使用たいデザインを選んで、実装していくだけだからです。
4.どのように使うのか 1)まず表示させたいビューファイルに画像をいくつか記述します。
<div class="slider"> <div><%= image_tag 'S__19701764.jpg' %></div> <div><%= image_tag 'S__19701765.jpg' %></div> <div><%= image_tag 'S__19701762.jpg' %></div> </div>
2)次にslickの公式サイトに飛び（https://kenwheeler.github.io/slick/）get it nowのボタンを押してDownload Nowのボタンを押してダウンロードする。
3)ダウンロードしたファイルを解凍し、ファイルを自分のフォルダに追加する。 ダウンロードして解凍したファイルを開きslickのファイルを開く。 その中のファイルのajax-loader.gif, fonts, slick-theme.css, slick.css を自分のアプリのCSSファイルに挿入
4)jsフォルダに上記の画像のslick.jsを追加
5)application.html.erbに追加したファイルを記述 一番上にあるajax.googleapis.comはJQueryの読み込みをしている。
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> </head>
6)最後に最初のビューファイルに記述した画像の記述の下にjavaScritを記述 この記述は自分がデザインしたい記述をそのままコピーして記述する。私はこのデザインをしたかったのでこの記述をコピーしました！！
<div class="slider"> <div><%= image_tag 'S__19701764.jpg' %></div> <div><%= image_tag 'S__19701765.jpg' %></div> <div><%= image_tag 'S__19701762.jpg' %></div> </div> <script> $('.slider').slick({ autoplay:true, autoplaySpeed:3000, dots:true, });
7)完成！！ これだけで3のような完成形が作られます！！ 私はindex.html.erbに記述しましたが、application.html.erbや他のhtmlファイルに記述することもできます。
最初はうまく写真が反映されなかったりjsが動いてなかったりして苦労しましたが、しっかりと検証ツールを使いどこが間違っているのかを確認することができました！！slick自体の導入はシンプルで簡単なので是非試してみてください！！ このほかにもたくさんのデザインと自分の記述次第で好きなようにアレンジできるので試してみてください！！
どうも7noteです。シンプルなステップフローの作り方 申し込みフォームなどではEFO（フォームの最適化）の観点からステップフローをつけるのが一般的です。 ステップフローは「入力 > 確認 > 完了」とステップが分かれていて現在がどのステップかを表すやつのことです。 CSSだけで作ってきます。 ステップフローの作り方 入力、確認、完了でそれぞれ別ページを想定しています。 それぞれのページにあった<li>にクラスcurrentをつけます。 index.html <ul class="flow"> <li class="current">入力</li> <li>確認</li> <li>完了</li> </ul> style.css .flow { width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */ display: flex; /* flexboxで横並びにする */ justify-content: space-between; /* 横並びにしたものを等間隔で並べる */ } .flow li { color: #333; /* 文字色を黒に指定 */ font-size: 11px; /* 文字サイズを指定 */ width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */ background: #eee; /* 背景色をグレーに指定 */ line-height: 50px; /* 行間(高さの代わり)を指定 */ text-align: center; /* 文字を中央寄せにする */ position: relative; /* 基準位置とする */ } .flow li:not(:first-child):not(:last-child) { padding: 0 0 0 10px; /* 最初と最後以外には左に適度な余白を指定 */ } .flow li::before, .flow li::after { content: ""; /* 疑似要素では必須 */ width: 0; /* 横幅を0に指定 */ height: 0; /* 高さを0に指定 */ display: block; /* ブロック要素にする */ position: absolute; /* 相対位置に指定 */ } .flow li::before { border: solid 32px transparent; /* 32pxのborderを指定 */ border-right: solid 13px transparent; /* 幅を合わせるため右線は13pxにする */ border-left: solid 13px #FFF; /* 白い三角形を作成して▷の形で上に重ねて削り取る */ top: -7px; /* 重ねる位置(縦軸)を調整 */ left: 0; /* 重ねる位置(横軸)を調整 */ z-index: 1; /* 重なり順を指定 */ } .flow li::after { border: solid 25px transparent; /* 25pxのborderを指定 */ border-left: solid 10px #EDEDED; /* 左のborderで背景色と同じ▶の部分を作成する */ border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */ top: 0; /* 重ねる位置(縦軸)を調整 */ right: -20px; /* 重ねる位置(横軸)を調整 */ z-index: 2; /* 重なり順の優先度を他よりも上げる */ } .flow li:first-child::before, .flow li:last-child::after { content: none; /* 最初のliの左と最後のliの右は作らない */ } /* 以下.currentだけ色を変えるCSS */ .flow li.current { color: #FFF; background: #FCC; } .flow li.current::after { border-left: solid 10px #FCC; } 解説 手順としては以下のようなイメージで作って行きます。 ① liの箱を3つ作成して、flexboxで横並びにする ② わかりやすいように文字色や背景色を入れて、大きさを整える。 ③ before、afterの疑似要素両方を作成 ④ beforeでborderを使い右向きの白い三角形▷を作って配置。 ⑤ afterでborderを使い右向きの背景色と同じ三角形▶を作る。 ⑥ currentがついている場合、背景色とafterの三角形▶の色を変える このような手順で作っていくと作りやすいと思います。 私的ポイントは、.flow li:not(:first-child):not(:last-child)でpaddingを左に10pxとっているところです。 これがないと、左の白三角形で削られている分文字が左に寄っているように見えてしまうので微調整を入れています。 まとめ 1から作成すると結構時間がかかってしまうので、コピペで作れるよう用意しておいたり、よく使うサイトをブックマークするなどしておくと時短になっていいですね！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
申し込みフォームなどではEFO（フォームの最適化）の観点からステップフローをつけるのが一般的です。 ステップフローは「入力 > 確認 > 完了」とステップが分かれていて現在がどのステップかを表すやつのことです。
CSSだけで作ってきます。
入力、確認、完了でそれぞれ別ページを想定しています。 それぞれのページにあった<li>にクラスcurrentをつけます。
<li>
current
<ul class="flow"> <li class="current">入力</li> <li>確認</li> <li>完了</li> </ul>
.flow { width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */ display: flex; /* flexboxで横並びにする */ justify-content: space-between; /* 横並びにしたものを等間隔で並べる */ } .flow li { color: #333; /* 文字色を黒に指定 */ font-size: 11px; /* 文字サイズを指定 */ width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */ background: #eee; /* 背景色をグレーに指定 */ line-height: 50px; /* 行間(高さの代わり)を指定 */ text-align: center; /* 文字を中央寄せにする */ position: relative; /* 基準位置とする */ } .flow li:not(:first-child):not(:last-child) { padding: 0 0 0 10px; /* 最初と最後以外には左に適度な余白を指定 */ } .flow li::before, .flow li::after { content: ""; /* 疑似要素では必須 */ width: 0; /* 横幅を0に指定 */ height: 0; /* 高さを0に指定 */ display: block; /* ブロック要素にする */ position: absolute; /* 相対位置に指定 */ } .flow li::before { border: solid 32px transparent; /* 32pxのborderを指定 */ border-right: solid 13px transparent; /* 幅を合わせるため右線は13pxにする */ border-left: solid 13px #FFF; /* 白い三角形を作成して▷の形で上に重ねて削り取る */ top: -7px; /* 重ねる位置(縦軸)を調整 */ left: 0; /* 重ねる位置(横軸)を調整 */ z-index: 1; /* 重なり順を指定 */ } .flow li::after { border: solid 25px transparent; /* 25pxのborderを指定 */ border-left: solid 10px #EDEDED; /* 左のborderで背景色と同じ▶の部分を作成する */ border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */ top: 0; /* 重ねる位置(縦軸)を調整 */ right: -20px; /* 重ねる位置(横軸)を調整 */ z-index: 2; /* 重なり順の優先度を他よりも上げる */ } .flow li:first-child::before, .flow li:last-child::after { content: none; /* 最初のliの左と最後のliの右は作らない */ } /* 以下.currentだけ色を変えるCSS */ .flow li.current { color: #FFF; background: #FCC; } .flow li.current::after { border-left: solid 10px #FCC; }
手順としては以下のようなイメージで作って行きます。
① liの箱を3つ作成して、flexboxで横並びにする ② わかりやすいように文字色や背景色を入れて、大きさを整える。 ③ before、afterの疑似要素両方を作成 ④ beforeでborderを使い右向きの白い三角形▷を作って配置。 ⑤ afterでborderを使い右向きの背景色と同じ三角形▶を作る。 ⑥ currentがついている場合、背景色とafterの三角形▶の色を変える
このような手順で作っていくと作りやすいと思います。
私的ポイントは、.flow li:not(:first-child):not(:last-child)でpaddingを左に10pxとっているところです。 これがないと、左の白三角形で削られている分文字が左に寄っているように見えてしまうので微調整を入れています。
.flow li:not(:first-child):not(:last-child)
1から作成すると結構時間がかかってしまうので、コピペで作れるよう用意しておいたり、よく使うサイトをブックマークするなどしておくと時短になっていいですね！
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
ご無沙汰してます、おおのんです。 今日はBootstrapに関すること。（あんまりReact関係ない） 右に余白がいてはる とある日、Bootstrapを使って画面を作っていました。 レスポンシブ対応でスマホ画面サイズで見てみると、右に余白が！！！ どこが悪さしてるのか見てみると・・・ ここだった。 本来指定した領域をはみ出して表示しちゃってますので、overflow: hiddenしてみる。 index.js ..省略.. return ( <div className="overflow-hidden"> <Carousel /> <Row className="justify-content-center" md={10}> ..省略.. すると・・・！ 余白を消し去ることに成功しました。
ご無沙汰してます、おおのんです。 今日はBootstrapに関すること。（あんまりReact関係ない）
とある日、Bootstrapを使って画面を作っていました。 レスポンシブ対応でスマホ画面サイズで見てみると、右に余白が！！！
どこが悪さしてるのか見てみると・・・
ここだった。
本来指定した領域をはみ出して表示しちゃってますので、overflow: hiddenしてみる。
..省略.. return ( <div className="overflow-hidden"> <Carousel /> <Row className="justify-content-center" md={10}> ..省略..
すると・・・！
余白を消し去ることに成功しました。
１．初級編 見出し以外の文には＜ｐ＞要素 ＜ｉｍｇ＞要素はテキストを囲むことが無いため、終了タグは不要 ＜ｌｉ＞要素は囲む要素によって種類が変わる ＜ｕｌ＞は黒点 ＜ｏｌ＞は数字が連番 list-style: none;で黒点無し 「 font-family: フォント名; 」 フォント名にスペースがある場合はダブルクォーテーションで囲む タグにはドットは不要 classはドットが必要 レイアウトは＜ｄｉｖ＞要素によって構成していく 「div」は「division」の略で、要素をグループ化するために使用される ２．中級編 containerクラスを中央寄せにする 中央に寄せるためにはmarginの左右にautoを指定する marginにautoを指定するときは、必ずwidthを併せて指定する containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにする セレクタ:hoverではスペースを挟まない opacityには要素の中身全てを透明にするという性質がある。色のみを透明にするには、rgbaというものを使う必要がある クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになる。 ・box-shadowをnoneにする ・position: relative;とtopによって影の分だけ位置を下げる z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意する。 ３．上級編 メディアクエリ ＠ｍｅｄｉａ(max-width: 1000px) { cssを記述 } 1000pxの後にセミコロン付けない box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになる box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されている *はすべての要素に対してCSSを適用したい場合に用いる border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなる レスポンシブデザインを適用する準備として、＜ｈｅａｄ＞タグ内にviewportを設定する viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しない responsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにする float解除にclear: left; メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにする↓ 要素を非表示にするにはdisplay: none;を用いる 非表示にした要素を表示させる時は、display: block;を用いて表示する 4.Flexbox編 リストを横並びにするにはdisplay: flex; 横並びにしたリストを画面幅いっぱいにするにはflex: auto; 折り返したい要素の親要素にflex-wrap: wrapを指定する 折り返したい要素自身には列数に応じたwidthを指定 2列にしたい場合はwidth: 50%を指定 縦に並べたいときは親要素にflex-direction: column margin: 0 auto;とwidthで中央寄せ
１．初級編 見出し以外の文には＜ｐ＞要素
＜ｉｍｇ＞要素はテキストを囲むことが無いため、終了タグは不要
＜ｌｉ＞要素は囲む要素によって種類が変わる ＜ｕｌ＞は黒点 ＜ｏｌ＞は数字が連番 list-style: none;で黒点無し
「 font-family: フォント名; 」 フォント名にスペースがある場合はダブルクォーテーションで囲む
タグにはドットは不要 classはドットが必要
レイアウトは＜ｄｉｖ＞要素によって構成していく 「div」は「division」の略で、要素をグループ化するために使用される
２．中級編
containerクラスを中央寄せにする 中央に寄せるためにはmarginの左右にautoを指定する marginにautoを指定するときは、必ずwidthを併せて指定する
containerクラスのように、広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにする
セレクタ:hoverではスペースを挟まない
opacityには要素の中身全てを透明にするという性質がある。色のみを透明にするには、rgbaというものを使う必要がある
クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになる。 ・box-shadowをnoneにする ・position: relative;とtopによって影の分だけ位置を下げる
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意する。
３．上級編 メディアクエリ ＠ｍｅｄｉａ(max-width: 1000px) { cssを記述 } 1000pxの後にセミコロン付けない
box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになる box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されている *はすべての要素に対してCSSを適用したい場合に用いる border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなる
レスポンシブデザインを適用する準備として、＜ｈｅａｄ＞タグ内にviewportを設定する viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しない
responsive.cssを読み込む際には、必ずviewportよりも下の行に記述するようにする
float解除にclear: left;
メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにする↓ 要素を非表示にするにはdisplay: none;を用いる 非表示にした要素を表示させる時は、display: block;を用いて表示する
4.Flexbox編 リストを横並びにするにはdisplay: flex; 横並びにしたリストを画面幅いっぱいにするにはflex: auto;
折り返したい要素の親要素にflex-wrap: wrapを指定する 折り返したい要素自身には列数に応じたwidthを指定 2列にしたい場合はwidth: 50%を指定
縦に並べたいときは親要素にflex-direction: column margin: 0 auto;とwidthで中央寄せ
htmlファイルをインプットにPDFへ変換してくれるwkhtmltopdfですが、解像度を指定しないデフォルトの状態だと1px未満単位で描画されません。 例えばhtmlで1.9pxの線はpdfに1pxとして描画されます。 pdfに1px未満の描画をさせるためには「-d」または「--dpi」をオプションに96以上の値を指定する必要があります。 0.1px単位で描画するには960を0.01px単位で描画する場合は9600を指定します。 詳しくはこちら htmlファイル 10.9pxの枠線 dpiオプション無しでPDFへ変換 dpi=960でPDFへ変換 変換後のPDFを比べると枠線の太さが異なるのがわかると思います。
htmlファイルをインプットにPDFへ変換してくれるwkhtmltopdfですが、解像度を指定しないデフォルトの状態だと1px未満単位で描画されません。 例えばhtmlで1.9pxの線はpdfに1pxとして描画されます。 pdfに1px未満の描画をさせるためには「-d」または「--dpi」をオプションに96以上の値を指定する必要があります。 0.1px単位で描画するには960を0.01px単位で描画する場合は9600を指定します。 詳しくはこちら
10.9pxの枠線
変換後のPDFを比べると枠線の太さが異なるのがわかると思います。
タグを使用すると改行はちゃんと改行されるが、フォントが変わってしまう。 デモ See the Pen <textarea>と<pre> (@rjwxfqli) on CodePen. white-spaceプロパティなるものを利用すれば改行も反映される 改行ありのテキストを表示したいなら、表示するタグのCSSに以下を追加する。 white-space: pre-wrap; これで、preのように整形してくれるし、preだとフォントが変わっちゃうのも変わらなくしてくれる。 問い合わせフォームとかの長い文章を入力して、確認画面などに表示する際に使えるのかなと思います。
タグを使用すると改行はちゃんと改行されるが、フォントが変わってしまう。
See the Pen <textarea>と<pre> (@rjwxfqli) on CodePen.
改行ありのテキストを表示したいなら、表示するタグのCSSに以下を追加する。
white-space: pre-wrap;
これで、preのように整形してくれるし、preだとフォントが変わっちゃうのも変わらなくしてくれる。
問い合わせフォームとかの長い文章を入力して、確認画面などに表示する際に使えるのかなと思います。
