[1] Tailwind CSSを使うには CDNをheadタグに追加する index.html <script src="https://cdn.tailwindcss.com"></script> index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> // 追加する <script src="https://cdn.tailwindcss.com"></script>rel="stylesheet"> </head> [2] 文字の色を変更する text-[color] index.html <h1 class="text-blue-700">TailWindCSS</h1> <a href="" class="text-black">リンク</a> [3] 文字の配置 text-〇〇 index.html // 右寄せになる <h1 class="text-right">TailWindCSS</h1> // カーソルを乗せると右寄せになる <h1 class="text-left hover:text-right"">CSS</h1> [4]アンダーライン系 アンダーラインと取り消し線 index.html // decoration-[color] で線の色を変更できる <p class="underline decoration-slate-50">アンダーライン</p> <p class="line-through ">取り消し線</p> アンダーラインの装飾 index.html <p class="underline decoration-solid"> 普通の線</p> <p class="underline decoration-double">二重線</p> <p class="underline decoration-dotted">点線</p> <p class="underline decoration-dashed">破線</p> <p class="underline decoration-wavy"> 波線</p> アンダーラインの太さ decoration-[数字]で線の太さを変更できる index.html // text-2xlで文字サイズを大きくしています <p class="text-2xl underline decoration-solid decoration-4">普通の線</p> <p class="text-2xl underline decoration-solid decoration-3">普通の線</p> <p class="text-2xl underline decoration-solid decoration-2">普通の線</p> <p class="text-2xl underline decoration-solid decoration-1">普通の線</p> [5]フォントファミリー index.html <p class="font-bold">TailwindCSS</p> [6] 文字の大きさ index.html <p class="text-sm">TailwindCSS</p> <p class="text-base">TailwindCSS</p> <p class="text-lg">TailwindCSS</p> <p class="text-xl">TailwindCSS</p> <p class="text-2xl">TailwindCSS</p> <p class="text-5xl">TailwindCSS</p> <p class="text-8xl">TailwindCSS</p> <p class="text-9xl">TailwindCSS</p> [7] 文字の太さ index.html //text-2xlで文字を大きくしています <p class="text-2xl font-light">TailwindCSS</p> <p class="text-2xl font-normal">TailwindCSS</p> <p class="text-2xl font-medium">TailwindCSS</p> <p class="text-2xl font-semibold">TailwindCSS</p> <p class="text-2xl font-medium">TailwindCSS</p> <p class="text-2xl font-bold">TailwindCSS</p> [8] 文字と文字の間隔 index.html //text-2xlで文字を大きくしています <p class="text-2xl tracking-tight">TailwindCSS</p> <p class="text-2xl tracking-normal">TailwindCSS</p> <p class="text-2xl tracking-wide">TailwindCSS</p> index.html //間隔を狭めたりもできる -tracking-[数字] <p class="text-2xl -tracking-5">TailwindCSS</p> [9] 行の高さ index.html <p class="leading-10">TailwindCSSの勉強をしています。....</p> <p class="leading-loose">TailwindCSSの勉強をしています。....</p>
本記事の内容 タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。 （理解が間違っていたら教えてほしいです） p209「potisionメソッドのrelativeとabsoluteがよくわかんない」 参考URL「CSSのposition:absolute;とは？要素を思いのままに配置する方法」 https://www.sejuku.net/blog/53016 参考書では、 post-infoクラスにposition: relative;を設定し、 post-dateにposition: relative;としている。 まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。 potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。 （のかな？） p210,215「displayメソッドのblockって何？」 参考URL「【初学者必見】displayについて知ろう！」 https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e5%88%9d%e5%ad%a6%e8%80%85%e5%bf%85%e8%a6%8b%e3%80%91display%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%9f%a5%e3%82%8d%e3%81%86%ef%bc%81/ 親子関係の整理 親：news-contentsでdispaly:flex; 子：post-dateでdisplay:block この関係は、p要素の中にスパン要素「2019」が入っているのでこのままだと横並びになる。 今回は、青丸の中に上下に日付と年を入れたいのでspan要素をblockにすることで縦並びなるようにした。 sub-menuのdispaly:blockの意図 元々li要素にしているので縦並びだが、block要素にしてクリックした時の範囲を文字のみから文字が含まれるブロックに広げている。クリックしやすい。 →クリックするやつはブロックにした方が良いのだろうなぁ。 p211「font-weight:normal」にする理由 参考URL「h1タグの太字をやめる方法」 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1484134829 h要素はデフォルトが太字（bold）だから、太字解除のため p213「paddingで(0 , 8px , 8px)ってある時の上下左右の指定はどうなるの」 参考URL「スタイルシートリファレンス padding」 http://www.htmq.com/style/padding.shtml 値を3つ指定した場合： 記述した順に[上][左右][下]のパディングになります。 →へ〜 以上。
以下の記事を参照して頂ければと思います ※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です
背景 フロント実装にてクリック契機等で既存画面をグレーアウトして新たな要素を出す仕組みを書いたのでその備忘録も兼ねて。 単純にモーダル機能としてだけであればBootstrapで事足りるのですがそれだと少し痒いところに手が届かないよって方向けに。。 実装例 ボタンクリックで背景グレーアウト→画像表示 Grayout.vue <template> <b-button @click="display" variant="primary" class="btn">表示</b-button> <div id="grayout" v-show="showFlag"> <div id="contents"> <!-- コンテンツを記載 --> <img id="image" :src="imgUrl"/> </div> </div> </template> <script> export default { data () { return { imgUrl: '', showFlag: false } }, methods: { display () { let random = 0 + Math.floor( Math.random() * 3 ); if (random == 0) { // 大吉 this.imgUrl = 'https://3.bp.blogspot.com/-vQSPQf-ytsc/T3K7QM3qaQI/AAAAAAAAE-s/6SB2q7ltxwg/s1600/omikuji_daikichi.png' } else if (random == 1) { // 吉 this.imgUrl = 'https://2.bp.blogspot.com/-27IG0CNV-ZE/VKYfn_1-ycI/AAAAAAAAqXw/fr6Y72lOP9s/s800/omikuji_kichi.png' } else { // 凶 this.imgUrl = 'https://4.bp.blogspot.com/-qCfF4H7YOvE/T3K7R5ZjQVI/AAAAAAAAE-4/Hd1u2tzMG3Q/s1600/omikuji_kyou.png' } this.showFlag = true } } } </script> Grayout.css <style> #grayout{ z-index:1000; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } #contents{ z-index:1001; } z-indexでコンテンツの出す層を設定できます。(数が大きい方が前面に表示) 様々な要素が重なり合う場合の厳密な制御が可能になりますが、1,2,3...で刻むよりは1,10,100,1000...とする方が後々改修する時に楽だったり単純にパッと見でわかりやすいのでおすすめ。
僕が子ども向けのブラウザゲームを作成する中でのことです。 操作感を向上させるため、ボタンがタップに反応する領域を、ボタンの視覚的な領域よりも広くしました。 その結果悩まされたのが、タップ時に表示される、四角い影です。 CSSであれば、以下のように書けば、この影が消えます（一般化のため、aタグにしてあります）。 a { -webkit-tap-highlight-color:rgba(0,0,0,0); } しかし、Tailwindではこれに対応するクラスが存在しません。 対応策としては、tailwind.config.jsに、以下のように記述してください。 const plugin = require('tailwindcss/plugin') module.exports = { // ... plugins: [ plugin(function ({ addUtilities }) { addUtilities({ '.no-tap-highlighting': { '-webkit-tap-highlight-color': 'rgba(0,0,0,0)', } }) }) ] } これで、no-tap-highlightingというクラスを使用すれば、タップ時に四角い影が表示されなくなります。 参考 https://tailwindcss.com/docs/adding-custom-styles https://serversideup.net/using-tailwindcss-to-design-your-mobile-app/
この記事の概要 Web サイトのスタイリングをするにあたり、いつの世も CSS フレームワークは使われています。 技術選定の基準が持てず苦労している人を見かけがちなので、私が見ているポイントを記事にしてみました。 この記事もあくまで「決定版」と言えるほどの内容ではありません。 しかしそれでも誰かの役に立てるかもしれないと思ったため、投稿してみます。 説明の都合上、具体的なフレームワーク名を出している場面もありますが、あくまで「私だったらこのアプローチを採択する/しない」の話です。 「これを使うべき/使ってはいけない」の主張ではありませんのでご了承ください。 見ているポイント 要素自体の見た目とレイアウトが分離できているか？ 便宜上、自分自身の見た目に関するスタイル（background-colorやfont-sizeなど）をPresentational style、 ページ内での配置や関係性のスタイル（display: flex;やmarginなど）をLayout styleと呼ぶとして、以下のどれかが好ましいです。 Presentational style用のクラスとLayout style用のクラスが分かれており、任意の要素に複数のクラスを付与できる Presentational style用のコンポーネントとLayout style用のコンポーネントが分かれている Presentational style用のコンポーネントがあり、後からLayout styleを注入できる これらの観点はかなり大事にしています。 例えば Bootstrap のAlertsはPresentational styleとLayout styleががっちり結びついていて、少し使いづらそうです。 以下が実際のコードなのですが、コンポーネントにmargin-bottomが指定されているのに注目してください。 .alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; /* ←これ */ border: 1px solid transparent; border-radius: 0.25rem; } たまたま余白が1remだったら良いのですが、そうでない場合も多いでしょう。 CSS では打ち消し回数が多くなればなるほど事故が起きるので、最初からこうやって指定されていると身構えてしまいます。 例外的なスタイルを無理なく適用できるか？ いきなり例外の話をしてしまいますが、フレームワークにつらみを感じるのは例外的なスタイルを組んでいる場面ではないでしょうか？ フレームワーク側の詳細度が高過ぎて!importantをつけないとスタイルを適用できない JavaScript で値が動的に挿入されていて、どこから制御されているのか見えづらい 上記のようなパターンだと、オーバーライドすべきプロパティは分かっているのに諦めざるを得ない……なんてこともあるでしょう。 誰だって好きで負債を作りたい訳はありません。 「例外を作らず、フレームワークの way に乗って開発すべき」は間違いないですし、日々の開発ではそう努力すべきです。 しかし選定時は「もし例外的なスタイルが生まれてしまったら」を考慮に入れておいた方がベターだと考えています。 HTML 要素そのものにスタイルを当てすぎていないか？ reset や normalize の範疇を超えてのスタイルが当たっているかを見ます。 例えば h タグは文書構造と見た目が完全には紐付かない場合も少なくないはず。 毎度打ち消すのは面倒なので、あくまで「クラスに対応するスタイル」を提供してくれるフレームワークの方が好みです。 ただし、そもそも Classless CSS として提供されているものは別です。 通常の CSS フレームワークとは必要なタイミングや役割が違いますから、ここではあくまで Class 有りのフレームワークでの話に限定した観点です。 Classless CSS とは例えば以下のようなもので、CSS ファイルを読み込みさえすれば素の HTML を書くだけでそれなりに見た目が整います。 マークアップが過度にフレームワークに囚われないか？ スタイルとマークアップは密接な関係にありますから、ある程度はフレームワークの作法に則るしかありません。 しかし例えば「既定されたコードから、ネストを 1 段階も浅くも深くもできない」くらいガチガチになっていると結構しんどいです。 レスポンシブに対応するためなど、複雑めなマークアップ強いてくるフレームワークも見かけます。 スクラッチしたらもっと簡単じゃん！と思いながらフレームワークを使うのはかなり不毛なのでおすすめしません。 なおこの記事の主旨から外れますが、明らかなつらみが見えているときは「フレームワークを使わない」判断も候補に挙げられると楽になると思います。 素の CSS の書き方に近いか？ 元も子もない話ですが、何の技術を使おうが最終的には CSS にコンパイルされます。 そのため、元々の CSS から離れれば離れるほど不都合が起きやすいはず。 （うっかりプロパティの名前を間違って覚えるとか、既存のコードを参考にしづらいとか、大きな問題ではないかもしれませんが……） 些細な話ながらも「最終候補に残った 2 つのうち、どちらが良いか迷うなあ」くらいの時期には意識します。 例えば Tailwind CSS では、ユーティリティクラスである都合上微妙に名前が違うものも多いです。 justify-content: space-between;がjustify-betweenというクラスで表現されているなど、些細な話ですが……。 通常の CSS の方がすぐに浮かぶ身としては、Tailwind 用の方言に変換するのに若干のラグを感じます。 優劣をつけたい訳ではありませんが、同じjustify-content: space-between;を表す際 Bulma はis-justify-content-space-betweenです。 個人的にはオリジナルに略されるよりは正式で長い方が好みです。 おまけ：z-index にとんでもない値を使っていないか？ 非常に地味＆限定的な話ですが、一応記載します。 フレームワークというよりも、モーダルライブラリなどを選ぶ際の話に近い気がしますが……笑 私が出会ったことのあるものだとz-index: 2147483003;というとんでも無い数が使われておりげんなりしました。 なおz-indexの最大値は2147483647で、限界すれすれまで数値を上げていることも含めての感情です。 まとめ 要素自体の見た目とレイアウトが分離できているか？ 例外的なスタイルを無理なく適用できるか？ HTML 要素そのものにスタイルを当てすぎていないか？ マークアップが過度にフレームワークに囚われないか？ 素の CSS の書き方に近いか？ おまけ：z-index にとんでもない値を使っていないか？
