What's New Qiita

20210106のCSSに関する記事は12件です。

  • 投稿日：2021-01-06T23:36:40+09:00

今更だけど、activeセレクターとhoverセレクターの違いについて

はじめに

　コピペしていて気づかなかった、CSSのセレクターについて、自分が忘れないように記録しておく。

:activeセレクターと:hoverセレクターの違いについて

:activeはクリックされた瞬間にスタイルを適用させるもの。
:hoverはマウスポインターが重ねられたときにスタイルを適用させるもの。

ただし、両方とも適用させたい場合は、スタイルが上書きされないように、:activeセレクターは後ろに記述する。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T23:12:34+09:00

【フロントエンド学習③】CSSの詳細度について

詳細度とは？

ざっくり説明すると「CSSが適用される優先度」の順序のこと。
詳細度が高い方が優先してCSSが適用される。

そもそもCSSが適用される順序って？

  • あるセレクタを同じ方法で指定した場合、CSSは後に書いたものが優先されます。
  • 異なる方法で指定した場合、詳細度が高い方が優先されます。

もうちょい詳しく

ここで言う「詳細度が高い」とは

より詳しくセレクタを指定している = 詳細度が高い
言い換えると「より絞ってセレクタを指定している」ほうが詳細度が高い、ということになる。

よくわからないんだけど？

単一の指定方法の場合だと、

  1. HTMLタグに「style属性」を用いて記述されたスタイル(てすと3の部分)
  2. idを指定して記述されたスタイル(てすと2の部分)
  3. classを指定して記述されたスタイル(てすと1の部分)
  4. HTMLタグ名を指定して記述されたスタイル(てすと0の部分)
  5. 親要素を指定して記述されたスタイル(てすとの部分)

番号の小さい方が詳細度が高くなり、優先的に適用されます。

デモ

See the Pen BaLrwVg by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

複数の方法で指定した場合はどうなる？

結論としては、指定に使われているidやclass等が多い方が詳細度が高い となります。

具体的には、

  1. idを使って指定されているスタイル
  2. classをより多く使って指定されているスタイル
  3. idやclassが同じ数だった場合、より多くセレクタで指定されているスタイル

こちらも番号の小さい方が詳細度が高くなります。

デモ

See the Pen RwGMjOr by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

上記の1~3が全て同じだった場合、後に書かれたスタイルが適用されます。

例外

style.css
p {
  color: red; !important
}
p {
  color: blue;
}

上記の例では、通常pタグの内容は青色になるはずですが、
「!important」をつけることで強制的に最優先に適用することができます。

ただし、多用すると何が最優先なのかわからなくなる恐れがあるので、
使用するのは非推奨となっているようです。

おわり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T19:15:11+09:00

【CSSアニメーション】transitionのイージングにease-inやease-outを適当に設定するのはやめましょう

はじめに

この記事は普段transition-timing-functionの値に
なんとなくease、ease-in、ease-out、ease-in-outを設定している方に読んでいただきたい内容になります。

アニメーションが苦手という方も、
この記事で紹介する6つのポイントを抑えることで
普段気づいていたけど対処法がわからなかったアニメーションの違和感の解消方法を学んでいただければ幸いです。

イージングの種類や性質

まずはCSSで使える代表的なイージングの種類と、イージングの強弱について説明します。

CSSで使える代表的なイージングの種類

代表的なイージングは全部で25パターンあります。
とても多い印象を受けたかと思いますが、
イージングとしては、実は8種類だけです。
また、本記事は下記のイージングを元に説明していきます。
何となく、「これだけあるのかー。」くらいで見てください。
※cubic-bezier（キュービックベジェ）の値などはひとまず覚える必要はありません。

easing.scss
$linear:         cubic-bezier(0.250, 0.250, 0.750, 0.750);

$easeInSine:     cubic-bezier(0.47,  0,     0.745, 0.715);
$easeOutSine:    cubic-bezier(0.39,  0.575, 0.565, 1    );
$easeInOutSine:  cubic-bezier(0.445, 0.05,  0.55,  0.95 );
$easeInQuad:     cubic-bezier(0.55,  0.085, 0.68,  0.53 );
$easeOutQuad:    cubic-bezier(0.25,  0.46,  0.45,  0.94 );
$easeInOutQuad:  cubic-bezier(0.455, 0.03,  0.515, 0.955);

$easeInCubic:    cubic-bezier(0.55,  0.055, 0.675, 0.19 );
$easeOutCubic:   cubic-bezier(0.215, 0.61,  0.355, 1    );
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1    );
$easeInQuart:    cubic-bezier(0.895, 0.03,  0.685, 0.22 );
$easeOutQuart:   cubic-bezier(0.165, 0.84,  0.44,  1    );
$easeInOutQuart: cubic-bezier(0.77,  0,     0.175, 1    );

$easeInQuint:    cubic-bezier(0.755, 0.05,  0.855, 0.06 );
$easeOutQuint:   cubic-bezier(0.23,  1,     0.32,  1    );
$easeInOutQuint: cubic-bezier(0.86,  0,     0.07,  1    );
$easeInExpo:     cubic-bezier(0.95,  0.05,  0.795, 0.035);
$easeOutExpo:    cubic-bezier(0.19,  1,     0.22,  1    );
$easeInOutExpo:  cubic-bezier(1,     0,     0,     1    );

$easeInCirc:     cubic-bezier(0.6,   0.04,  0.98,  0.335);
$easeOutCirc:    cubic-bezier(0.075, 0.82,  0.165, 1    );
$easeInOutCirc:  cubic-bezier(0.785, 0.135, 0.15,  0.86 );
$easeInBack:     cubic-bezier(0.6,  -0.28,  0.735, 0.045);
$easeOutBack:    cubic-bezier(0.175, 0.885, 0.32,  1.275);
$easeInOutBack:  cubic-bezier(0.68, -0.55,  0.265, 1.55 );

CSSの場合は、
transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
のように記述しますが、本記事はSCSSで記述することを前提で説明します。

上記のような変数をSCSSで記述すると
transition: opacity 0.3s $easeOutSine;
となります。

イージングの値も何が設定されているかわかりやすいですね。

イージングの強弱

イージングにはSine、Quad、Cubic、Quart、Quint、Expo、Circ、Backの8種類あり、
下記のようにSineが一番緩やかな変化となり、Expoにいくにつれてだんだん急激な変化となります。
この順番はとても重要です。しっかり覚えておきましょう。

Sine（もっとも緩やかな変化）
Quad
Cubic
Quart
Quint
Expo（もっとも急激な変化）

また、下記は特別なイージングです。

Circ（Expoよりもイージングの余韻が長い）
Back（一度バウンドするようなイージング）

個人的には簡易なバウンドはBackを使用しますが、
こだわりのあるバウンドを出したい場合は、CSS animationを利用します。
オノマトペでいうと「ト〜ン、トン、トトン」と言ったアニメーションなどです。
（CSS animationに関しては後日記事をUPDATEする予定です。）

イージングに関しては下記の参考サイトをご確認ください。
イージング関数チートシート

では本題に入っていきます。

心地良いアニメーションに近づくための6つのポイント

この6つのポイントはとても大切です。
これを意識することで、違和感のない心地良いサイトのベースが作れます。

opacity、colorには余計なイージングをつけない

ポイント：opacityやcolorには $linear か $easeOutSine をつけましょう。

心地悪さを感じやすい一つが、opacityやcolorに余計なイージングがかかっている場合です。
早速BadとGoodを紹介します。

See the Pen opacity_color by seiya kato (@mokichi) on CodePen.

A、B、Cのボタンのうち、どのボタンが心地悪いと感じましたか？

正解は「B」です。
心地悪いボタン「B」には $easeInOutQuart が設定されています。
ボタン「A」には $easeOutSine 、
ボタン「C」には $linear が設定されており、
それぞれdurationは 0.3s が設定されています。

ボタン「C」はイージングが無い$linearが設定されているため、体感はボタン「A」に比べてゆっくりに感じます。

このようにopacity、color、background-colorなどは、変化させるイージングを $linear か $easeOutSine にすることで自然に変化させることができます。

マウスオーバーでアニメーションを待たせない

ポイント：マウスオーバーのdurationは 0.25s〜0.45s

例えば、ボタンの色を反転させるようなアニメーションの場合、マウスオーバーしてからアニメーション完了までにかかる時間が長いと、ユーザーにとってアニメーションが終わるまで待たせている状態になります。

See the Pen duration_delay by seiya kato (@mokichi) on CodePen.

この、待たされるという感覚に気づく事は非常に大切です。

秒数に幅を持たせている理由としては $linear か $easeOutSine で体感速度が異なるためです。
気持ち遅い・早いと感じた場合はdurationを 0.05s ずつ増減してみると良いです。

ただ、すべてがこのdurationに収めないといけない。というわけではありません。
ここで意識することは、触れてみてユーザーが待たされている感覚があるかどうかという事です。

See the Pen delay_duration by seiya kato (@mokichi) on CodePen.

リンクAとリンクBの違いがわかりますか？
まずは各リンクに設定した値を見てみましょう。

リンクAのtransitionの設定
- テキストはopacity $linear 0.3s
- 連動するサムネイルのscaleアニメーションはtransform $easeOutCubic 1.8s

リンクBのtransitionの設定
- テキストとサムネイルのduration、easingはそれぞれ同じ値の$easeOutCubic 1.8s

AB共にサムネイルだけの値で見ると待たされているに当てはまります。

ただ、Aのマウスオーバーは、ユーザーとしては表示される文字に対しては待たされた感覚が無いため、
サムネイルの拡大アニメーションが続いていたとしても、不快には思わないのです。
一方リンクBの文字はゆったりと表示されていることがわかります。

もう一度マウスオーバーした時の文字のアニメーションを注視してみてください。
違いがわかるはずです。

マウスアウトも意識する

結論：マウスアウトのアニメーションも待たせないよう、別々のdurationを指定する

前述したマウスオーバーでアニメーションを待たせないでは、あくまでマウスオーバーのみにフォーカスしました。
左右のバナーを行き来すると、フォーカスアウトした画像がぬるっと動いていて気になります。

マウスアウト = フォーカスから外れる事です。
フォーカスから外れた要素は、目についてしまうアニメーションを避けるべきです。

See the Pen focus_duration by seiya kato (@mokichi) on CodePen.

ここでのポイントは、フォーカスアウトした要素は気にならない速度で元に戻すことです。
今回はtransition: transform 0.6s $easeOutCubic;という設定で余韻を多少もたせながらサムネイルを元のサイズに戻しています。

マウスオーバーでアニメーションを待たせないで紹介した、マウスアウトした後のサムネイルを少しだけ意識して見てみましょう。
マウスアウトしたサムネイルのアニメーションが気になってしまう事に気付くと思います。

transition allは使わない

ポイント：opacityやcolor系とtransform系はイージングを分ける

とてもよくあるパターンかと思います。
allは一括で設定することができてとても便利ですが、
opacityとtransformを同時に指定すると、違和感のあるアニメーションになりがちです。
今までまとめて記述している方は下記のように指定するようにしましょう。
カンマで区切って別々の指定をします。

transition: all 0.8s $easeOutQuint;
↓
transition: color 0.3s $easeOutSine, transform 0.8s $easeOutQuint;

下記のようにopacityやcolor系などの同じイージングを指定しても違和感のないものはallを指定しても問題はありません。

a {
  color: blue;
  background-color: blue;
  transition: all 0.3s $easeOutSine;
  &:hover {
    color: white;
    background-color: red;
  }
}

急激な変化のあるeaseInOutXxxxは使わない

ポイント：transform系はeaseOutXxxxをベースにする

easeInOutXxxxは波を打つようなイージングになりがちです。
スクロール時に下からコンテンツがせり上がるようなアニメーションにはeaseOutXxxxが自然なアニメーションになります。

See the Pen easeOutXxxxx by seiya kato (@mokichi) on CodePen.

ブレーキをかけたようなアニメーションにしたい場合はeaseInXxxxにすると「キュッ」と止まる印象になるため、案件によって使い分けます。

しっくりこない時はイージングを自作する

ポイント：InとOutのベジェ曲線をそれぞれ変える

$easeInOutClientのようにクライアント専用のイージングを作ることで、
オリジナルなイージングを設定します。

例えば、easeInは多少イージングをかけ、easeOutはかなり余韻をもたせたい。といったイージングは代表的なイージングには無いため、自作してしまったほうがサイトに合ったイージングを設定することができます。
自分はよくcubic-bezier.comというジェネレータを利用しています。

↓easeInは多少イージングをかけ、easeOutはかなり余韻をもたせたイージング
https://cubic-bezier.com/#.33,.01,.06,.99

まとめ

簡単ではありますがアニメーションのポイントを紹介しました。
説明した6つのポイントを意識することで、少なくとも違和感の無いアニメーションを実装できるようになれます。

まだまだ伝えたいことはたくさんあるので、この記事は少しづつアップデートしていきたいと思います。

一緒に感覚を備えていきましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T18:38:55+09:00

【CSS・JS】テキストの選択を解除する方法。（文字列の選択を禁止する方法）

ドラッグである要素を選択したときに、その中の要素が選択状態になってしまう。この文字列の選択状態を解除する方法。

例えば、テーブルのセルをドラッグで複数選択すると下図のように、セルの中のテキストが選択されて見づらい。

image.png

↓ 実現したいこと（文字列は選択しないようにする）

image.png

主な実現方法は以下２つ。１が圧倒的に簡単。２は参考程度に。

  1. cssでuser-selectプロパティの設定
  2. JacaScriptで選択解除


1. cssでuser-selectプロパティの設定

user-select: none;

対象の要素に上記を適用するとテキスト選択を解除できる。

コピペ防止でテキストの選択が全くできないページがあるが、その設定と同じ。

image.png

user-selectプロパティのその他オプション

user-selectプロパティは、none以外にも選択できる値がある。

値 概要 詳細
none 選択禁止 対象要素とその子孫要素の文章を範囲選択できなくする
all 全選択 どれか一つの文字を選択するとすべて選択する。
text テキスト選択可 デフォルトの状態
contain 要素の内部から選択 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定。
auto 要素の種類や親要素のプロパティにより変化 編集可能な要素の場合、使用値は containになる。親要素の user-select の使用値が all の場合、対象要素の使用値も all になる。など、

＞moz公式 user-select

▼user-select:all
image.png


2. JSで選択解除

以下処理を実行することで選択状態を解除できる。

const clearSelection = () => {
  //旧IE
  var sel
  if ( sel = document.selection ) {
      sel.empty();
  }
  //旧IE以外のブラウザ 
  else {
      //選択解除
      if (window.getSelection) {
          window.getSelection().removeAllRanges();
      }
      //入力中のテキストボックスの選択解除
      var activeEl = document.activeElement;
      if (activeEl) {
          var tagName = activeEl.nodeName.toLowerCase();
          if ( tagName == "textarea" ||
                  (tagName == "input" && activeEl.type == "text") ) {
              // Collapse the selection to the end
              activeEl.selectionStart = activeEl.selectionEnd;
          }
      }
  }
}

・document.selection

旧IE（IE９〜10）のみ。ユーザーが選択した文字列範囲を指す。
IE11以降はwindow.getSelection()を使用。

・window.getSelection()

ユーザーが選択した文字列範囲を指す。

if (window.getSelection){処理}は、選択範囲が存在するなら処理を実行。

・empty()

emptyメソッドは指定した要素の子要素を削除。対象の要素自体は削除しない。

・.removeAllRanges()

対象の選択範囲を解除する。
window.getSelection().removeAllRanges()ですべての選択範囲を解除。

・document.activeElement

テキスト入力中の要素を返す。
inputタグやtextareaタグ内を選択している場合に、選択中の要素がわかる。

取得したデータの中には、対象のノード名やテキストの何文字目を入力中かなどのデータが入っている。

・document.activeEl.nodeName.toLowerCase()

現在テキスト入力中のノード名（nodename）を取得し、小文字に変換（toLowerCase）する。

・activeEl.selectionStart = activeEl.selectionEnd

選択中のテキストをなしにする。（始まり＝終わりにする）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T16:15:12+09:00

ボタンをクリックして要素を非表示から表示に切り替える 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" name="Content-Style-Type" content="text/css">
    <title>Document</title>
</head>
<body>
    <h1 style="display: none;">サンプルタイトル</h1>
    <h2 style="display: none;">サンプルタイトル</h2>
    <button>ボタン</button>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $('button').click(function() {
            $('h1').toggle();
            $('h2').toggle();
        })
    </script>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T15:26:13+09:00

TailwindCSSでトランジションとメディアクエリをサクッとPhoenixフレームワークに導入・実装する

概要

TailwindCSSで、CSSトランジションとレスポンシブ対応のためのメディアクエリを、WebフレームワークPhoenixに導入・実装します。

tailwind.gif

TailwindCSS

flex, pt-4, text-center, rotate-90 などのCSSクラスを準備している「ユーティリティ・ファースト」のCSSフレームワークです。
モダンなWebサイトをすばやく構築できます。（公式より引用和訳）

Phoenix

膨大なアクセスやデータに対する高速処理、堅牢性に強みのあるプログラミング言語Elixir製のWebフレームワークです。

※ 本記事ではTailwindCSSをメイントピックにしているので、Phoenixについては以下の拙記事などご覧ください。

実行環境・バージョン

  • MacOS
  • VScode
  • TailwindCSS 2.0.2
  • Node.js 14.15.4
  • Phoenix 1.5.7
    • Elixir 1.11.2 (compiled with Erlang/OTP 22)

コードとセットアップ

Phoenixプロジェクトディレクトリ作成

任意の名前でディレクトリをつくって、その中に入ってmix phx.newを実行します。

terminal
$ mix phx.new . --app sample_app --no-ecto

$ mix deps.get && mix deps.compile

$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

TailwindCSSセットアップ

  • /assets内で、TailwindCSSと依存パッケージをインストール。
terminal
$ npm install --save-dev tailwindcss@2.0.2 postcss@8.2.2 autoprefixer@10.1.0 postcss-loader@4.1.0
  • postcss.config.jsを新規作成 & webpack.config.jsにpostcss-loaderを追加。
assets/postcss.config.js（新規作成）
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
assets/webpack.config.js
use: [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader',  // <-- add
  'sass-loader',
],
  • npxでtailwind.config.jsを生成。
terminal（`/assets`内で実行）
$ npx tailwindcss init

   tailwindcss 2.0.2

   ✅ Created Tailwind config file: tailwind.config.js
  • 最後に、CSS（SCSS）にインポート。
assets/css/app.scss（以下コードを追加）
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

フロントページにお試し実装

公式トップのプロフィールカードや、こちらのチートシートを元にして、お試し実装していきます。

lib/sample_app_web/templates/layout/app.html.eex
    <main role="main" class="container">
      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

      <!-- 追加ここから -->
      <section>
        <h1 class="text-center font-medium text-4xl">
          <%= gettext "team %{name}", name: "im" %>
        </h1>
      </section>
      <%= @inner_content %>
      <%= @inner_content %>
      <!-- 追加ここまで -->

      <%= @inner_content %>
    </main>
  </body>
  • 以下index.html.eexコード中にベタ書いているclassが、Tailwindの持つCSSクラスになります。
lib/sample_app_web/templates/page/index.html.eex（まるごと以下に書き換える）
<section class="my-8">
  <figure
    class="md:flex transition duration-500 ease-in-out bg-gray-100 hover:bg-indigo-200 transform hover:-translate-y-1 hover:scale-105 rounded-xl p-8 md:p-0"
  >
    <!-- プロフィール画像は`/assets/static/images/`に準備 -->
    <img
      class="w-32 h-32 md:w-56 md:h-56 rounded-full md:rounded-none mx-auto md:mx-0"
      alt="im image"
      src="<%= Routes.static_path(@conn, "/images/im.jpg") %>"
    >
    <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
      <p class="text-xl font-semibold">
        "Aenean eleifend, massa id scelerisque lacinia, odio elit blandit diam, at varius nisi turpis ut neque. Nam at consequat erat."
      </p>
      <figcaption class="font-medium">
        <div>
          <p class="text-purple-600">im</p>
        </div>
        <div>
          <p class="text-gray-500">Web Developer</p>
        </div>
      </figcaption>
    </div>
  </figure>
</section>
test/sample_app_web/controllers/page_controller_test.exs（任意）
  test "GET /", %{conn: conn} do
    conn = get(conn, "/")
    assert html_response(conn, 200) =~ "Welcome to Phoenix!"  # <-- delete
    assert html_response(conn, 200) =~ "team im"    # <-- add
  end
end

ここまでできたら、mix phx.serverでローカルサーバー起動して、お使いのWebブラウザでlocalhost:4000を確認してみましょう。

実装は以上になります。

補足（Tailwind CSS IntelliSense）

VSCodeのプラグインTailwind CSS IntelliSenseを導入すると、オートコンプリートやリンター機能のほか、TailwindCSSクラスをホバーして生CSSを確認できたりするのでオススメです。
hover_css.png

おわりに

TailwindCSSをPhoenixフレームワークにお試し導入しました。

BootstrapみたいにUIコンポーネントが用意されているものではないのですが（例えばbtn btn-primaryのように一発でUI部品を作れない）、とにかくカスタマイズ性に優れていてPhoenixとの親和性も良いと感じました。

また、TailwindCSSを導入することによって以下の効果が得られると感じています。

  • CSSまわりのコードがスッキリする。（特にメディアクエリまわり）
  • クラス名が直感的であり、お手軽にねらった効果を実装できる。

普段使いにも良さそうです。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T15:26:13+09:00

Tailwind CSSでトランジションとメディアクエリをサクッとPhoenixフレームワークに導入・実装する

概要

Tailwind CSSで、CSSトランジションとレスポンシブ対応のためのメディアクエリを、WebフレームワークPhoenixに導入・実装します。

tailwind.gif

Tailwind CSS

flex, pt-4, text-center, rotate-90 などのCSSクラスを準備している「ユーティリティ・ファースト」のCSSフレームワークです。
モダンなWebサイトをすばやく構築できます。（公式より引用和訳）

Phoenix

膨大なアクセスやデータに対する高速処理、堅牢性に強みのあるプログラミング言語Elixir製のWebフレームワークです。

※ 本記事ではTailwindCSSをメイントピックにしているので、Phoenixについては以下の拙記事などご覧ください。

実行環境・バージョン

  • macOS
  • VSCode
  • Tailwind CSS 2.0.2
  • Node.js 14.15.4
  • Phoenix 1.5.7
    • Elixir 1.11.2 (compiled with Erlang/OTP 22)

コードとセットアップ

Phoenixプロジェクトディレクトリ作成

任意の名前でディレクトリをつくって、その中に入ってmix phx.newを実行します。

terminal
$ mix phx.new . --app sample_app --no-ecto

$ mix deps.get && mix deps.compile

$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

TailwindCSSセットアップ

  • /assets内で、Tailwind CSSと依存パッケージをインストール。
terminal
$ npm install --save-dev tailwindcss@2.0.2 postcss@8.2.2 autoprefixer@10.1.0 postcss-loader@4.1.0
  • postcss.config.jsを新規作成しwebpack.config.jsにpostcss-loaderを追加。
assets/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
assets/webpack.config.js
use: [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader',  // <-- add
  'sass-loader',
],
  • npxでtailwind.config.jsを生成。
terminal
$ npx tailwindcss init

   tailwindcss 2.0.2

   ✅ Created Tailwind config file: tailwind.config.js
  • 最後に、CSS（SCSS）にインポート。
assets/css/app.scss（以下コードを追加）
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

フロントページにお試し実装

公式トップのプロフィールカードや、こちらのチートシートを参考にして、お試し実装していきます。

lib/sample_app_web/templates/layout/app.html.eex
    <main role="main" class="container">
      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

      <!-- 追加ここから -->
      <section>
        <h1 class="text-center font-medium text-4xl">
          <%= gettext "team %{name}", name: "im" %>
        </h1>
      </section>
      <%= @inner_content %>
      <%= @inner_content %>
      <!-- 追加ここまで -->

      <%= @inner_content %>
    </main>
  </body>
  • 以下index.html.eexコード中にベタ書いているclassが、Tailwindの持つCSSクラスになります。
lib/sample_app_web/templates/page/index.html.eex（まるごと以下に書き換える）
<section class="my-8">
  <figure
    class="md:flex transition duration-500 ease-in-out bg-gray-100 hover:bg-indigo-200 transform hover:-translate-y-1 hover:scale-105 rounded-xl p-8 md:p-0"
  >
    <!-- プロフィール画像は`/assets/static/images/`に準備 -->
    <img
      class="w-32 h-32 md:w-56 md:h-56 rounded-full md:rounded-none mx-auto md:mx-0"
      alt="im image"
      src="<%= Routes.static_path(@conn, "/images/im.jpg") %>"
    >
    <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
      <p class="text-xl font-semibold">
        "Aenean eleifend, massa id scelerisque lacinia, odio elit blandit diam, at varius nisi turpis ut neque. Nam at consequat erat."
      </p>
      <figcaption class="font-medium">
        <div>
          <p class="text-purple-600">im</p>
        </div>
        <div>
          <p class="text-gray-500">Web Developer</p>
        </div>
      </figcaption>
    </div>
  </figure>
</section>
test/sample_app_web/controllers/page_controller_test.exs（任意）
  test "GET /", %{conn: conn} do
    conn = get(conn, "/")
    assert html_response(conn, 200) =~ "Welcome to Phoenix!"  # <-- delete
    assert html_response(conn, 200) =~ "team im"    # <-- add
  end
end

ここまできたら、mix phx.serverでローカルサーバー起動して、お使いのWebブラウザでlocalhost:4000を確認してみましょう。

実装は以上になります。

補足（Tailwind CSS IntelliSense）

VSCodeのプラグインTailwind CSS IntelliSenseを導入すると、オートコンプリートやリンター機能のほか、Tailwind CSSクラスをホバーして生CSSを確認できたりするのでオススメです。
hover_css.png

おわりに

Tailwind CSSをPhoenixフレームワークにお試し導入しました。

BootstrapみたいにUIコンポーネントが用意されているものではないのですが（例えばbtn btn-primaryのように一発でUI部品を作れない）、カスタマイズ性に優れていてPhoenixとの親和性も良いと感じました。

また、Tailwind CSSを導入することによって以下の効果が得られそうな予感を持ちました。

  • CSSまわりのコードがスッキリする。（特にメディアクエリまわり）
  • クラス名が直感的であり、お手軽にねらった効果を実装できる。

普段使いにも良さそうです。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T15:22:06+09:00

Vuforia Studio CSS備忘録：2D画面上の指定位置にウィジェットを表示

はじめに

Vuforia Studioでは、2Dウィジェットをドラッグ＆ドロップで簡単に2D画面レイアウトに配置できるが、レイアウトの位置に制約されてしまい、自由な位置指定ができない。だが、CSSを使うと、その制約にとらわれずに表示位置を指定できるので、備忘録としておく。

前提

この備忘録は、Vuforia Studioで、2Dウィジェットを含むARコンテンツを独力で作成できる人が対象。

CSSの例

例：テキスト領域を画面中央より少し下に表示

Vuforia Studioで、2D画面レイアウトに、テキスト領域をドラッグ＆ドロップで配置してみる。
表示位置は、レイアウトの制約を受ける。
image.png

image.png
画面中央より少し下に表示させたいのだが、どうすればいいのか？
そのためには、アプリケーションにて、以下のスタイルを追加する。
※ テキスト領域用のCSSの定義には、「textarea」の記載が必要
image.png
配置したテキスト領域のクラスプロパティに、上記で追加したスタイルを設定すると、
image.png
テキスト領域の表示位置が、スタイルで指定した位置になった。出来た！
image.png

尚、位置を指定できたものの、テキスト領域のデフォルト表示は、白を背景に黒文字であり、ARに使う表示としては見栄えがよくない。背景色と文字色を変更し、背景を半透明にすると見栄えが良くなりそう。そのCSSはまた別の備忘録にて。

例：グリッドレイアウトの表示位置を指定

他の2Dウィジェットも同様に、CSSで表示位置を指定できる。もう一つの例として、複数のウィジェットをまとめて表示できるグリッドレイアウトに指定してみる。
アプリケーションにて、以下のスタイルを追加して、グリッドレイアウトのクラスに設定すると
image.png
グリッドレイアウト（イメージとラベルの組合せ）の表示位置が、スタイルで指定した位置になった。出来た！
image.png

おわりに

Vuforia Studioで2Dウィジットを、CSSを使い指定位置に表示させることができると、より効果的なAR画面を、より簡単に作成出来る。いざというときに使える。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T12:52:04+09:00

【5分で読める】Webエンジニアを目指すのに最低限知っておきたい単語集【超基礎】

私について

2020年4月より某プログラミングスクールに通い、卒業後フロントエンジニアとして働いている20代です。

この記事は、自分がスクールに通い得たもの・思った事を中心に「独学でweb系エンジニアを目指す方の手助けになれば」と思い作成しております。

はじめに

この記事では、webエンジニアを目指す時に知っておきたい単語集ということで様々な単語をまとめております。
実際に、私も未経験からエンジニアを目指し学習を始めたものの、知らない単語に囲まれ少し心が折れかけたこともあるので同じような方の問題解決ができればなぁと思います。

また、初学者の方に伝わりやすいよう、かなり噛み砕いておりますので当記事にて100%理解できるとは思わないように！
あくまで、雰囲気掴みとして読んでみてください！☺️

［エンジニア編］

バックエンドエンジニア

→アプリケーションの中身の部分（機能）を作る人。例:Twitterの会員登録機能、いいね機能、ブックマーク機能

フロントエンドエンジニア

→HP等のUI/UX（ボタンの位置等見た目）を作り上げるエンジニア。デザイナーさんから言われたものを作り上げる。

webデザイナー

→HP等の色とかボタンの位置、デザインを考える人

［プログラミング言語編］

※横にあるのは難易度だよ。★が多いほど難しいよ✌?

HTML ★☆☆☆☆

→これがweb系エンジニアの基礎と言っても過言ではないと思う。HPの『仕組みを作る』言語。例えば、この文字は大きくして、この位置に写真を配置してという感じ。

CSS ★★☆☆☆

→よく「HTML&CSS」って感じで一緒にされることが多い言語。これはHTMLで作り上げたものを『装飾する』言語。装飾ってのは、例えば色をつけたりするもの。ボタンの色は赤で〜、お問合せフォームの色は緑で〜とかとか。デザインの言語とも言えるかも！

JavaScript ★★★★☆

→HPの『動きをつける』言語。動きってのは、ローディング画面とか、ボタンを押したらふわっと横に移動したりとか、よく『アニメーション』とも言われるもの。

Vue.js ★★★☆☆

→『JavaScriptのフレームワーク』。
フレームワークってのは、簡単に言うとその言語を強化する役割のもの。よく使われるアニメーションは簡単に出せるようになってたり、JavaScriptだけじゃめんどくさい仕組みを簡単に作れるようになってたりする感じ。

Ruby ★★★☆☆

→バックエンドエンジニア（アプリの仕組み作ったりするエンジニア）を目指すなら一番おすすめの言語。日本人が作った言語ってこともあってすごくわかりやすく、学習しやすく、参考記事も多い！（自分もここから始めた）

Ruby on Rails ★★★★☆

→Rubyのフレームワーク。同じ感じでRubyを強化するものという感じかな。

［職種］

web系

→いわゆるwebを作成する時に使用する言語を主とするエンジニア。htmlcss、JavaScript等

sler

→ 設計、開発、運用・保守・管理までを一括請負する情報通信企業です。まぁ全てを請け負う企業ですね。

客先常駐

→エンジニアの力を必要としている企業に行き、業務を行うこと。

[番外編]どれがいいとかいうあの不毛な議論

→よく目にするのは「web系はキラキラで楽しそう！」とか「客先駐在はブラック！」とかありますが、結論自分のやりたいことを叶えられるなら客先駐在でもいいと思います。そのような記事はあくまで参考する程度にしましょう。（そもそもネットに「この職場よかったわ〜！！」とか書く人あんまりいないですしね。）

おわりに

【超基礎】ということで本当に最低限の単語を説明させていただきました。
初学者のためになればなぁと思います！?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T09:48:16+09:00

[Gem不要！！HTML&CSSのみ]初心者が簡単にドロップダウンメニューを作成する方法

はじめに

ハンバーガーメニューやドロップダウンメニューの作成をしたいけど、Gem導入の方法がよくわからない・JavaScriptは思うようにいかない。
そんな初心者の方におすすめの記事なっております。

開発環境

・Rails6.0.0
・MySQL5.6.50

ドロップダウンメニューの実装

早速ドロップダウンメニューの実装の方法の流れを解説します。
ちなみにドロップダウンメニューとは以下のようなメニューのことです。

f15d1dda5826200510a6a8d6eabad639.png

「...」 を押すとメニューが表示されるものです。

よく見かけますが、JavaScriptでやるには面倒だし、Bootstrap導入のためにGemやjQueryを導入したりするのは初心者には中々ハードルが高めかなと思います。

それでは解説していきます。

1)application.html.erbで初期設定

まず app/views/layouts/application.html.erbでBootstrapなど必要なものを読み込みます。

以下は僕がドロップダウンメニューを作成した際に使用したHTMLコードです。

views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>PlansApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

    # ここでbootstrapを読み込んでいます
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
    <%= yield %>
　　# 以下の3行のscriptタグを追記しHTMLで使用できるようにしています
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

初期設定はこれで終了です。

2)HTMLを書く

初期設定ができたら、早速ドロップダウンメニューのHTMLを記述していきます。
具体的には公式を見てもらってアレンジしてもらうのがベストですが、参考にした記事のものと、僕が作成したものを紹介しておきます。

参考記事の例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

僕の場合だとlistタグがあるためレイアウトが崩れるなどの問題がありました。
そこで以下のようにアレンジいました。

アレンジ例
<a class="nav-link" href="#" id="navbarDropdown" role="button" datatoggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <a class="dropdown-item" href="#">コメント履歴</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#">フォローしているユーザー</a>
   <div class="dropdown-divider"></div>
  <%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "dropdown-item" %>
</div>

僕の場合はfontAwesomeでアイコンなどを使用したり、開発中のアプリのためパス指定があるところ・無いところがまばらですが、こんな感じでアレンジしました。

公式ドキュメント

3)CSSの適用させる

ここまでくれば、後はお好みでCSSを記述していくだけです。
参考までに以下に参考記事の記述例を紹介しておきます。

参考記事のHTML7行目の以下のクラスに適用させていきます。

 <div class="collapse navbar-collapse" id="navbarSupportedContent">

なぜ、このクラスに適用させるのかの詳しい解説は参考記事をご覧いただけるとわかりやすいので、ぜひ見てみてください。

【初心者】ハンバーガーメニューの詳細表示後のバーを装飾してみた

参考記事の例
@media screen and (max-width: 992px) {
.collapse.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 992px) {
  // スマホ用
  .collapsing.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;

  }
}

以上でドロップダウンメニューの実装は終了です。
これを期に、UI/UXのスキルの一部を見に付けてみてはいかがでしょうか。

参考文献

公式ドキュメント

【初心者】ハンバーガーメニューの詳細表示後のバーを装飾してみた

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T07:58:29+09:00

スタイル関連　チートシート

flexを使ってdivタグを並べることが多いのでけれど左右・中央寄せについてよく忘れるので、
まとめました。

See the Pen PoGexLP by thithi7110 (@thithi7110) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T07:58:29+09:00

flexを使ってコンテンツを並べる

flexを使ってコンテンツを並べる方法

flexを使ってdivタグを並べることが多いのでけれど左右・中央寄せについてよく忘れるので、
まとめました。

flexの指定

display:flex;

フレックスアイテム(子ども）の並べる方向

※スタイルはフレックスコンテナ（親）に記述
image.png

フレックスアイテム(子ども）の位置

※スタイルはフレックスコンテナ（親）に記述
display:flex;
flex-direction:row ※省略可

image.png

中央:center　左：flex-start　右：flex-end　上：flex-start 下：flex-end
（※なお、flex-direction:rowの場合。flex-direction:columnの場合変わってくるので注意）

See the Pen PoGexLP by thithi7110 (@thithi7110) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧