WEBデザインの教科書)。今やってるプロジェクトでは、デザイン会社にHTMLを作ってもらい、それをこちらでVue.jsにあてはめて処理を追加するということをやっているのですが、デザイン会社から提供してくれたHTMLでは隙間が空いているのに、VueCLI3でビルドした結果では隙間が空いていないという現象が発生しました。value="ボタン3">普通にHTMLで書くと下記のようにボタンとボタンの間に隙間があきます。VueCLI3で結果を見てみると、隙間が空かなくなってしまいます。原因を調べてみると、VueCLI3での結果ではinputタグ同士にスペースや改行がないHTMLとなってしまっていることが分かりました。最初、iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしようかと思ったのですが、調べてみると設定で切り替えることで解決できることが分かりました。Overflowどうやら、vue.config.jsに下記のchainWebpackの記述を追加すればいいようです。Componentをビルドするためのプラグインの設定を書き換える記述のようです。Loaderも理解してないのでこういうところでハマってしまいますね。vue-loader)。いうわけで上記設定をいれることにより、無事にHTMLタグ間にスペースが入り、ボタンの間にも隙間ができました。思いきや、別の連続したボタンの箇所で、デザイン会社のHTMLでは親divタグにすっぽり収まっている箇所が、VueCLI3の生成結果ではうまく収まらず、何がおかしいんだと必死で元のHTMLとVueCLIの生成したHTMLをChromeの開発者ツールで見比べました。HTML構造は全く同じで、適用されているスタイルも全く同じ......。悩んで理由が分かりました。デザイン会社に作成していただいたHTMLでは、スペースも改行もされずにボタンタグが横に並んであり、自分はそれじゃ見栄えが悪いからと改行してしまっていました......。その結果、VueCLI3の生成結果では隙間が空いてしまい、うまく収まらずに改行が発生してしまっていました......。iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしたほうがよかったかな......(というより、本当なんで、改行やスペースが間にある連続したinline-blockの要素は隙間ができる仕様にしたんだ......)。2019/11/14追記:VueCLI4だとまた書き方が違うようです。一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。CSSを扱っていてときどきよくわからなくなるのが、...CSS:active疑似クラスは右クリックでも適用する?しない?今やってるプロジェクトでは、ボタンやら画像やらがあるウェブアプリを作っているのですが、先日お客さんから右クリックしてもコンテキストメニューがでないようにしてほしいとお願いされました。ようは、画像を簡単に保存できないようにしてほしいと...Vue.jsVue3での中継用コンポーネントの作り方についてメモただたんに、親コンポーネントから孫コンポーネントにプロパティを渡したりslotの機能を利用するような、中継用の子コンポーネントがほしくなることがよくあります。書き方を覚えられないからメモ。フロントエンド開発の教科書」の本をいただきました。uiではじめる単一ファイルコンポーネントのVue.js今年からVue.jsを使ったプロジェクトに関わるようになりました。前から気にはなっていたのですが、趣味で使う気にもなれず、ようやく触ることができました(自分が興味があった技術に触れることができる仕事というのもなかなかうれしいもんですね)。今回はVue.js初心者向けの内容。先日、今まで全くVue.jsの開発をしたことがない(もしかしたらJavaScriptも初めての)後輩の同僚に、簡単なマニュアルを渡したうえで、Vue.jsの変更を行ってもらった。コメントをキャンセルメールアドレスが公開されることはありません。(幻冬舎文庫)(ブクログレビュー)カテゴリーPR2Web制作76CSS16HTML8HTML512jQuery17Vue.js14WebAPI2WordPress6まとめ13フリーソフト7プログラミング101JavaScript61PHP5R10SQL10UiPath7VBA3クラシックASP1日記11イベント5書評1未分類2豆知識19雑記25アーカイブ2023年4月12023年3月12023年1月12022年12月12022年11月32022年10月22022年9月12022年8月12022年6月22022年5月12022年4月32022年3月22022年2月52022年1月82019年9月22019年6月32019年5月12019年2月32019年1月32018年12月42018年11月12018年10月22018年9月22018年8月22018年7月32018年6月12018年5月22018年4月22018年3月52018年2月12016年11月32016年10月62016年2月12016年1月32015年12月22015年11月32015年10月12015年9月12015年7月12015年5月22015年4月22015年3月22015年2月22015年1月22014年12月42014年11月92014年10月62014年9月52014年8月72014年7月62014年6月52014年5月52014年4月62014年3月62014年2月92014年1月132013年12月82013年11月92013年10月82012年8月12012年6月32012年5月42012年4月42012年3月62012年2月82012年1月17タイトルとURLをコピーしました。