- 投稿日：2021-03-21T23:27:14+09:00
tailwindcss 使用してわかったこと (tailwindcss + stylus)
結論
tailwindcss + stylusしんどい。
以下リストに当てはまる方にみていただきたいです。
- tailwindcssとsassやらstylusなにを組み合わせようか悩んでいる方
- tailwindcss + stylusを使っているけどなんか詰んだ方
使用環境
Vue CLI 4.5.11
tailwindcss 2.0.2なにがきつかったか
実際に使ってみて、きつかった点をアウトプットしてみました。
1.stylusじゃない（え？）
stylusの利点といえば、
:(コロン);(セミコロン){}が不要なので記述が楽という点ですよね。example.css//cssパターン .example { width: 50%; height: 50%; }example.styl//stylusパターン .example width 50% height 50%上記コードは一緒 exampleクラスに対して
横幅50%縦50%を指定しています。tailwindcssをstylusと組み合わせて書くと以下のようになります。
Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2; } } </style>stylusを用いてtailwindcssの
utility classをセットする際は@cssというものを定義して、その下にスタイルを設定していきます。
{}がないとダメです。見た目は完全にstylusではないですね。2.
@cssを回避できない実は
@cssを使わず記述が通るパターンがあります。Example.vue<style lang="stylus"> .example @apply w-1/2 h-1/2; </style>お！いけるやん！なるのですが使えないパターンがあります
Example.vue<style lang="stylus"> .example @apply w-1/2 h-1/2 focus:w-1/4; </style>focusは使用できません。
Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2 focus:w-1/4; } } </style>@cssをつけないと
3.メディアクエリ
tailwindcssにおけるメディアクエリの指定の仕方は３パターンほどあると思います。
その中でstylusとうまくやっていける方法をみていきます。1.
@screen
- ダメなパターン
@screenはネストさせることができない。。Example.vue<style lang="stylus"> @css{ .example { @apply w-1/2 h-1/2; @screen sm { @apply w-1; } } } </style>
@screenを使うのであれば以下のようにするといけます。Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2; } @screen sm { .example { @apply w-1; } } } </style>2.
@media
@mediaはネストの場合も使用することができます。
- ネスト
Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2; } @media (min-width: theme('screens.sm')) { .example { @apply w-1; } } } </style>
- ネストなし
Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2; } @media (min-width: theme('screens.sm')) { .example { @apply w-1; } } } </style>冗長感が否めないですね。
Breakpoint prefix
utility classに対してBreakpoint prefixをしようすると指定したBreakpointでスタイルを適用させることができます。Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2 sm:w-1; } } </style>
sm:というものがBreakpoint prefixにあたります。
いまは同列で扱っているのですが以下のようにもできます。Example.vue<style lang="stylus"> @css { .example { @apply w-1/2 h-1/2; @apply sm:w-1; } } </style>わざわざ二列にする必要なくね？？ってなると思いますが、例えば以下のようなパターンだとメリットを感じれると思います。
Example.vue<style lang="stylus"> @css { .example { @apply pt-0 pr-0 pl-0 pb-0 rounded-full focus:outline-none focus:ring-2 focus:bg-green-primary sm:mr-0 sm:ml-auto sm:rounded sm:sticky sm:row-start-1 sm:col-start-4 sm:col-end-5 sm:max-w-13 sm:w-full; } } </style>上記コードだと長くて追うのがきついです。。
なので以下のように2行にすると多少はすっきりしますよねExample.vue<style lang="stylus"> @css { .example { @apply pt-0 pr-0 pl-0 pb-0 rounded-full focus:outline-none focus:ring-2 focus:bg-green-primary; @apply sm:mr-0 sm:ml-auto sm:rounded sm:sticky sm:row-start-1 sm:col-start-4 sm:col-end-5 sm:max-w-13 sm:w-full; } } </style>メディアクエリを使用するならBreakpoint prefixが一番良さそうな気がしてきます。
おわりに
以上がtailwindとstylusを組み合わせて使うのしんどい話でした。
まだ使ってみてそんなに時間が経っているわけではないのでなにか他にstylusメリットデメリットがあればコメントしていただけますと幸いです！
- 投稿日：2021-03-21T21:49:03+09:00
ペライチで追っかけボタンを作成する（要レギュラープラン）
やりたいこと
スクロールしてもずっと画面の下にくっついてくる例の緑っぽいボタン！
前提
ペライチのレギュラープランが必要です
やること
1.htmlブロック要素を追加
ブロックの挿入 > HTML埋め込み
※[link]は任意のURLに付け替え<div id="float-div"> <a href='[link]' target="_blank" >追っかけボタン</a> </div>2.JS/STYLEの追加
ページ情報埋め込み > headタグ内の埋め込み
<style> #float-div { width: 200px; height: 60px; position: fixed; right: 7vw; bottom: 3vh; background: #56C500; opacity: 0.8; border-radius: 5px; } #float-div a { display: block; position: absolute; margin: 0 auto; top: 25%; text-align: center; width: 100%; text-decoration: none; font-size: 18px; font-weight: bold; color: #fff; } </style>
- 投稿日：2021-03-21T12:41:06+09:00
要素の間に幅を作る
本日記事にしたいこと。
・要素の境界線の設定方法を理解すること
・要素の外側の余白の設定方法を理解すること
・要素の内側の余白の設定方法を理解することHTML/CSSでは、ブロックレベル要素を積み木や箱として考えている。
このことをCSSのボックスモデルと言いう。■ボックスモデル
ボックスは「content」、枠をつける「border」と、内側の余白「padding」、外側の余白「margin」から成り立っている。それぞれ、上下左右の４辺に分けることができ、個別にCSSを適用し、幅や色などを指定できる。
borderについて
■borderプロパティ
要素の境界線の幅や色を変更できる。
border: 太さ スタイル 色;とすることで、ボーダーの太さ・スタイル・色をまとめて指定できる。スタイルには、solid（1本線）やdouble（2本線）などがある。paddingについて
■paddingプロパティ
箱の内側に余白を作成赤る。余白の大きさは、pxで指定できる。
指定方法 説明 padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定 padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定 padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定 padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定 marginについて
■marginプロパティ
箱の外側に余白を作成する。
指定方法 説明 margin: 1px; [上下左右]の余白をまとめて1pxに指定 margin: 1px 1px; [上下][左右]の余白をそれぞれ1pxに指定 margin: 1px 1px 1px; [上][左右][下]の余白をそれぞれ1pxに指定 margin: 1px 1px 1px 1px; [上][右][下][左]の余白をそれぞれ1pxに指定 ちなみに、padding、marginは上下左右一定方向だけ指定することが可能。
margin-top、margin-bottom、margin-left、margin-right
autoという値を用いると、余白を自動で算出することもできる。ボックスモデルの考え方を用いることで、枠線・内側の余白・外側の余白を設定することができる。
これらは全てブロックレベル要素のみ設定できる。インライン要素には、設定できない。
厳密には、インライン要素をボックスモデルとして扱う手段はあるが、ここでは触れないようにする。margin, paddingの2つはどのように使い分け方
端的に言えば、要素の背景色を含めて余白を取りたいときはpadding, 背景色を含めたくない場合はmarginを利用する。デザインによってどちらを使うかは変わってくる。
