ScrollMagicを使ってふわっと要素を出す方法 スクロールと連動させて何かをしたいならScrollMagic一択かなと自分は思っています。 自分が忘れないための備忘録 scrollMagicの公式のデモサイトはこちら https://scrollmagic.io/ サクッとデモだけ見たい人 サクッと実装だけみたい人は下記より見てください CodePenのリンク https://codepen.io/xhisashix/pen/YzZLJqY ディレクトリの構成 . ├── css │ └── style.css ├── index.html └── js └── scrollMagic.js CDNの読み込み bodyの閉じたタグの上に記載 CDNのリンクに付いては上記のScrollMagicのデモサイトのページにも記載があります。 index.html <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> サンプルHTML htmlはこれだけ index.html <div class="section"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> CSS style.css .section { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; max-width: 980px; width: 100%; } .section .box { margin-top: 20px; margin-left: 20px; width: 200px; height: 200px; background: #eee; opacity: 0; transition: 0.5s; transform: translateY(15%) rotate(-45deg); } .section .box:nth-child(odd) { transform: translateY(-15%) rotate(45deg); } .section .box.active { opacity: 1; transform: translateY(0); } js 特定のクラスがついてるものずべてにアニメーションを適応點せたかったので 今回は下記のような、実装を行いました。 scrollMagic.js class ScrollFadeIn { constructor() { let box = document.querySelectorAll('.box:not(.active)'); console.log(box); if (box.length === null) { return; } let controller = new ScrollMagic.Controller(); for (let i = 0; i < box.length; i++) { let scene = new ScrollMagic.Scene({ triggerElement: box[i], triggerHook: 'onEnter', reverse: false, offset: 150, }) .addIndicators() .addTo(controller); scene.on('enter', () => { box[i].classList.add('active'); }); } } } new ScrollFadeIn(); ちょっと説明 querySelectorAll 条件に該当する要素をすべて取得する let box document.querySelectorAll('.box:not(.active)'); console.log(box); // ログの結果 NodeList(３) [div.box, div.box, div.box] 上記を使ってあとはループを回すだけ for (let i = 0; i < box.length; i++) { let scene = new ScrollMagic.Scene({ triggerElement: box[i], triggerHook: 'onEnter', reverse: false, offset: 150, }) .addIndicators() .addTo(controller); scene.on('enter', () => { box[i].classList.add('active'); }); } イベント発火のタイミング triggerHook: 'onEnter', onEnter onCenter onLeave クラスの追加 triggerElementが特定の位置に来たときクラスを付与 このクラスをつけアニメーションはCSSで調整を行っている scene.on('enter', () => { box[i].classList.add('active'); }); 最後に vue-scrollmagicは使ったことがあり、なんとなく理解していたが、 scrollMagicを使うのが初めてだったため、忘れないための備忘録として書かせてもらいました。 誰かの参考になれば幸いです 最後まで読んでいただきありがとうございました。

○SCSSでアニメーションを使うための方法をまとめました。 　本当に初めて使う人向けのため、濃い内容ではありません。ご了承ください。 SCSSでアニメーションを使おうと思った時にヒットする記事が古いものばかりだったため、 今の条件で動く記事を書いてみました。 なお、scssのファイル構成はこちらの方のやり方を参考にさせていただいております。 他の方とはファイル構成が異なっていたりする場合もございます。ご了承ください。 https://tsudoi.org/guide/detail/9.html _animation.scss @mixin keyframes($animation-name) { @keyframes #{$animation-name} { @content; } } @mixin animation($animation-name) { -webkit-animation: $animation-name; animation: $animation-name; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @include keyframes(fadein) { 0% { opacity: 0; font-size: small; } 100% { opacity: 1; font-size: larger; } } @include keyframes(slidein) { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0px); } } ※SCSSのコンパイラーに読み込ませないように「_animation.scss」にしています。 今回は使い回しができるということが、わかりやすいように「fadein」と「slidein」という二つのアニメーションを作ってみました。 実際にアニメーションを当てるページごとのscssに先ほどの「_animation.scss」をインポートして使います。 _top.scss @import "./../../mixin/animation"; .fadein { @include animation(fadein 3s); } .slidein{ @include animation(slidein 3s); } それを大元のSCSSファイルである「style.scss」で読み込みます。 style.scss @import './top/top'; コンパイラされたcssを該当ページのhtmlファイルで読み込めばで起用されます。 style.css @-webkit-keyframes fadein { 0% { opacity: 0; font-size: small; } 100% { opacity: 1; font-size: larger; } } @keyframes fadein { 0% { opacity: 0; font-size: small; } 100% { opacity: 1; font-size: larger; } } @-webkit-keyframes slidein { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes slidein { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } } .fadein { -webkit-animation: fadein 3s; animation: fadein 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slidein { -webkit-animation: slidein 3s; animation: slidein 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./../../scss/style.css" /> <link rel="stylesheet" href="./../../scss/page/style.css" /> <title>Document</title> </head> <body> <p class="fadein">フェードインテキスト</p> <p class="slidein">スライドインテキスト</p> </body> </html> 以上簡単ですが、SCSSでアニメーションを使う方法でした。 細かい解説などはしていませんので、気になる方は自身で調べてみてください。

CSSを学習する上で最低限必要な知識をまとめました。 「これからプログラミングを学習する方」や「基礎知識復習したいわ！」 って方の参考になればと思います！ CSSって覚えてもすぐ忘れてしまいますよね、、、 忘れてもすぐ取り出せるように、ここにまとめておきます!! 都度学んだことを更新していきます。 基礎知識 【CSS（Cascading Style Sheets）】 HTMLに「装飾」を加えるための言語です。 「〇〇.css」 という名前のファイルに記述します（例：style.css）。 CSSの文法 HTML→CSS <link rel="stylesheet" href="style1-1.css"> ⬇︎ 　 　　　　　　　　　　　　　　　　　　　　　　　　　　⬇︎ 　　　　　　　　　　　　　　（CSSファイルとの関係を表す）　　　　（CSSファイルの場所を表す） 【link要素】 link要素はHTMLのファイルから外部情報（CSSファイル）を関連付けする際に記載します。 rel属性、href属性と一緒に使用するのが一般的です。 【rel属性】 rel属性は、参照先のファイルが現在のファイルとどのような「関係」であるのかを明らかにします。 属性値には決められたキーワードを記載します。 今回は”stylesheet”というキーワードを指定することでCSS（Cascading Style Sheets）を参照することを表しています。 【href属性】 href属性は、参照先の外部ファイルの「場所」を明らかにします。 属性値にはファイルの場所、ファイル名を記載します。 CSSの記述名 body{ background-color: blue; } 【セレクタ】 セレクタとは、CSSによる装飾を、「どの部分のHTMLに適用するか」を選択するための記述です。 【プロパティ】 プロパティとはセレクタで指定したHTMLの「何を変えるのか」を選択するための記述です。背景の色や文字の大きさ、要素同士の余白など様々なプロパティが用意されています。 【値】 プロパティで設定する内容を決めるための記述。 プロパティと値の間は「コロン（ : ）」で区切り、値の後にはセミコロン「（ ; ）」を入力します。 (⬇︎#セレクタ) body{ background-color: blue; } (⬆︎#プロパティ) (⬆︎#値) 【colorプロパティ】 colorプロパティは、値によって自由に「文字の色」を指定することができます。 p{ color: blue; } 【font-sizeプロパティ】 font-sizeプロパティとは「文字の大きさ」を指定するプロパティです。 文字の大きさを調整するときに、単位として「px」が頻繁に使用されます。 p{ font-size: 20px; } 【class属性】 class属性とは「HTML要素に対して個別に名前を指定する」ことができる属性です。 class属性の属性値を「class名」といいます。 <p class="first-text"> 　　(⬆︎class属性)　　　(⬆︎class名) 【classセレクタ】 HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。 .first-text { color: blue; } class属性とclassセレクタの他にも、特定の要素を装飾する方法があります。 それは、「id属性」と「idセレクタ」です。 【id属性】 id属性とは特定のHTML要素のみに対して、名前を指定することができる属性です。 id属性の属性値をid名といいます。 <p id="second-text"> 　　(⬆︎id属性)　　　(⬆︎id名) 【idセレクタ】 HTMLで指定したid名をCSSのセレクタとして使用することができます。 idセレクタを指定する場合は、「#id名」の形でCSSファイルに記述します。 #second-text { color: blue; } idセレクタを使うことによって、特定のHTMLだけに装飾をすることができます。 テキストの一部にCSSを指定する方法 テキストの一部だけに、CSSを指定することもできます。 そのためによく使用する要素が、span要素です。 【span要素】 span要素は、テキストの一部だけを装飾するために使用される要素です。 部分的にテキストの「フォント調整、文字色・背景色」を変更するのに頻繁に使用されます。 <span class="green">Qitta</span>を投稿します .green { color: green; } こうすることで、文字は「Qitta」の部分だけ文字色が緑になります。 ブロックレベル要素の横並び HTMLの構成における「積み木」はブロックレベル要素という要素でした。 ブロックレベル要素は、通常は「縦に積み重なる」ため、横並びにするために工夫が必要です。 ブロックレベル要素について分からない方は下記の記事を参考にしてください。 【HTML初心者】HTML基礎知識 総まとめ ブロックレベル要素を横並びにするためには、displayプロパティにflexという値を指定します。 【displayプロパティ】 displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティです。値には、変更したい要素の種類を設定します。 組み合わせ 説明 display: block; ブロックレベル要素として表示 display: inline; インライン要素として表示　　 display: inline-block; 並びはインライン要素だが、中身はブロックレベル要素として表示　　 display: flex; 　　　　 親要素に記載することで、子要素が横並びになる　　 display: none; 非表示になる　　 Flexboxを用いた配置の調整 【Flexbox】 親要素に、display: flex;を付与することで、子要素が横並びになります。その子要素らの並び順や要素同士の幅は、詳細に決めることができます。この調整方法の総称を、「Flexbox」といいます。 【 justify-contentプロパティ】 「justify-content: 〇〇;」といった形で、「display: flex;」と併せて使用します。 主軸方向(初期値は水平方向)の配置の詳細を決めることができます。 「display: flex;」を付与した親要素に「justify-content: 〇〇;」をかけると、子要素の配置を調整できる。 組み合わせ 説明 justify-content: flex-start; 左寄せ justify-content: flex-end; 右寄せ justify-content: center; 中央寄せ justify-content: space-between; 両端が左右に寄り、等間隔 justify-content: space-around; 両端が左右に寄り、等間隔。両端の余白と要素間の余白が1:2 【主軸方向と交差軸方向】 主軸方向とは、display: flex;を付与して横並びにした要素が並ぶ方向です。(初期値は水平方向) 交差軸方向とは、主軸に直角に交わる方向です。(初期値は垂直方向) 【 align-itemsプロパティ】 「align-items: 〇〇;」といった形で、display: flex;と併せて使用します。交差軸方向(初期値は垂直方向)の配置の詳細を決めることができます。 「display: flex;」を付与した親要素に「align-items: 〇〇;」をかけると、垂直方向の配置を調整できる。 組み合わせ 説明 align-items: flex-start; 上揃え align-items: flex-end; 下揃え align-items: center; 中央揃え 【flex-directionプロパティ】 要素の主軸方向や並び順を変更するには「flex-directionプロパティ」を使用します。 「display: flex;」を付与した親要素に「flex-direction: 〇〇;」をかけると、要素の並び順・方向を変えることができる。 組み合わせ 説明 flex-direction: row; 左から右に並べる flex-direction: row-reverse; 右から左に並べる flex-direction: column; 上から下に並べる flex-direction: column-reverse; 下から上に並べる ボックスモデル ボックスは以下の図のような、「content」、枠をつける「border」と、内側の余白「padding」、外側の余白「margin」から成り立っています。それぞれ、上下左右の４辺に分けることができ、個別にCSSを適用し、幅や色などを指定できます。 【borderプロパティ】 「要素の境界線の幅や色」を変更できます。 #使用方法 border: 太さ スタイル 色; 上記の書き方をすることで、ボーダーの太さ・スタイル・色をまとめて指定できます。 スタイルには、solid（1本線）やdouble（2本線）などがあります。 .text { border: 1px solid white; } 【paddingプロパティ】 箱の「内側」に余白を作成します。 余白の大きさは、「px」で指定することができます。 指定方法 説明 padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定 padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定 padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定 padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定 【marginプロパティ】 箱の「外側」に余白を作成します。 指定方法 説明 margin: 1px; [上下左右] の内側の余白をまとめて1pxに指定 margin: 1px 1px; [上下][左右] の内側の余白をそれぞれ1pxに指定 margin: 1px 1px 1px; [上][左右][下] の内側の余白をそれぞれ1pxに指定 margin: 1px 1px 1px 1px; [上][右][下][左] の内側の余白をそれぞれ1pxに指定 margin-top: ; [上] の内側の余白を1pxに指定 margin: bottom; [下] の内側の余白を1pxに指定 margin: left; [左] の内側の余白を1pxに指定 margin: right; [右] の内側の余白を1pxに指定 margin: auto; 余白を自動で算出 要素の位置を指定する方法 【positionプロパティ】 positionプロパティとは指定した「要素の配置方法」を決めることができるプロパティです。 配置方法としては以下のような方法があります。 組み合わせ 説明 position: relative; 現在の位置を基準に相対的な位置を決める position: absolute; 特定の地点を基準に絶対的な位置を決める position: fixed; 要素を指定した位置に固定する 【top/right/bottom/leftトプロパティ】 positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができます。 記述の下に基準（上、下、右、左）の距離を指定します。 position: absolute; message{ position: absolute; top: 40px; left: 40px; } position: absolute; は他の要素の配置を無視し、左上に配置されます。topプロパティとleftプロパティにそれぞれ40pxを指定しているため、その分余白が残ります。 このように、「絶対位置」 では、HTMLの構造を無視した要素配置がされます。 position: relative; card{ position: relative; } 親要素に「position: relative;」を設定すると、子要素の基準は親要素の左上となり、「相対位置」をとります。 つまり、親要素に「position: relative;」を設定し、 子要素に「position: absolute;」を記述することで、 子要素は親要素の範囲を基準に移動することになります。 【リセットCSS】 リセットCSSとは、各ブラウザに「デフォルトで設定されているCSSを打ち消す役割」をもったCSS。 【viewport】 viewportとは「ブラウザで表示されている領域」を表します。 例えば、PCのブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。 【vh】 vh（viewport height）は、viewportの「高さ（height）に対する割合」のことを指します。1vh と指定した場合は、ブラウザで表示されている高さの 1% です。 /* ブラウザで表示されている高さが、1000pxの場合 */ .hoge { height: 10vh; => 100px　　 (1vh　= 1%) } 【vw】 vw（viewport width）は、viewportの「幅（width）に対する割合」のことを指します。1vwと指定した場合は、ブラウザで表示されている幅の1%です。 /* ブラウザで表示されている高さが、800pxの場合 */ .hoge { width: 10vh; => 80px　　 (1vw　= 1%) } 最後に 以上になります。 長くなりましたが、CSSの基礎知識はまだまだあります。 今後も学習した内容は更新していきたいと思います。 学習頑張りましょう！！

HTML・CSSでコーディングしている際、img要素下に謎の余白が出てくることってありませんか？ これは、img要素にvertical-align: middle;を設定すれば解決します。 でも、 そもそもなぜこのような現象が起こっているのか なぜこれで解決するのか について理解している方は少ないのではないでしょうか。 この記事ではその辺りについて解説していきます。 img要素下に余白ができるってどういうこと？ 例えば、div要素の中にimg要素を入れるHTMLがあるとします。(実際のコードはこちら) HTML <div class="outer-box"> <img src="https://drive.google.com/uc?export=view&id=1LJA0-Kgs6oqGkt-M5magSgspj6SpSPM2"> </div> これを表示すると以下のようになります。(わかりやすくするため、outer-boxの背景を赤にしてます) ↑画像の下の部分に 謎の余白 (赤い線)ができていますね。。 なぜこうなっているの？ なぜこうなっているかというと、２つのポイントがあります。 img要素はインライン要素である インライン要素は、デフォルトでvertical-align: baseline;が設定される vertical-align: baseline;を設定すると、画像の場合、ベースラインに画像が乗っかった形になります。 でも、なぜBaselineで揃わずに、下に余白ができるのでしょうか？ ここで重要なのが、font-sizeとline-heightです。 インライン要素のfont-sizeとline-heightの関係 インライン要素では、font-sizeとline-heightは以下のような感じになっています。 文字通り、font-sizeは文字の大きさ、line-heightは行間を指しています。 では、vertical-alignの値を変えると、それぞれどのようになるのでしょうか？ １個ずつみていきましょう。 vertical-alignがtopの場合 topの場合、もし画像の縦幅がline-heightよりも大きくなった場合は、下に要素が拡張されます。 つまり、画像に余白ができる余地がありません。 bottomやmiddleの場合でも同じような考え方になります。 vertical-alignがbottomの場合 bottomの場合は、もし画像の縦幅がline-heightよりも大きくなった場合は、上に要素が拡張されます。 こちらも、画像に余白ができる余地がありませんね。 vertical-alignがmiddleの場合 もし画像の縦幅がline-heightよりも大きくなった場合は、上下均等に要素が拡張されます。 こちらも、画像に余白ができる余地がないでしょう。 vertical-alignがbaselineの場合 baselineだと、もし画像の縦幅がline-heightよりも大きくなった場合、上には拡張されますが、下には拡張されません。 (baselineの上に乗っかっているだけなので) こうなると、ベースラインの下側は自然と空きますよね。 なので、画像下に余白ができてしまいます。 例えるなら、ブロックの上に写真を載せているようなもの ?:「vertical-alignをtopやmiddleにしたら余白が消えましたが、なぜでしょう」 と思う方も多くいらっしゃると思いますが、 個人的にはこれはむしろ逆で、「baselineを設定すると余白ができる」のほうが適切かなと思っています。 それは例えるなら、baselineというブロック塀の上に写真を載せているようなものでしょうか(笑 ブロックの上に載っている限りブロックは無くならないので、余白ができてしまう、と理解するといかがでしょう(伝わっていたら嬉しいです?) 参考 理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その2）Inline Layout─Frontrend Conference vertical-align－スタイルシートリファレンス

HTMLコーディングのときにとりあえずなにか入れておくためのもの。 動画 mp4 あんまり好きじゃないけどこれくらいしか見つからず。 もうちょっとかっこつけたフリーの動画はないものか。 YouTube 基本的に YouTube公式の動画を使えばいいけど、YouTuberの顔がどかーんと大きくサムネイルに使用されているものも多いのでこれが無難。 YouTube公式 - YouTube Music - YouTube がつくった、新しい音楽アプリ <iframe width="560" height="315" src="https://www.youtube.com/embed/IqKz0SfHaqI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Spotify ザ・ビートルズ - Let It Be (Remastered) <iframe src="https://open.spotify.com/embed/track/7iN1s7xHE4ifF5povM6A48" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> 画像 <img src="https://via.placeholder.com/500"> もう少し具体的な画像 placeholder.com のベタ塗り画像を嫌がるデザイナーやクライアントの方もいるため。 全体的に薄暗くてぼやーっとしてるのがやや難。 風景 <img src="https://picsum.photos/id/1050/500/500"> 人物 <img src="https://picsum.photos/id/64/500/500"> テキスト 英文 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia, blanditiis? Natus, debitis possimus accusamus sed repellat optio! Laborum cupiditate iusto laboriosam totam consectetur? Quibusdam in sint cupiditate repellendus, blanditiis a. 日本語 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

はじめに サイト模写を行っていた時に、li要素を横並びにする方法がわからなかったのでまとめました。 今回紹介する以外にも横並びにする方法はありますが、今回は私が調べて使ってみた方法について書いています。 li要素を横並びにする主な方法 float: left; inline-block化 float: left; li要素をfloat:leftで横並びにする li{ float: left; } このとき、li要素が浮くのでulにclearfixをする HTML <ul class="sample clearfix"> <li>hoge</li> <li>hoge</li> </ul> .clearfix::after{ content: ""; display: block; clear: both; } inline-block化 li要素をinline-block化する li{ display: inline-block; } このときli要素同士に余白ができるのでulでfont-size:0; liでfont-sizeを指定する ul{ font-size: 0; } li{ font-size: 13px; } おまけ：displayとは CSSのプロパティであり、要素の表示形式を決める displayには主に4種類ある block: 要素が横いっぱいに広がり、縦に並ぶ inline: 要素が平べったく横に並ぶ inline-block: 並びはinline,中身はblock none: 非表示 それぞれの特徴について(noneを除く) block inline inline-block 改行と並び 前後に改行が入る 横に並ぶ 横に並ぶ 幅・高さの指定 幅と高さが指定できる 幅と高さが指定できない 幅と高さが指定できる 余白の指定 margin,paddingが指定できる 左右のmargin,paddingが指定できる margin,paddingが指定できる text-align 指定できない 指定できる 指定できる vertical-align 指定できない 　指定できる 指定できる さいごに clearfixとクラスを指定するだけでよいのでfloat:left;のほうが使い勝手がよいと思った。 displayプロパティについても知ることができたので勉強になった。 参考

はじめに こんにちわ、dtakkiyです! あなたが上図の様なプログレスバーを作るとしたら、どのような実装をしますか？ 色々な実装方法が考えられますが、今回はtailwindcssのGridを使った方法を紹介したいと思います。 段階を踏みながら解説するので、順番に進めていけば誰でもプログレスバーを完成させることができると思います。 動作検証 以下の手順は、tailwindcss version 2.1にて確認しています。 tailwindcss tailwindcssの詳細については、下記ドキュメントを参照下さい。 tailwindcss docs tailwindcssの導入方法について tailwindcssの導入方法については、日本語のドキュメントを参照下さい。 tailwindcss installation 作成方法 以下が完成時のソースコードとなります。 <div className="font-mono"> <div className="p-4"> <div className="py-2 text-md font-medium">進行状況</div> <div className="grid grid-cols-12 h-5"> <div className="bg-blue-500 col-span-10 flex rounded"> <div className="bg-blue-100 w-1/5"></div> </div> <div className="col-span-2 ml-4">20%</div> </div> </div> </div> Step1. ブロックに分ける まずデザインから要素をブロックに分けていきます。 下図のブロックごとにラインを引いたイメージ図となります。 これをdiv要素で切っていきます。 画面 ソースコード <div className=""> <div className=""> <div className="">進行状況</div> <div className=""> <div className=""> <div className=""></div> </div> <div className="">20%</div> </div> </div> </div> Step2. バーをGridでわける デザインを見ると、どうやらバーの箇所はGridをつかって分割すると表現できるようです。 tailwindcssのGridは１つの要素を最大12分割まで指定することができます。 今回は、バーの部分に10、％表記の部分に2を割り当ててみました。 なおtailwind cssでは、背景色をbg-で指定します。今回は青色を指定しました。 画面 ソースコード <div className=""> <div className=""> <div className="">進行状況</div> <div className="grid grid-cols-12"> <div className="bg-blue-500 col-span-10"> <div className=""></div> </div> <div className="col-span-2">20%</div> </div> </div> </div> Step3. 現在の進行状況を追加する 幅を指定し、現在の進行状況を追加します。 tailwindcssでは、w-で幅を指定します。今回は20%なので、w-1/5を指定しました。 画面 ソースコード <div className=""> <div className=""> <div className="">進行状況</div> <div className="grid grid-cols-12"> <div className="bg-blue-500 col-span-10 flex"> <div className="bg-blue-100 w-1/5"></div> </div> <div className="col-span-2">20%</div> </div> </div> </div> Step4. 余白をつける このままですとdiv要素がくっついて見づらいので、適当に余白を追加します。 tailwind cssでは、マージンはm-、パディングはp-で指定します。 画面 ソースコード <div className=""> <div className="p-4"> <div className="py-2">進行状況</div> <div className="grid grid-cols-12 h-5"> <div className="bg-blue-500 col-span-10 flex"> <div className="bg-blue-100 w-1/5"></div> </div> <div className="col-span-2 ml-4">20%</div> </div> </div> </div> Step5. 装飾を施す 最後に文字の種類やサイズを指定して完成です。 tailwindcssでは、フォントの種類などは、font-、テキストのサイズなどはtext-で指定できます。 画面 ソースコード <div className="font-mono"> <div className="p-4"> <div className="py-2 text-md font-medium">進行状況</div> <div className="grid grid-cols-12 h-5"> <div className="bg-blue-500 col-span-10 flex rounded"> <div className="bg-blue-100 w-1/5"></div> </div> <div className="col-span-2 ml-4">20%</div> </div> </div> </div> おわりに いかがだったでしょうか？ 思ったよりも簡単にプログレスバーを実装ができたのではないでしょうか？ tailwindcssを使うと、シンプルな記述で様々な表現が可能になります。

どうも7noteです。疑似要素でテキストの横にアイコンを付けると微妙に位置がズレてしまう場合の対処法について解説 このように、テキストの前にアイコンを付けると微妙にズレてしまう場合に、いい感じに上下中央にもっていく方法を解説します。 「ちょっとズレてしまった例」 ソース index.html <p>テキスト</p> style.css p::before { content: ''; width: 16px; height: 16px; background: url(icon.png) no-repeat; margin-right: 10px; display: inline-block; transform: translateY(3px); /* 上下方向の位置を微調整する */ } 解説 上下方向でズレがおこるので、transform: translateY()を使い、上下の位置を調整します。 それだけですね、簡単です。 まとめ position指定で位置を相対位置に指定する方法もありますが、単純にテキストの前にアイコンを設置するだけであれば、beforeを使った今回の方法が一番簡単かなと思います。 imgにして画像で設置する方法もありますが、個人的には疑似要素を使ったこの手法がオススメです。htmlがスッキリするので。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

これは何 フリーグラデーションっぽいグラフィックが使われる機会が増えているので、CSSだけでそれっぽい背景を作る方法をまとめました なお、あくまで「それっぽい」です よりリッチな表現を求めたい場合は素直にグラフィック制作ソフトで作った方が良いと思います また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります 完成品 リポジトリとGitHub Pages この記事を書くために書いたコードは全て公開しています。 実際の見た目はGitHub Pagesからどうぞ。 作り方 まずは用意したい色の数だけdivでも用意します。 <body> <div class="gradient-container"> <div class="color1"></div> <div class="color2"></div> <div class="color3"></div> <div class="color4"></div> <div class="color5"></div> <div class="color6"></div> <div class="color7"></div> </div> </body> そして用意したdivに色を指定し、positionで良い感じに配置します。 .gradient-container { height: 100vh; overflow: hidden; position: relative; width: 100%; } .color1 { background-color: #6d83f3; height: 200vmax; left: 45vmax; position: absolute; top: -4vmax; width: 64vmax; } .color2 { background-color: #4d38ce; border-radius: 50%; height: 38vmax; left: 84vmax; position: absolute; top: -28vmax; width: 38vmax; } .color3 { background-color: #ee5555; border-radius: 50%; left: 45vmax; height: 100vmax; position: absolute; top: 19vmax; width: 67vmax; } .color4 { background-color: #ffbe82; height: 100vmax; left: -13vmax; position: absolute; top: 20vmax; width: 83vmax; } .color5 { background-color: #cdfcff; border-radius: 50%; height: 83vmax; left: -20vmax; position: absolute; top: -30vmax; width: 83vmax; } .color6 { background-color: #69c0ff; height: 64vmax; left: -16vmax; position: absolute; top: -6vmax; transform: rotate(-8deg); width: 30vmax; } .color7 { background: linear-gradient(to top, #febcff 20%, rgba(254, 202, 255, 0) 100%); top: 8vmax; filter: blur(8vmax); height: 50vmax; left: -12vmax; position: absolute; transform: rotate(-30deg); width: 100vmax; } 現時点ではこんな感じ。 ポイントは以下かなと思っています。 CSSだけで作る以上表情が単調になりがちなので、少しでも要素が複雑に見えるような工夫です。 円と四角を両方使う いくつかの要素は斜めで配置する 全部ベタ塗りではなく、透明にグラデーションするような塗りのものも用意する 更に、それぞれの要素にfilter: blur()をかけます。 .color1 { background-color: #6d83f3; height: 200vmax; + filter: blur(3vmax); left: 45vmax; position: absolute; top: -4vmax; width: 64vmax; } .color2 { background-color: #4d38ce; border-radius: 50%; + filter: blur(5vmax); height: 38vmax; left: 84vmax; position: absolute; top: -28vmax; width: 38vmax; } .color3 { background-color: #ee5555; border-radius: 50%; + filter: blur(3vmax); left: 45vmax; height: 100vmax; position: absolute; top: 19vmax; width: 67vmax; } .color4 { background-color: #ffbe82; + filter: blur(12vmax); height: 100vmax; left: -13vmax; position: absolute; top: 20vmax; width: 83vmax; } .color5 { background-color: #cdfcff; border-radius: 50%; + filter: blur(3vmax); height: 83vmax; left: -20vmax; position: absolute; top: -30vmax; width: 83vmax; } .color6 { background-color: #69c0ff; + filter: blur(12vmax); height: 64vmax; left: -16vmax; position: absolute; top: -6vmax; transform: rotate(-8deg); width: 30vmax; } .color7 { background: linear-gradient(to top, #febcff 20%, rgba(254, 202, 255, 0) 100%); top: 8vmax; + filter: blur(8vmax); height: 50vmax; left: -12vmax; position: absolute; transform: rotate(-30deg); width: 100vmax; } 一律でblur()をかけるとこれまた表情が単調になるので、要素によって値の大小を変えます。 あとは文字でも置いてあげれば、最初に貼った画像と同じ見た目が出来上がりです。