- 投稿日：2021-04-14T23:45:45+09:00
ちょっとしたReactでのアニメーション
ちょっとしたReactでのアニメーション ※この記事は、ガッツリすごいアニメーションをやるものでは、ありません！ TypeScriptでReactなどWebフロントを実装している際、ちょっとした変化を持たせたいなと思って書きました。 ちょっとした変化 文字の色を変えたい 変位をゆっくりしたい 見た目の変化 HTML、CSSは、インターネットが始まって成長してきた言語です。 非常に簡単に書くことができる。 なので、色んな人が、様々な技巧でWebサイトを面白く、美しく見せてきました。 React、Vue などフレームワークが変わっても土台は、変わっていません。 React で実装してみよう 細かいことは、置いといてどうやるのか？ import React, { useState } from "react"; import { css } from "emotion"; // css in js export function Animation() { const [isFlag, setFlag] = useState(true); const color = isFlag ? "red" : "blue"; const size = isFlag ? "100px" : "300px"; const textcolor = isFlag ? "Black" : "White"; const animation_style = css({ width: size, backgroundColor: color, transition: "1s", color: textcolor, }); return ( <div className={animation_style}> <p>test</p> <button onClick={() => setFlag(!isFlag)}>Change</button> </div> ); } 上記のコードで、実行するとボタンを押すとサイズが変化する。その変化は、1秒で行われます。 transition この要素は、変化にかかる時間を指定しています。 CSS in JSでは、変数を組み込むことができるので、 CSSに変数を組み込んでboolなどで要素の状態を制御しています。 あとがき この書き方は、一般的なのかどうかは、知りません。 自分の考える動きを起こせるアニメーションのライブラリを探す過程で、よく先人のCSSの実装を説明しているサイトに行きます。 自分の環境で実現できるのであれば、こういった書き方で、ちょっとしたものは、実現して探す時間を他の作業に当てようと思いました。 参考ページ
- 投稿日：2021-04-14T13:53:31+09:00
railsでCSSを遅延読み込みさせる
stylesheet_link_tag に preload を付与する。 PageSpeedInsight のスコアアップのために rails で CSS をプリロードさせてファーストビューのレンダリング速度をあげたい。 stylesheet_link_tag に media onload rel preload 属性を付与してあげる。 変更前.erb <%= stylesheet_link_tag 'app_basic', media: 'all' %> 変更後.erb <%= stylesheet_link_tag 'app_basic', media: 'all', onload: "this.onload=null;this.rel='stylesheet'", rel: 'preload', as: 'style' %> <noscript><%= stylesheet_link_tag 'app_basic' %></noscript> preload に対応していないブラウザがあるため、noscriptタグで通常のCSS読み込み処理を書いてあげれば完成。 Chromeの場合は設定から、javascriptを許可しないモードにすればデバッグできます。
- 投稿日：2021-04-14T13:53:31+09:00
railsでCSSをpreloadさせる
stylesheet_link_tag に preload を付与する。 PageSpeedInsight のスコアアップのために rails で CSS をプリロードさせてファーストビューのレンダリング速度をあげたい。 stylesheet_link_tag に media onload rel preload 属性を付与してあげる。 変更前.erb <%= stylesheet_link_tag 'app_basic', media: 'all' %> 変更後.erb <%= stylesheet_link_tag 'app_basic', media: 'all', onload: "this.onload=null;this.rel='stylesheet'", rel: 'preload', as: 'style' %> <noscript><%= stylesheet_link_tag 'app_basic' %></noscript> preload に対応していないブラウザがあるため、noscriptタグで通常のCSS読み込み処理を書いてあげれば完成。 Chromeの場合は設定から、javascriptを許可しないモードにすればデバッグできます。 参考
- 投稿日：2021-04-14T11:30:02+09:00
Bootstrap(勉強メモ)
※学習時のメモです。 Bootstrapとは HTML、CSS、JavaScriptからなる巨大なライブラリ（コード集） twitterのような見た目のサイトを作る為の部品が多い Bootstrap4の利用には、jQueryとpopper.jsを利用する * Bootstrapの読込み CDNを使う：Bootstrapなどの公開ライブラリを自由に使えるよう、Web上に設置(ホスティング)してくれるサービス Bootstrapの「Quick start」ならびに「Starter template」のサンプルコードをコピーして使う。ただし lang="en" を lang="ja" にする 〔Bootstrap Template〕 <!DOCTYPE html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS, then Font Awesome --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> </body> </html> * viewportの設定 スマホ対応の為に設定する viewport：スマホ、PC画面の表示領域。head要素内のmetaタグで指定。 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ↑Bootstrapのテンプレに記載されたコードの意味? ・表示領域の横幅をデバイスと同じ横幅にする （width=device-width) ・表示倍率を1倍にする（initial-scale=1） ・iOSのSafariで表示倍率を自動的に縮小を無効化（shrink-to-fit=no） ●レスポンシブデザイン：多様な画面サイズに適応する様に配慮しながらページを作成する手法 基本はメディアクエリ：特定の表示環境に対してだけCSSを適用 ※CSSの優先順位には影響しない為、上方に広い条件、下方に狭い条件を記述 表示内容が切り替わるサイズ幅?ブレイクポイント ●グリッドシステム：横幅全体が12カラム(列)で構成、横幅に割り当てるカラム数を指定し、要素を配置していく (使い方) ①グリッドを使う範囲を囲うブロック要素にcontainerクラスをつける。 ②containerのブロック中にブロック要素のrowクラスを用意 ③rowの中に要素を配置し、カラム数を設定 ・カラム数の指定：col-[画面サイズ]-[カラム数] <div class="container"> <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> col-md-6 ? ｳｲﾝﾄﾞｳ幅がmd(ﾀﾌﾞﾚｯﾄ=768px)以上の時に6ｶﾗﾑ分を使用、それ未満は通常のdivの挙動で横幅100％ col- ：～575px スマホ縦 col-sm- ：576～767px スマホ横 col-md-* ：768～991px タブレット col-lg-* ：992～1199px デスクトップPC ※異なるサイズを同時に指定すると、サイズが大きいものが優先される。col-6 col-lg-4と指定→スマホとタブレットでは6カラム、デスクトップでは4カラム幅になる。 ・隙間を空ける offset-[画面サイズ]-[カラム数] <div class="offset-md-2 col-md-5">offset-md-2 col-md-5</div> ●Bootstrap HTMLの見た目をBootstrapのようにキレイにするには、基本的にclassを指定する ・<table>要素(表)にclass="table"をつけるだけで見栄えが良くなる 他にも… table-striped:行ごとに背景色が交互に変わる table-borderd:各セルに枠がつく table-hover:マウスを乗せると行がハイライトされる table-sm:余白を詰めてコンパクトに ∴class属性を複数指定も可 <table class="table table-striped…"> ・< input>要素にform-controlクラスを付けるだけで、かっこよくなる。 また、各要素をブロックレベル要素で囲み、`form-groupクラス追加で、要素間に余白が入る形でフォーム部品が配置される。 <form> <div class="form-group"> お名前 <input type="text" class="form-control"> </div> </form> ・横に並べる：Bootstrapでは通常、フォームの各要素は横幅100%で表示され、縦に並ぶ。要素の左右にラベル（ 要素）を配置したい場合、グリッドのところで説明したrowやcol-*-*クラスを利用する ラベルにはcol-form-labelクラスを追加 ・アクセサリをつける ①アクセサリをつけたい部品の親要素にinput-groupクラスをつける ②アクセサリをつけたい要素自身にもクラスを付与 input-group-prependで左端(要素の前)、 input-group-appendで右端(要素の後ろ)にアクセサリ追加 アクセサリに表示したい文字列は要素で囲い、input-group-textクラスを追加 <form> 郵便番号 <div class="form-group input-group"> <!-- 左端につけるアクセサリ --> <div class="input-group-prepend"> <span class="input-group-text">〒</span> </div> <input type="text" class="form-control" placeholder="000-0000"> </div> </form> ・ボタン (< a>< button>< input>)を、Bootstrap風の見た目のボタンに変更 btnおよびbtn-[色の種類]クラスを追加 <a href="#" class="btn btn-primary">aボタン</a> <input type="submit" class="btn btn-primary" value="inputボタン"> <button class="btn btn-primary" type="submit">buttonボタン</button> btn-blockクラス追加で、指定カラム数の幅に対して100％幅表示 <div class="row"> <div class="col-8">xxx</div> <div class="col-4"> <button type="button" class="btn btn-primary btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-block">Block level button</button> </div> </div> ・ドロップダウンメニュー 親要素< div>にdropdown-menu、子要素< a>にdropdown-itemクラスを追加(ul、liは使わない) <div class="dropdown"> <button type="button" class="btn btn-light dropdown-toggle"data-toggle="dropdown"> 操作 </button> <!-- 選択肢 --> <div class="dropdown-menu"> <a class="dropdown-item" href="#">返信</a> <a class="dropdown-item" href="#">転送</a> <div class="dropdown-divider"></div> <!--区切り線？--> <a class="dropdown-item" href="#">削除</a> </div> </div> ・タブを使ったナビゲーション 複数コンテンツを切替え表示したいときに使う。タブのナビゲーションを使う事で、今どのコンテンツが表示されているかが分かりやすい。 < ul>にnavとnav-tabsクラス、< li>にnav-itemクラス、< a>にnav-linkクラスを追加。「現在このコンテンツを表示しています」状態を表示するには、< a>にactiveクラス追加。 <ul class="nav nav-tabs"> <li class="nav-item"><a href="#" class="nav-link active">収入</a></li> <li class="nav-item"><a href="#" class="nav-link">支出</a></li> <li class="nav-item"><a href="#" class="nav-link">合計</a></li> </ul> ・ナビゲーションバー サイト上部につくメニュー。横幅で表示を切り替え。 ①ベースのナビゲーションバーを作る (1)< nav>要素にnavbarとnavbar-expandクラス追加 (2)バーの中に表示する内容の色決め。navbar-lightで背景色明るく、navbar-darkで暗め。 (3)背景色はbg-[色の種類]追加。今回はbtn-light (4)左端に表示されるサイト名は< a>要素で囲みリンク設定。必ずnavbar-brandを追加する。 ②メニュー項目を追加 (1)リスト< ul>を追加し、各メニュー項目はリストアイテム< li>にする。また、リンクとして設定。 (2)< ul>にnavbar-nav、< li>へnav-item、< a>にnav-linkクラス追加。 (3)どのコンテンツを表示しているかを分かりやすくするために、該当のメニュー項目にactiveクラスを追加。 ③ドロップダウン型のメニュー項目追加 ドロップダウンを開くとサブメニューが表示されるよう設定 (1)追加するリストアイテムの< li>にdropdownクラスを追加 (2)追加したリストアイテムの< a>にdropdown-togleクラス追加 (3)サブメニューは追加したリストアイテムの下に、ドロップダウンメニューセクションで紹介したのと同じように< div>< a>追加 (4)ドロップダウン化した< a>にdata-toggle="dropdown"属性を追加 ④スマホ画面幅の場合、メニューを折りたたむ (1)< nav>につけていたnavbar-expandをnavbar-expand-[画面サイズ(lgやsm)]にする。※グリッド参照 画面サイズ未満の時、メニュー表示が変わる。 (2)3本線のボタンを用意。以下のような< button>要素を追加。 これをサイト名のリンク(< a href="#" class="navbar-brand">)直前に書くとボタンは左側、リンク直後に書くと右側に表示される。 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> <span class="navbar-toggler-icon"></span> </button> (3)<ul class="navbar-nav">の要素を加工親要素< div>を記述。 その< div>にcollapseとnavbar-collapseクラスを追加し、id="nav-bar"というid属性を追加。 nav-barというIDは3本線の< button>でdata-target="#nav-bar"と設定したことによる。data-targetの設定内容を変更している場合、その内容と< div>のID属性が同じ名前になるようにする。 <nav class="navbar navbar-expand-sm navbar-light bg-light"> <!-- ホームへ戻るリンク。ブランドロゴなどを置く。 --> <a href="#" class="navbar-brand">P&K</a> <!-- 横幅が狭いときに出るハンバーガーボタン --> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> <span class="navbar-toggler-icon"></span> </button> <!-- メニュー項目 --> <div class="collapse navbar-collapse" id="nav-bar"> <ul class="navbar-nav"> <li class="nav-item active"><a href="#" class="nav-link">子犬</a></li> <li class="nav-item"><a href="#" class="nav-link">子猫</a></li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">会社情報</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">ビジョン</a> <a class="dropdown-item" href="#">会社概要</a> <a class="dropdown-item" href="#">地図</a> <a class="dropdown-item" href="#">沿革</a> </div> </li> <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li> </ul> </div> </nav> ⑤バッジ（ラベル） テキストなどに装飾したい場合、badgeと```badge-[色の種類]クラスを追加。 ・ボタンの中で件数表示するバッジ ボタンの表示内容に数値を追加し、新着通知の件数を表示するには、数値を< span>で囲み、badgeとbadge-pill,badge-[色の種類]の3つのクラスを追加。 <button class="btn btn-primary"> 受信トレイ <span class="badge badge-pill badge-light">7</span> </button> ⑥アラート：何らかのアクションを行ったときに結果を表示 alertとalert-[色の種類]クラスを追加 (ユーザー登録などに成功・失敗した結果など) ⑦カード 情報をグループ化したいときに、ブロック要素にcardクラスを追加するだけ。 cardクラスの要素の中に、タイトル用ブロック(card-headerクラスを付けた要素)と、本文用ブロック(card-bodyクラスを付けた要素)を中に入れる。 <div class="card"> <div class="card-header"> 新着情報 </div> <div class="card-body"> <a href="#">友達リクエストが1件あります</a><br /> <a href="#">メッセージが3件届いています</a><br /> <a href="#">今日開催のイベントがあります</a><br /> </div> </div> (参考) ユーティリティクラス：margin,paddingなどのCSSを書かなくて済む。 ・marginとpadding 用意された命令を使い、[余白の種類][余白の場所]-[余白の大きさ]の記述で使う。 たとえばmt-1 なら「ほんの少しの margin-top の余白」、pb-4 なら「割と広い padding-bottom の余白」となる ・border ブロック要素に罫線を引くborderクラス、border-[罫線の場所]クラスがある。 ・text-align(文字の寄せ) text-[寄せる方向] ・Flexboxモデル 横並びにしたい複数要素を囲った親要素にd-flexとflex-lowクラスをつける。 要素を寄せる方向や各要素間の余白を、justify-contentクラスで決められる。 justify-content-start左寄せ(要素間余白なし) justify-content-end右寄せ(要素間余白なし) justify-content-center中央寄せ(要素間余白なし) justify-content-between最初が左端、最後が右端、残りは均等余白で justify-content-aroundすべて均等な余白で ⑦外部アイコン追加(Font Awesome) ・BootstrapのHTMLテンプレートの< body>の下方、< script>の要素が記述されている場所に、以下を入れる。 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> ・Font Awsomeでアイコンを選び、詳細ページで記述方法が表示されるので、タグの文字列にカーソルを合わせコピー。 コピーした記述を使いたい場所にペースト。
- 投稿日：2021-04-14T09:19:49+09:00
【CSS】文字サイズ(font-size)の10px以下が適用されない時の対処法。左寄せや右寄せなど位置を指定する方法
chromではfont-sizeが10px以下を指定しても反映されないようになっている。 ブラウザ上で10px以下の文字サイズを表示するにはtransformプロパティを使うと実現できる。 実例 以下のようにパスワードの入力欄の下の「パスワードをお忘れですか？」の文字を小さくし左揃えにする。（現在のフォントサイズは10px） 文字を小さくする方法 文字を小さくするにはtransform: scale(数値);でscaleの引数に小数点以下の数値を指定する。 scaleは1を倍率100%として大きさを変更する。0.8なら80%の大きさになる。 transform: scale(0.8); transform: scale(0.4); ▼注意点 文字が小さくなるのではなく、文字が入っている入れ物ごと小さくなるので、だんだんと真ん中に寄ってしまう。 transformで位置を指定する方法 transformで変形させた要素の位置はtranlate(横方向の相対位置, 縦方向の相対位置)で指定する。 指定は現在地の中心座標を(0, 0)として、pxや%で指定できる。 %で指定する場合は、縮小後の縦幅と横幅のサイズを100%の基準とする。 基準位置から90px左に移動 transform: scale(0.8) translate(-90px); 20px左に48px上に移動 transform: scale(0.8) translate(-20px, 48px); %で指定 transform: scale(0.8) translate(-10%); transformの活用方法 transformプロパティはサイズの変更と位置移動以外にも、サイズを横や縦の倍率別々で指定したり、回転、絞るように倍率を変えることができる。 サイズを横と縦の倍率別々で指定 ・scale(横の倍率, 縦の倍率) 値は1を100%として、単位なしの数値で指定する。 横に1.5倍、縦に0.7倍 transform: scale(1.5, 0.7); 回転 ・transform: rotate(角度); 角度はdegかturnで指定する。反時計方向に回す場合はマイナスをつける。turnは0~1で0~360度となる。 ▼角度の参考例 deg turn - deg 0deg 0turn -360deg 45deg 0.125turn -315deg 90deg 0.25turn -270deg 135deg 0.375turn -225deg 180deg 0.5turn -180deg 225deg 0.625turn -135deg 270deg 0.75turn -90deg 315deg 0.875turn -45deg 360deg 1turn -0deg transform: rotate(45deg); 絞る ・skew(反時計回りの絞り, 時計回りの絞り) 数値はdegで指定する。90degにすると見えなくなる。 transform: skew(45deg); transform: skew(-45deg); 複数の値を設定する 各値は併用して設定することができる。 transform: scale(0.8, 1.5) translate(-10%, 20px) rotate(10deg); 参考リンク
- 投稿日：2021-04-14T07:11:03+09:00
【CSS・SASS】display flexでcolumを使って縦に並べている時に左寄せや右寄せにする方法
display :flex;でflex-direction: column;を使って縦に並べている時に左寄せにする方法。 display flexで並べた要素を左寄せにしようと思いjustify-content: flex-start;を付けたのに効かない時の対処法。 解決策 左寄せの場合はalign-items: flex-start;にする。またはalign-itemsを記述しない。 右寄せの場合はalign-items: flex-end;にする。 原因と理由 columnにするとflexboxの中の要素の縦と横が切り替わるのではなく、flexbox全体が縦と横で切り替わる。（90度反時計周りに回転した状態） 何が言いたいかというと、align-items: center;が上下方向の中央寄せから、左右方向の中央寄せになり、 justify-content: center;が左右方向の中央寄せから、左右方向の中央寄せになる。 また、flexboxのデフォルトは左寄せなので、align-itemsの記述をなくせば左寄せになる。 実例 縦積みのflexboxの中の要素が中央に寄ってしまっている状態。 .main-wrapper{ display: flex; flex-direction: column; align-items: center; } boxの高さがなければ以下でも同じ状態になる。 .main-wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: center; //boxの高さがないので機能していない } 左寄せ .main-wrapper{ display: flex; flex-direction: column; } または .main-wrapper{ display: flex; flex-direction: column; align-items: flex-start; } 右寄せ .main-wrapper{ display: flex; flex-direction: column; align-items: flex-end; } 以上。
- 投稿日：2021-04-14T00:52:21+09:00
超初心者?がFlexboxの基礎を理解するためアイルランド国旗をFlexboxで作ってみた №１
Flexboxを使って国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ ある程度、最初に決めておくと後が楽になります。 例 アイルランドの国旗を調べる <div>は何個必要なのか？ class属性名はどうしようか？ ・紙とペンで実際に枠を書いてみる（添付画像参照） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <body> <div class="ireland"> <div class="ire1">みどり</div> <div class="ire2">しろ</div> <div class="ire3">おれんじ</div> </div> </body> .ireland { width: 450px; height: 300px; border: 1px solid black; margin: 0px auto; ※画面中央用 } .ire1 { background-color: green;} .ire2 { background-color: white;} .ire3 { background-color: orange;} 上記の状態を一旦確認 上記のCSSの『親要素にdisplay: flex』をつける。 .ireland { width: 450px; height: 300px; border: 1px solid black; margin: 0px auto; display: flex; ※ } Flex.boxの大元である、display: flex;を『親要素』に付けた。 見た目が、重なっていた<div>が横並びに変化。 みどり、しろ、おれんじの幅をflex-growを使って伸ばします flex-growは『子要素』に付ける 間違えやすいポイントなので気をつけて .ire1 { background-color: green; flex-grow: 1; ※ } .ire2 { background-color: white; flex-grow: 1; ※ } .ire3 { background-color: orange; flex-grow: 1; ※ } 最後に、<div>みどり しろ オレンジ</div>の文字を消して 完成です！！！ まとめ Flexboxを使う際の、display: flexは必ず親要素につけてあげる。 上手に反応しない場合のチェック箇所でもあります。 親要素に付けていると思ったら子要素 孫要素に付けていた場合もありそれに気づかず苦戦しました。 最後に。『アイルランド、イタリア、フランス、ベルギーetc』 にも応用できます。 是非皆様も実践してみてください。 ありがとうございます 今回は以上です。