- 投稿日:2020-09-21T23:43:25+09:00
Twitterクローンもどき作成までの過程
PC版のTwitterのようなサイトを作ろうと思って調べたことをまとめていきます
要素をきっちり3分割
target{ width : calc(100% / 3) ; }参考:【CSSで3等分】要素をきっちり三分割するスタイルシートの書き方
画面サイズ取得
画面取得するには以下を使用する
この取得したサイズに応じて表示する内容を変更したりする
どちらもスクロールサイズを除くサイズ縦サイズ
document.documentElement.clientWidth横サイズ
document.documentElement.clientWidth画面サイズ変更の監視
window.addEventListener('resize',()=>{ //処理 }入力ボックス
入力ボックスはHTML5の contentEditable 属性を使う
この属性をtrueにすると編集できるようになる
inputを使うよりもシンプルな入力画面になる<div contentEditable="true">入力ボックス</div>aの下線部を消す
text-decoration: none;Twitterのようなタイムラインの形のテンプレート
<body style="background-color:rgb(54, 3, 3)"> <div style="background-color: rgb(107, 107, 2);width: 500px;display: inline-flex;"> <!-- ユーザ情報 --> <div style="background-color: rgb(104, 101, 101);"> <img src="image/bell.png" alt="" style="width: 50px;"> </div> <!-- 投稿内容 --> <div style="display: block;"> <div style="background-color: rgb(109, 65, 65);">あああ</div> <div style="background-color: rgb(69, 65, 109);">いいい</div> <div style="background-color: rgb(65, 109, 88);">ううう</div> <!-- <div contenteditable="true" style="background-color: rgb(65, 109, 88);">ううう</div> --> </div> </div> </body>block要素を上下左中央に配置
.outer{ position: relative; } .inner{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); }フォーカスインとフォーカスアウト
addEventListenerでコントロールするものいいが特定のタグであれば
onfocus
とonblur
属性がいい仕事をしてくれる
属性 説明 onfocus フォーカスしたとき onblur フォーカスアウトしたとき 例<input placeholder="キーワード検索" type="text" onblur="focusOut(this)" onfocus="focus(this)">thisでその要素自体を取得できる
気になったcssプロパティなど
flex-basis
コンテンツボックスの寸法を定義
- 投稿日:2020-09-21T22:51:27+09:00
::webkit-scrollbar プロパティ一覧
何気に Edge が Chromium になって、出来ないのはあと Firefox だけなんですね
::-webkit-scrollbar
スクロールバー全体
角のやつ (scrollbar-corner) は含まれないっぽい
::-webkit-scrollbar-button
端にある上下左右のボタン
::-webkit-scrollbar-thumb
スクロールバー
::-webkit-scrollbar-track
スクロールバーが表示されてるとこ、トラック
スクロールバー全体 (scrollbar) からボタン (scrollbar-button) を除いた範囲
::-webkit-scrollbar-track-piece
現在のスクロール位置までで分割されてるトラック (?)
::-webkit-scrollbar-corner
縦横のスクロールバーの交差するとこ
::-webkit-resizer
textarea とかで、リサイズできる時に右下に表示されるやつ
範囲は交差するとこの (scrollbar-corner) と同じ分かりやすいような分かりにくいようなサンプル
- 投稿日:2020-09-21T22:46:30+09:00
(´ω`) わいが清掃のお仕事してた頃に作ったアプリってのがある
ホテル清掃の経験ある人フォロワーになってくれないか。
3つ目の記事になるがQiitaからフォローしてくれた人は0だ。来てくれたら歓迎するよ。何をしてたか
ホテル清掃をしていた頃、全ての作業は分担されておりベッドの人はベッドを何部屋もやる。バスルームも同じだ。おかげで某ビジネスホテルだがシングルのベッドなら3分で出来るようになったしバスルームでも7、8分で行えるようになった。
つまり、みんながキーボード触っている時期にわいは便所に手を突っ込んで掃除しながらたまに便器からはみ出た?をキレイにしてた。それから3時間56台の勢いでベッドをひたすら組んでいた。とはいっても毎日じゃない。何をしたいか
ただし、部屋数が増えてくればだれてくるし汚れている部屋であれば多少なりとも予定作業時間を過ぎてしまう。といったことが起こる。当たり前の話だ。そういったときにこのアプリが活かせる。自分が遅れているのか早く進んでいるか把握できるようになる。
何を作ったか
タイマーだ。部屋数と時刻を2か所入力する(作業開始時刻と作業時間)。あとは?ボタンを押すごとに時間が記録され予定完了時刻より早ければ緑、遅ければ赤に行色が変わる。
何を使ったか
・画面は Fomantic-UI
・時刻入力は CleaveJS
・現在時刻取得は MomentJS
・部屋毎の作業時間計算は MomentDuration
・また比較演算子を関数で行いたかったから Predicateどう作ったか
index.html<!doctype html> <html> <head> <title></title> <meta charset='utf-8'> <meta content='' name='author'> <meta content='' name='description'> <meta content='' name='application-name'> <meta content='telephone=no,address=no,email=no,date=no,url=no' name='format-detection'> <meta content='noimageindex,notranslate,nosnippet,noarchive,nofollow,noindex' name='robots'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'> <link href='css/fomantic-ui/2.7.8.min.css' rel='stylesheet' media='screen'> <link href='asset/progressive-web.json' rel='manifest'> <link href='asset/favicon.ico' rel='icon'> <style name='font'> @font-face{ font-family:'M+2VM+IAPG circle'; src:url('asset/m+2vm+ipag-circle.ttf'); } @font-face{ font-family:'gidole'; src:url('asset/gidole.ttf'); } </style> <style> /* * 視認 */ html, body{ font-size:14px; } .ui.table td, .ui.table input{ font-family:'gidole'; } .ui.table>thead>tr>th, .ui.table>tbody>tr>td{ padding:0; } /* * 入力 */ .ui.table input[type='number']{ -moz-appearance:textfield; } .ui.table input::-webkit-outer-spin-button, .ui.table input::-webkit-inner-spin-button{ -webkit-appearance: none; } .ui.table input{ background:transparent; text-align:center; appearance:none; outline:none; border:none; width:100%; } /* * 見栄 */ .ui.table thead tr:first-child>th:first-child{ width:3em; } .ui.card, .ui.label, .ui.table, .ui.buttons{ border-bottom:2px solid rgba(34,36,38,.15) !important; box-shadow:rgba(16, 36, 94, 0.4) 0 2px 6px 0 !important; } .ui.card .description p{ font:12px 'M+2VM+IPAG circle'; line-height:1.2; color:black; } /* * アイコン */ i.icon.thumbs-up:before { content: '\f164'; } </style> </head> <body> <main> <div class='ui grid padded'> <div class='row'> <div class='column'> <div class='ui card fluid'> <div class='image'> <img src='asset/businesshotel-9956-400x400.png'> </div> <div class='content'> <div class='description'> <p>ホテル清掃の進捗を管理するアプリです。予定通り進んでいるか緑と赤のバランスでわかります。上のテーブルを入力して作業を開始しましょう。</p> </div> </div> </div> </div> </div> <div class='row'> <div class='column'> <table class='ui table unstackable celled fixed center aligned blue'> <thead> <tr> <th>数</th> <th>開始時刻</th> <th>作業時間</th> </tr> </thead> <tbody> <tr> <td><input type='number' v-model.number='rooms'></td> <td><input type='tel' v-model='time.base' ref='v1'></td> <td><input type='tel' v-model='time.task' ref='v2'></td> </tr> </tbody> </table> <table class='ui table unstackable celled fixed center aligned blue'> <thead> <th>No.</th> <th>予定時刻</th> <th>完了時刻</th> </thead> <tbody> <tr v-for='(no,i) in rooms' :class="[lt(i)]"> <td>{{no}}</td> <td>{{estimate[i] | HHmmss }}</td> <td>{{complete[i] | HHmmss }}</td> </tr> </tbody> </table> <div class='ui buttons two blue'> <button class='ui button icon' @click='reset'> <i class='icon file'></i> </button> <button class='ui button icon' @click='stamp'> <i class='icon thumbs-up'></i> </button> </div> </div> </div> </div> </main> </body> <!-- native --> <script src='js/native/moment-2.24.0.min.js'></script> <script src='js/native/moment-duration-format-2.3.2.min.js'></script> <script src='js/native/predicate-1.2.0.min.js'></script> <script src='js/native/cleave-1.5.3.min.js'></script> <!-- vue --> <script src='js/vue/2.6.10.js'></script> <script> new Vue({ el:'main', data:{ /* * 入力用のデータ */ time:{ base:null, /* 作業開始時刻 */ task:null, /* 作業平均時間(作業者)*/ }, rooms:10, /* 作業予定個数(部屋数)*/ /* * 進捗用のデータ */ estimate:[ /* 作業完了予定時刻 */ ], complete:[ /* 作業完了実際時刻 */ ], /* * 入力用のバリデーション(時刻と時間) */ validation:{ time:true, timePattern:['h','m','s'] } }, filters: { HHmmss:function(ts) { if(ts !== undefined){ /* 何時:何分:何秒 */ return moment(ts).format('HH:mm:ss') } } }, computed:{ timeChanged:function(){ /* 部屋数と時刻が修正されたことを監視 */ return this.rooms && this.time }, }, watch:{ timeChanged:{ deep:true, handler:function(){ /* 再計算 */ this.calc() } } }, methods:{ lt:function(i){ /* 予定より遅い or 早い */ return (i < this.complete.length) ? (predicate.lt(this.estimate[i],this.complete[i]) ? 'negative' : 'positive') : null }, stamp:function(){ /* 作業完了 */ if(this.complete.length < this.rooms) { this.complete.push(moment().valueOf()) } }, reset:function(){ /* 初期化 */ this.complete.splice(0,this.complete.length) }, calc:function(){ /* 計算 */ var base = moment(this.time.base,'HH:mm:ss') var task = moment.duration(this.time.task) for(var i=0;i<this.rooms;i++){ var val = base.add(task).valueOf() if(val){ this.estimate[i] = val } } }, init:function(){ /* HH:MM:SSによる入力検証 */ new Cleave(this.$refs.v1,this.validation) new Cleave(this.$refs.v2,this.validation) } }, mounted:function(){ this.time.base = '11:30:00' /* 作業開始 */ this.time.task = '00:09:00' /* 作業時間 */ this.init() /* NN:NN:NNの入力検証 */ this.calc() /* 計算(作業完了時刻) */ } }) </script> </html>
- 投稿日:2020-09-21T22:26:52+09:00
HTML/CSS レスポンシブ対応 個人的まとめ
概要
フロントトエンドの学習記録。
レスポンシブなレイアウトをCSSで実現する方法。
キーワードは以下の通り。
- ビューポート
- メディアクエリ
- widthのパーセント指定
- flex-box
ビューポート
htmlのheader内に、metaタグとして埋め込みを行う。
モバイルデバイス(スマートフォン・タブレットなど)用の設定で、レスポンシブデザインを適応する際に必要な端末情報を取得して埋め込む。
主に、後述するメディアクエリの判定基準に使用される。<meta name="viewport" content="width=device-width, initial-scale=1.0">device-width: モバイル端末のCSSピクセル(コーディンする際の画面横幅)
※解像度には、CSSピクセル(HTMLコーディングで気にする) と デバイスピクスセル(画像で気にする)がある
例) iPhone X : CSSピクセル => 375 x 812 / デバイスピクセル => 1,125 x 2,436initial-scale: ベージ表示時の初期拡大倍率
適切に、メディアクエリを用いてレスポンシブ対応する場合は1.0指定で概ね問題ない。
複数デバイスへの対応を力技で拡縮率だけで乗り切ろうとすると、1.0をjsでゴニョゴニョする必要もある、なお、ビューポートは、CSS以外では、JavaScriptのwindow.innerWidth・innerHeightにも影響がある。
メディアクエリ
Media Queries
デバイスの画面サイズ別に、適応するCSSを変える(上書きする)などの場合に使用する、
@mediaで始まり、そのあとに、max-width か min-width でCSSの適応の境界値を設定する。
境界値となる値は、 ブレークポイント と呼ぶ。
ブレークポイント前にメディタイプを挟むこともできる。
@media screen | tv | printer みたいな感じ。省略するとallになる。なお、ブレークポイントの指定はどちらも境界値を含む。
‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to"
https://www.w3.org/TR/css3-mediaqueries/#media1以下に使用例を示す
@media (max-width: 1000px) { /* 最大画面サイズが1000px "まで(x <= 1000)" 適応したいCSS定義 */ } @media (min-width: 1000px) { /* 最大画面サイズが1000px "から(x >= 1000)" 適応したいCSS定義 */ } @media (min-width: 1000px) and (max-width: 1500px) { /* 最大画面サイズが1000〜1500px まで適応したいCSS定義 */ }実践的な使い方
実践的には、 スマホ / タブレット / デスクトップPC の3つでブレークポイントを設定するケースが多い。
ブレークポイントを沢山設定し過ぎてもメンテナンスしにくいので、これくらいがちょうど良い。
どの値をブレークポイントとするかだが、昨今のスマホ画面サイズの大型化の流れなどで、変化してきているようだ。
その時の、有識者がまとめている定番の値を、ググって適応するのが良さそう。
雰囲気的には 400-600 | 800-1024 に境界値を設けているところが多そうだ。一応、現時点での、個人的な設定を記載する。
デバイスが徐々に大型化(多様化)する流れを感じつつ、少し大きめなところで線を引いてみた。3つに分けるケース
モバイルファーストで作成しつつタブレットやデスクトップPCにも、きっちり出し分け対応したい場合。/* スマホ用 (<= 640px) */ @media (min-width: 640px) { } /* タブレット用 ( <= 1024) */ @media (min-width: 1024px) { }2つに分けるケース
デスクトップPCの画面をメインとして、タブレットやスマホなども最低限見える程度に対応したい場合。
※ iPad Pro11の縦使用をPCとみなしたい場合は834を境界値に。/* スマホ/タブレット用 (<= 900px) */ @media (min-width: 900px) { }widthのパーセント指定
メディアクエリを使って、それぞれのブレークポイント別に、コンテンツの表示件数を変える場合には、
widthをパーセント指定する。以下に想定するケースを書く
・スマホ表示時には1つだけ newsコンテンツ を出す。
・タブレット表示時には2つ newsコンテンツ を横並びで出す。
・デスクトップ表示時には4つ newsコンテンツ を横並びで出す。これをこうする。
.news { width: 25%; } /* スマホ用 (<= 640px) */ @media (min-width: 640px) { .news { width: 100%; } } /* タブレット用 ( <= 1024) */ @media (min-width: 1024px) { .news { width: 50%; } }box-sizing: border-box
調整をかけたいブロック要素に対して、paddingが設定された場合、
単純にパーセント指定だけだと厳しい局面がある。
なぜなら、paddingに対しては、パーセント計算が適応されないからである。
なので、画面サイズの小さい端末でみたときに、相対的に余白が大きく適応されて違和感が出てしまう。
また、floatで横並びレイアウトを組んでいた場合サイズが収まりきらなくて、箱落ちしてしまう。
これを防ぐために、 border-box 指定を使う。* { box-sizing: border-box; }これにより、パーセント計算の時に、 余白も含めて(borderまで含めて) パーセント計算対象にしてくれるので、表示がいい感じに整う。
border-boxを使用しない場合は、旧来のcss内で、padding値を計算する方法もある。
なお、border-boxはmarginには適応されないので注意。flex-box
フレキシブルにレイアウトを組むために入った仕組み。
レスポンシブデザイン向けの対応でよく用いられる。使い方
親要素に display:flex (子要素がインライン要素の場合はinline-flex)と並べる指向性を宣言する
- flex-direction:並べる方向 => [row| column]-[ | reverse] で4パターンから指定
- flex-wrap:折り返しルール => [nowrap | wrap | wrap-reverse]から指定
- flex-flow: direction/wrap記述のショートハンド => flex-flow: row wrap;
親要素にflexの全体での細かい動作適応設定を行う。(整列方法)
- justify-content: 水平の整列ルール => [flex-start| flex-end | center | space-between | space-around]
- align-items: 垂直の単一行整列ルール => [stretch | flex-start | flex-end | center | baseline]
- align-content: 垂直の複数行整列ルール(wrap時) => justify-contentと同じ指定
子要素で、要素個々の適応設定を行う。
- order: 順番を制御 => あくまでも見た目だけ(DOMの並びは変わらないのでjsで要素抜くときは注意)
- flex-grow: 相対的な拡大率 => 他要素を1で、特定要素だけ2にすると表示上幅2倍の比率で表示されるになる
- flex-shrink: 相対的な縮小率 => growの逆
- flex-basis: 子要素のベースの幅 => [auto | 200px | 25%] などで指定。
- flex: grow/shurink/basisのショートハンド => flex: 0 1 30%;
- align-self: (親要素をからの)子要素の垂直表示揃え => [auto | stretch | flex-start | flex-end | center | baseline ]
具体例
parante: .container
child: .item x N個
みたいな要素で構成されるマークアップ構造があったとする。.container { display: flex; /** 子要素をrow/columnで並べ、reverseで順方向か逆方向かを指定。初期値はrow **/ flex-direction: row-reverse; } .item1 { flex-grow: 2; } .item2 { flex-grow: 3; } .item3 { flex-grow: 1; }
- 投稿日:2020-09-21T22:26:52+09:00
HTML/CSS 個人的まとめ
概要
レスポンシブなレイアウトをCSSで実現する方法。
キーワード。
- ビューポート
- メディアクエリ
- widthのパーセント指定
ビューポート
htmlのheader内に、metaタグとして埋め込みを行う。
モバイルデバイス(スマートフォン・タブレットなど)用の設定で、レスポンシブデザインを適応する際に必要な端末情報を取得して埋め込む。
主に、後述するメディアクエリの判定基準に使用される。<meta name="viewport" content="width=device-width, initial-scale=1.0">device-width: モバイル端末のCSSピクセル(コーディンする際の画面横幅)
※解像度には、CSSピクセル(HTMLコーディングで気にする) と デバイスピクスセル(画像で気にする)がある
例) iPhone X : CSSピクセル => 375 x 812 / デバイスピクセル => 1,125 x 2,436initial-scale: ベージ表示時の初期拡大倍率
適切に、メディアクエリを用いてレスポンシブ対応する場合は1.0指定で概ね問題ない。
複数デバイスへの対応を力技で拡縮率だけで乗り切ろうとすると、1.0をjsでゴニョゴニョする必要もある、なお、ビューポートは、CSS以外では、JavaScriptのwindow.innerWidth・innerHeightにも影響がある。
メディアクエリ
Media Queries
デバイスの画面サイズ別に、適応するCSSを変える(上書きする)などの場合に使用する、
@mediaで始まり、そのあとに、max-width か min-width でCSSの適応の境界値を設定する。
境界値となる値は、 ブレークポイント と呼ぶ。
ブレークポイント前にメディタイプを挟むこともできる。
@media screen | tv | printer みたいな感じ。省略するとallになる。なお、ブレークポイントの指定はどちらも境界値を含む。
‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to"
https://www.w3.org/TR/css3-mediaqueries/#media1以下に使用例を示す
@media (max-width: 1000px) { /* 最大画面サイズが1000px "まで(x <= 1000)" 適応したいCSS定義 */ } @media (min-width: 1000px) { /* 最大画面サイズが1000px "から(x >= 1000)" 適応したいCSS定義 */ } @media (min-width: 1000px) and (max-width: 1500px) { /* 最大画面サイズが1000〜1500px まで適応したいCSS定義 */ }実践的な使い方
実践的には、 スマホ / タブレット / デスクトップPC の3つでブレークポイントを設定するケースが多い。
ブレークポイントを沢山設定し過ぎてもメンテナンスしにくいので、これくらいがちょうど良い。
どの値をブレークポイントとするかだが、昨今のスマホ画面サイズの大型化の流れなどで、変化してきているようだ。
その時の、有識者がまとめている定番の値を、ググって適応するのが良さそう。
雰囲気的には 400-600 | 800-1024 に境界値を設けているところが多そうだ。一応、現時点での、個人的な設定を記載する。
デバイスが徐々に大型化(多様化)する流れを感じつつ、少し大きめなところで線を引いてみた。3つに分けるケース
モバイルファーストで作成しつつタブレットやデスクトップPCにも、きっちり出し分け対応したい場合。/* スマホ用 (<= 640px) */ @media (min-width: 640px) { } /* タブレット用 ( <= 1024) */ @media (min-width: 1024px) { }2つに分けるケース
デスクトップPCの画面をメインとして、タブレットやスマホなども最低限見える程度に対応したい場合。
※ iPad Pro11の縦使用をPCとみなしたい場合は834を境界値に。/* スマホ/タブレット用 (<= 900px) */ @media (min-width: 900px) { }widthのパーセント指定
メディアクエリを使って、それぞれのブレークポイント別に、コンテンツの表示件数を変える場合には、
widthをパーセント指定する。以下に想定するケースを書く
・スマホ表示時には1つだけ newsコンテンツ を出す。
・タブレット表示時には2つ newsコンテンツ を横並びで出す。
・デスクトップ表示時には4つ newsコンテンツ を横並びで出す。これをこうする。
.news { width: 25%; } /* スマホ用 (<= 640px) */ @media (min-width: 640px) { .news { width: 100%; } } /* タブレット用 ( <= 1024) */ @media (min-width: 1024px) { .news { width: 50%; } }box-sizing: border-box
調整をかけたいブロック要素に対して、paddingが設定された場合、
単純にパーセント指定だけだと厳しい局面がある。
なぜなら、paddingに対しては、パーセント計算が適応されないからである。
なので、画面サイズの小さい端末でみたときに、相対的に余白が大きく適応されて違和感が出てしまう。
また、floatで横並びレイアウトを組んでいた場合サイズが収まりきらなくて、箱落ちしてしまう。
これを防ぐために、 border-box 指定を使う。* { box-sizing: border-box; }これにより、パーセント計算の時に、 余白も含めて(borderまで含めて) パーセント計算対象にしてくれるので、表示がいい感じに整う。
border-boxを使用しない場合は、旧来のcss内で、padding値を計算する方法もある。
なお、border-boxはmarginには適応されないので注意。
- 投稿日:2020-09-21T21:33:23+09:00
【初心者でもわかる】フォームの必須項目に(*)や(※)を付ける方法
どうも7noteです。必須項目と分かるように装飾を作る方法
今回はCSSで上付き文字を作ります。こんな感じです。
作り方
index.html<p>お名前<span>※</span></p>style.cssspan{ color: red; /* 文字色を赤にする */ font-size: 0.5em; /* 文字サイズを半分にする */ vertical-align: super; /* 上付き文字にする */ }上付きにしたい文字を
<span>
で囲み、vertical-align: super;
で上に配置します。
vertical-alignはインライン要素にしか効かないので、注意が必要です。
<sup>
は使うな!似たようなことができる要素として
<sup>
というものがありますが、<sup>
はその文字がないと意味が変ってしまうものにしか使わないというのが推奨の使い方になります。たとえば、H2Oとか、E=mc2とかその文字が上付き文字でなくなってしまうと意味が変ってしまいます。
このような文字の場合にのみ<sup>
を使います。まとめ
勉強しはじめの頃、vertical-alignを使っていると上手く効いたり効かなかったリするので、必ずその要素がインライン要素かどうかを確認するよう注意してください。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-09-21T15:47:32+09:00
font-awesomeとbootstrap(4.5.1)の導入
各種バージョン
Ruby: 2.6.5
Rails: 6.0.0
Bootstrap: 4.5.1
Font-Awesome(Free): 5.7.2app/views/layouts/application.html.erb<!DOCTYPE html> <html> <head> <title>boot_and_fontawesome_app</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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="https://kit.fontawesome.com/d9fcea61b7.js" crossorigin="anonymous"></script> </head> <body> <%= yield %> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>上記を貼るだけ
以下はサンプルコード。app/views/index.html.erb<div class="container"> <div class="jumbotron m-3"> <h1 class="display-4">Hello, Bootstrap!</h1> <hr class="my-4"> <p>This is the template of Ruby on Rails using Bootstrap.</p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal"> <i class="far fa-window-maximize"></i> Click here </button> </div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Hello! </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>すると以下のようなページを表示できます。
https://gyazo.com/2c476830157ce55b86000591254edc33
ブートストラップとfont-awesomeが適用できていることがわかります。参考 https://getbootstrap.jp/docs/4.5/getting-started/introduction/
- 投稿日:2020-09-21T12:39:35+09:00
(´ω`) ... VueのTable {width,align}を一括指定するディレクティブつくりました
前回、DatGuiをBackEnd APIを検証するための登録画面に利用している。って記事を記載した。がだれからも良いねはなくLGTMも来なくて内心ビビってる。マジか。と思った。というかツイッターのフォロワーは未だ増えないままだ。この現状を見てInputMaskをぶっこんだ話なんかも展開する予定だったがやめた。そしてQiitaフォントサイズ大きいなってことで自分でブログを作ろうと思った。プロトタイプはあるし順調だ。だからその話もメモ代わりにQiitaで展開していくつもりだ。そこで動作するサンプルなんかも公開しよう。その間の記事はQiitaにメモ代わりで投稿することにした。
1.前提
趣味で何かを開発していたら、テーブルの列が後から増えてくる(登録する項目なんか)ってのはよくある話だ。少なくとも自分の間じゃそうだ。最初のプロトタイプを作るときは名前なんて姓だけで十分だしあとIDとPASSの3項目でテーブル作って社員登録機能を作る。みたいな最小限の構成で組み始めている。できた次に社員名いっとくか。メールアドレスいっとくか。みたいに項目を増やしていく。(機能が出来たら次のデータを作る。棚田だ)
2.問題
ここで起きてくる問題はCSSだ。今や<tag>の中にstyleをぶっこむなんて真似も全くしてこなかった俺だが、このような作り方の前では後から項目が増えるからID指定やCLASS指定でやろうと面倒くさくなってくる。nth-child(n)で最初は指定していたが列間の途中に項目を増やす状況になると、配列途中に値を挿入するみたいに以降の全番号を手で振りなおすという愚かさだ。面倒くさい(姓と名は左寄せのほうがいいな)
sample.csstable tr td:nth-child(1) { width:6em; text-align:center; } table tr td.employee-name { width:6wm; text-align:center; } table tr td#employee-name { width:6em; text-align:center; } table tr td[data=employee_name] { width:6em; text-align:center; }3.結局
タグの中に書き込んだ方が一番手っ取り早い。という結論に至った。周りはどうかな?どうやってるか知りたい。だが、なぜ毎回widthやtext-alignを打ち込まなくちゃならないんだ?面倒くさい。APIを検証するためのこの画面ではテーブルの項目は永遠と増え続ける。テーブル自体もだ。そのたびに書くのは面倒だ。その間の時間を省いてチロルチョコを食べた方がいい。健康的な考えだ。
sample.html<table> <tr> <td style='width:6em;text-align:center;'></td> </tr> </table>4.ということでディレクティブを作った
前置きが長かった。要はセルのtdのwidthとalignを{attribute:value}をvalueの一括指定でDOM作ってくれたら便利だなという話だ。ソースはこれ。
directive.vueVue.directive('style',function(el,binding,vnode){ vnode.context.$nextTick(function(){ var arr = binding.value.split(',') switch(binding.arg){ case 'align': _.each(el.children,function(el,i){ var align = arr[i] == 'l' ? 'left' : arr[i] == 'r' ? 'right' : 'center' el.classList.add(align) }) break; case 'width': _.each(el.children,function(el,i){ el.style.width = (arr[i] == undefined) ? 'auto' : arr[i] + 'em' }) break; } }) })5.使い方
ディレクティブをかますだけ。<tr>に。列の幅指定はヘッダだけで良く配置指定はボディに組み込んでいるが、確かにv-style:alignは効率的じゃないかもしれない。全セルに指定することになるからループも多い。ここだけCSSにした方がいいかも。どうやるのがベストだと思うか知りたい。ダブルクォートの間にシングルクォートを挟むのはこれ自体を文字列として評価してもらうためだ。
それからこのコードはLODASHに依存している。_.each()のとこだけだ。
sample.html<table> <thead> <tr v-style:width="'7,7,7,5,5,5,5,5,5,5,5,5,5,auto'"> </tr> </thead> <tbody> <tr v-for='v,k,n in list' v-style:align="'c,l,l,c,c,c,c,c,c,c,c,c,c,c'"> </tr> </tbody> </table>