はじめに [2019/3/7 Last Updated.] ※この記事は何回も更新される可能性があります。 CSSはとても奥が深いです。昨今のCSS事情を見ると、片手間でこなせるような技術ではないことが伺えます。 しかし、Webエンジニアして独立するためには、CSS, HTML, JavaScriptという三つの技術を扱えなければなりません。 とてもリソース（時間）が足りないです。 そこで、最新鋭のCSSではなく、業務上で利用されるような癖のあるCSSを、紹介したいと思います。 無駄なく作業をして時給を無限大に昇華させましょう！ 注意 コードはcodepenに掲載しています。 HTML => Pug CSS => SCSS で書いておりますので、ご了承ください。 凹凸 凹 See the Pen Uneven-凹 by ae.hiyoko_3 (@hiyoko_3) on CodePen. 凸 See the Pen Uneven-凸 by ae.hiyoko_3 (@hiyoko_3) on CodePen. 吹き出し CSSで作る！吹き出しデザインのサンプル19選 終わりに 要望を頂ければ調べて加筆いたします。 また、改善要望もどんどんいただきたいです。 参考 CSSで作る！吹き出しデザインのサンプル19選
[2019/3/7 Last Updated.]
※この記事は何回も更新される可能性があります。
CSSはとても奥が深いです。昨今のCSS事情を見ると、片手間でこなせるような技術ではないことが伺えます。
しかし、Webエンジニアして独立するためには、CSS, HTML, JavaScriptという三つの技術を扱えなければなりません。
とてもリソース（時間）が足りないです。
そこで、最新鋭のCSSではなく、業務上で利用されるような癖のあるCSSを、紹介したいと思います。
無駄なく作業をして時給を無限大に昇華させましょう！
コードはcodepenに掲載しています。
HTML => Pug
CSS => SCSS
で書いておりますので、ご了承ください。
See the Pen Uneven-凹 by ae.hiyoko_3 (@hiyoko_3) on CodePen.
See the Pen Uneven-凸 by ae.hiyoko_3 (@hiyoko_3) on CodePen.
CSSで作る！吹き出しデザインのサンプル19選
要望を頂ければ調べて加筆いたします。 また、改善要望もどんどんいただきたいです。
背景 railsにbootstrap 4を入れようとしてたら、突然説明に出てきた拡張子.scss、一体何か調べてみた。 sassについて調べてみた ・拡張子.scssはsass(サース)という言語の拡張子だった（紛らわしい‥） ・sass(サース)はcssを超効率的に書くための言語 ・拡張子.scssで書いたファイルを拡張子.cssに変換(コンパイル)する必要がある。(railsでは勝手にやってくれるから必要なし) ・コンパイルするためにPCとフォルダに色々インストールする必要がある コンパイルの手順 参考記事 →絶対つまずかないGulp 4入門(2019年版) – インストールとSassを使うまでの手順 sassの記述方法 Progateのsassが一番わかりやすかった。 https://prog-8.com/languages/sass おまけ Bootstrap 4を使うならSassを使って3倍幸せになろう
railsにbootstrap 4を入れようとしてたら、突然説明に出てきた拡張子.scss、一体何か調べてみた。
・拡張子.scssはsass(サース)という言語の拡張子だった（紛らわしい‥） ・sass(サース)はcssを超効率的に書くための言語 ・拡張子.scssで書いたファイルを拡張子.cssに変換(コンパイル)する必要がある。(railsでは勝手にやってくれるから必要なし) ・コンパイルするためにPCとフォルダに色々インストールする必要がある
参考記事 →絶対つまずかないGulp 4入門(2019年版) – インストールとSassを使うまでの手順
Progateのsassが一番わかりやすかった。 https://prog-8.com/languages/sass
Bootstrap 4を使うならSassを使って3倍幸せになろう
androidで、非表示の要素を表示させたときに背景画像設定が消える現象が発生しました。 調べてみたところ、background-sizeの書き方に問題がありました。 before css background: url(../../hogehoge.jpg) left top repeat-y; background-size: 100% auto; 100% auto という記載に問題がありました。 after css background: url(../../hogehoge.jpg) left top repeat-y; background-size: 100%; これで直りました。
androidで、非表示の要素を表示させたときに背景画像設定が消える現象が発生しました。 調べてみたところ、background-sizeの書き方に問題がありました。
before
background: url(../../hogehoge.jpg) left top repeat-y; background-size: 100% auto;
100% auto という記載に問題がありました。
after
background: url(../../hogehoge.jpg) left top repeat-y; background-size: 100%;
これで直りました。
GOAL 文字の大きさ（font-size）をデバイス（画面幅）に対してレスポンシブしちゃうよ！ how to test.html <p>Hello world.</p> test.css p { font-size: 1vw; } Why so good? どんなとこで使えるかというと、テキストの背景にbadkgroundを敷いている場合ですね！ ちょっとわかりにくいですが、これは上の画像がfont-size:2vw;でフォント指定している例です。 下の画像は％指定です。 rem,em,%が親要素などのpxを基準にしているのに対して、唯一画面幅に対してfont-sizeを指定できるのがvwじゃないですかね？ 僕の知っている中で唯一レスポンシブでfont-sizeを指定する方法です。 （他にもjsなんかでやる方法あるんだろうな〜） vwは画面の横幅に対する比率のことです。 もし画面幅が100pxの場合1vwは1pxということになりますね！ つまり、1vw=画面横幅/100 参考サイト font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する
文字の大きさ（font-size）をデバイス（画面幅）に対してレスポンシブしちゃうよ！
<p>Hello world.</p>
p { font-size: 1vw; }
どんなとこで使えるかというと、テキストの背景にbadkgroundを敷いている場合ですね！
ちょっとわかりにくいですが、これは上の画像がfont-size:2vw;でフォント指定している例です。 下の画像は％指定です。
rem,em,%が親要素などのpxを基準にしているのに対して、唯一画面幅に対してfont-sizeを指定できるのがvwじゃないですかね？
僕の知っている中で唯一レスポンシブでfont-sizeを指定する方法です。 （他にもjsなんかでやる方法あるんだろうな〜）
vwは画面の横幅に対する比率のことです。 もし画面幅が100pxの場合1vwは1pxということになりますね！ つまり、1vw=画面横幅/100
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する
GOAL 背景画像（badkground-image）と中の子要素（p要素）を同時に縦横比を固定しながらレスポンシブさせる方法です！ 探しても意外となかったので、ポイントだけ抜粋！ How to test.html <div class="box"> <p class="text">hello</p> </div> test.css .box { background-size: cover; background-repeat: no-repeat; background-position: top; height: 0px; width: 100%; padding-top: 40%; position: relative; } .text { position: absolute; left: 10; bottom: 0; width: 100%; } 参考サイト 背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法
背景画像（badkground-image）と中の子要素（p要素）を同時に縦横比を固定しながらレスポンシブさせる方法です！
探しても意外となかったので、ポイントだけ抜粋！
<div class="box"> <p class="text">hello</p> </div>
.box { background-size: cover; background-repeat: no-repeat; background-position: top; height: 0px; width: 100%; padding-top: 40%; position: relative; } .text { position: absolute; left: 10; bottom: 0; width: 100%; }
背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法
CSS animation day 44 となりました。 本日も、Loading を作っていきます。 1. 完成版 See the Pen Loading interaction by hiroya iizuka (@hiroyaiizuka) on CodePen. 2. 参考文献 Glowing text effect with pure CSS3 3. 分解してみる ❶. マークアップしましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <div class="glowing"> <span>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> </div> </body> </html> styles.scss body { margin: 0; padding: 0; background: #000; } .glowing { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; } 注意点として span はインライン要素なので、width とheight は単体ではつけることはできません。 そんな時は、display: inline-block にしてあげましょう。 詳しくは、サルワカ の記事に大変わかりやすくのっております。 ❷. アニメーションを作ります。 box-shadow, inset で箱の中に色をつけ、文字の色と太さを変化させます。 styles.scss span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; animation: glowing 1s linear infinite; } @keyframes glowing { 100% { color: #000; font-weight: bold; box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset; } } いい感じです！ ❸. 擬似要素とループ文を使い、各々に、animation-delay を設定しましょう。 styles.scss span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; animation: glowing 1.5s ease-in-out infinite; @for $i from 1 through 7 { &:nth-child(#{$i}) { animation-delay: 0.1 * $i + s; } } } @keyframes glowing { 50% { color: #000; font-weight: bold; box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset; } } 完成しました！ 本日の作品は、割とシンプルめなコードでした。 他にも色々表現方法はある(blur やborder、scale、transdorm を変えるなど)ので、 いじってみてください。それでは、また明日〜
CSS animation day 44 となりました。 本日も、Loading を作っていきます。
See the Pen Loading interaction by hiroya iizuka (@hiroyaiizuka) on CodePen.
Glowing text effect with pure CSS3
❶. マークアップしましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <div class="glowing"> <span>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> </div> </body> </html>
body { margin: 0; padding: 0; background: #000; } .glowing { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; }
注意点として span はインライン要素なので、width とheight は単体ではつけることはできません。 そんな時は、display: inline-block にしてあげましょう。 詳しくは、サルワカ の記事に大変わかりやすくのっております。 ❷. アニメーションを作ります。 box-shadow, inset で箱の中に色をつけ、文字の色と太さを変化させます。
span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; animation: glowing 1s linear infinite; } @keyframes glowing { 100% { color: #000; font-weight: bold; box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset; } }
いい感じです！ ❸. 擬似要素とループ文を使い、各々に、animation-delay を設定しましょう。
span { color: #fffccc; font-size: 40px; display: inline-block; width: 40px; height: 40px; padding: 10px; text-align: center; line-height: 40px; border: 1px solid #fff000; animation: glowing 1.5s ease-in-out infinite; @for $i from 1 through 7 { &:nth-child(#{$i}) { animation-delay: 0.1 * $i + s; } } } @keyframes glowing { 50% { color: #000; font-weight: bold; box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset; } }
完成しました！ 本日の作品は、割とシンプルめなコードでした。 他にも色々表現方法はある(blur やborder、scale、transdorm を変えるなど)ので、 いじってみてください。それでは、また明日〜
はじめに いいライブラリがなかったので、Reactで虫眼鏡のような拡大鏡をパワーで実装してみましたというパワー系の記事です ポイント ポイントはhoverした時点で、imageタグのopacityを０にし、background-imageを拡大していくことで拡大鏡を実装しています。 マウスカーソルの位置を取得して、その値に応じてtransform-originとbackground-positionを変えていきます。 デモンストレーション ソースコード JS const imageUrl = 'http://img.kb-cdn.com/imgviewer/NVpIM2ptOHhYRzVmUk5rM1NrNlFxYVV6enV4aGk2UFRJMmxPckdDUUVNYmF1RnpSNUZYSGVySnNpclp0dGpMT2xQcndrSmo1U0dxdHR4WmNjZHZoM2RKUmpwbktBZ0E5eDFOd0I0RFdsNE1XbS9NbE1QWFMxa2JCaVVDRzdNMUtNWHcrWGkxdjdUQ2Jya25ZZ2t4Z2M5MEM3MGdZUGwvTEx3RHRScVhBdzM2QjFYNVNHQ2trNDhnWUFlelBZU2Jr?square=0' class ZoomImage extends React.Component { state = { backgroundImage: `url(${imageUrl})`, backgroundPosition: '0% 0%', transformOrigin: '50% 50%', transform: 'scale(1)', }; handleMouseMove = event => { const { left, top, width, height, } = event.currentTarget.getBoundingClientRect(); const x = ((event.pageX - left) / width) * 100; const y = ((event.pageY - top) / height) * 100; this.setState({ ...this.state, transformOrigin: `${x}% ${y}%`, backgroundPosition: `${x}% ${y}%`, }); }; handleMouseOver = () => { this.setState({ ...this.state, transform: 'scale(2.5)' }); }; handleMouseLeave = () => { this.setState({ ...this.state, transform: 'scale(1)' }); }; render = () => { return ( <div className="zoomImgContainer"> <div onMouseMove={this.handleMouseMove} onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} style={this.state} className="zoomImgSection" > <img className="zoomImg" src={`${imageUrl}`} alt="画像がありません" /> </div> </div> ); }; } React.render(<ZoomImage />, document.getElementById('app')); CSS(Stylus) .zoomImgContainer overflow hidden width 416px height 416px margin 0 auto .zoomImgSection background-repeat no-repeat .zoomImgContainer:hover .zoomImg opacity 0 .zoomImg display block width 100% pointer-events none HTML <div id="app"></app> CodePen See the Pen React at CodePen by kazukiii (@kazukiii) on CodePen. 以上です。
いいライブラリがなかったので、Reactで虫眼鏡のような拡大鏡をパワーで実装してみましたというパワー系の記事です
ポイントはhoverした時点で、imageタグのopacityを０にし、background-imageを拡大していくことで拡大鏡を実装しています。 マウスカーソルの位置を取得して、その値に応じてtransform-originとbackground-positionを変えていきます。
opacity
background-image
transform-origin
background-position
const imageUrl = 'http://img.kb-cdn.com/imgviewer/NVpIM2ptOHhYRzVmUk5rM1NrNlFxYVV6enV4aGk2UFRJMmxPckdDUUVNYmF1RnpSNUZYSGVySnNpclp0dGpMT2xQcndrSmo1U0dxdHR4WmNjZHZoM2RKUmpwbktBZ0E5eDFOd0I0RFdsNE1XbS9NbE1QWFMxa2JCaVVDRzdNMUtNWHcrWGkxdjdUQ2Jya25ZZ2t4Z2M5MEM3MGdZUGwvTEx3RHRScVhBdzM2QjFYNVNHQ2trNDhnWUFlelBZU2Jr?square=0' class ZoomImage extends React.Component { state = { backgroundImage: `url(${imageUrl})`, backgroundPosition: '0% 0%', transformOrigin: '50% 50%', transform: 'scale(1)', }; handleMouseMove = event => { const { left, top, width, height, } = event.currentTarget.getBoundingClientRect(); const x = ((event.pageX - left) / width) * 100; const y = ((event.pageY - top) / height) * 100; this.setState({ ...this.state, transformOrigin: `${x}% ${y}%`, backgroundPosition: `${x}% ${y}%`, }); }; handleMouseOver = () => { this.setState({ ...this.state, transform: 'scale(2.5)' }); }; handleMouseLeave = () => { this.setState({ ...this.state, transform: 'scale(1)' }); }; render = () => { return ( <div className="zoomImgContainer"> <div onMouseMove={this.handleMouseMove} onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} style={this.state} className="zoomImgSection" > <img className="zoomImg" src={`${imageUrl}`} alt="画像がありません" /> </div> </div> ); }; } React.render(<ZoomImage />, document.getElementById('app'));
.zoomImgContainer overflow hidden width 416px height 416px margin 0 auto .zoomImgSection background-repeat no-repeat .zoomImgContainer:hover .zoomImg opacity 0 .zoomImg display block width 100% pointer-events none
<div id="app"></app>
See the Pen React at CodePen by kazukiii (@kazukiii) on CodePen.
以上です。
