学習内容 HTML/CSSコーディング練習 Railsアプリ開発2周目突入（rails new） 学んだこと HTML/CSSコーディング練習 flex関連 flex, flex-wrap, justify-content, aligin-itemsは親要素に付ける 複数の要素を横並びにしたいときは親要素にdisplay: flex;を指定する 要素の間隔を広げたい場合はgap: ○○px;で指定すれば簡単 また、画像とテキストを横並びにするときは子要素の両方にwidth: 100%;を付ける ボタン関連 ボタンを中央寄せしたいときはdisplay: block;とmargin: auto;を指定する display: block;を付けてブロック要素に変更 paddingで余白をとる cursor: pointer;と擬似要素でopacityを指定すれば、よりボタンっぽくなる ボタンの原型クラスと色付けクラスで分けると汎用性アップ inputタグ関連 inputタグを中央寄せするときはwidthで横幅を指定してからmargin: auto;を付ける border-radius: 1000px;を指定すると角が丸くなる footer関連 footerはcopyrightにクラスを指定してtext-alignを指定すれば任意の方向に動かせる
Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。 Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。 そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。 実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。 Webページ https://poruruba.github.io/utilities/ （参考）GitHub https://github.com/poruruba/utilities やってること Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。 画面全体を覆うFlexパネルの定義 ロード完了したらフェードアウトさせる処理 フェードアウトを開始する処理 ロード中のアニメーションのひな型を選ぶ HTMLにロード中アニメーションのエレメントを挿入する Javascriptにフェードアウト開始の呼び出しを追加する 画面全体を覆うFlexパネルの定義 CSSで以下のように表現します。 public/css/start.css #loader-background { background: #fff; height: 100%; width: 100%; position: fixed; display: flex; top: 0px; left: 0px; z-index: 9999; --sk-color: #00ced1; } heightとwidthを100%にしてます。 ※--sk-colorは後で説明します。 ロード完了したらフェードアウトさせる処理 CSSで以下のように表現します。 public/css/start.css .loader-loaded { animation: fadeout-anim 1s linear forwards; } @keyframes fadeout-anim { 100% { opacity: 0; visibility: hidden; } } 上記にて、CSSアニメーションを使って1秒かけて透明およびhiddenにしてます。 フェードアウトを開始する処理 前のCSSで、loader-loadedのクラスがついていれば、フェードアウトのアニメーションが開始されるようにしました。 なので、Vueのロードが完了したタイミングで、Javascriptから以下を呼び出せばよいです。 public/js/vue_utils.js function loader_loaded(){ const element = document.getElementById("loader-background"); element.classList.add('loader-loaded'); } ロード中のアニメーションのひな型を選ぶ こちらのCSSが単純そうだったので採用しました。 tobiasahlin/SpinKit デモページもありますので、どんなアニメーションか確認できます。 CDNにも登録されているのですぐに使えます。 public/index.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" /> 例えば、以下のようなHTMLを追加すればよいようです。 <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> HTMLにロード中アニメーションのエレメントを挿入する <html> の <body> の先頭あたりに以下を追加します。 上記のアニメーションを使う場合 public/index.html <div id="loader-background"> <div class="sk-chase sk-center"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> </div> 要するに、idが「loader-background」をもったdivエレメントの中にさきほどのアニメーションの定義を記載するということです。 そのとき、classに「sk-center」を付けてあげます。そうすると、アニメーションが画面中央で動いてくれるようになります。 また、FlexパネルのCSS指定のところで「--sk-color: #00ced1;」というCSS変数を追加していました。これは、SpinKitのアニメーションの色の指定です。お好みで色を変えてください。 Javascriptにフェードアウト開始の呼び出しを追加する Vueでのロード完了として、mountedに以下を追加しましょう。 public/js/start.js mounted: function(){ // ・・・ loader_loaded(); // ★これ } おわり 私は、上記をすでに埋め込み済みの以下のテンプレートをいつも使ってます。 poruruba/express_template 以上
こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 今回は前回の続きになります 「Googleフォーム送信後のサンクスページを作ろう」 【主な内容】 ・formのコードを変更と追加 ・form後に新しいコード追加 前回の記事を見ていない方はこちら formにコードを追加 ①前回のコードの1行目の 「target="__self"」を「target="hidden_iframe"」に変更。 index.html <form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●まる/formResponse" target="hidden_iframe"> ※「targt="hidden"」には「非表示データを送信する」という意味がある。 ②①のコードの一番後ろに「onsubmit="submitted=true"」を追加 index.html <form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●まる/formResponse" target="hidden_iframe" onsubmit="submitted=true"> 「onsubmit="submitted=true"」はformタグにonsubmit属性を追加し使う関数を指定し使用する方法がある。 onSubmitイベント発生(フォームが送信されそうになった)時フォームの入力チェックを実行し、入力に不備がなければtrueを返してフォーム送信する。 不備があれば作成しているフォームだと各項目の所にエラーが出るようになっている。 ③の後にコードを追加 index.html <iframe name="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='●●';}"></iframe> 「iflame」はHTMLのインラインフレーム要素。特定のファイルを表示する事ができる。 「name=""」でフレームの名前を指定 「onload="if(submitted) {window.location='●●';}"」で、もしsubmittedイベントが発生しtrueになれば onloadイベントが発生しサンクスページが表示される。 {window.location='●●';}は相対パス・絶対パスどちらでも可能。 相対パス：{window.location='thanksform.html';} 絶対パス：{window.location='http://www.●●.co.jp/';} ④しっかり作動しているか確認して問題なければ完成！ 必須項目入力しないとエラー発生↓ 送信されるとサンクスページに飛ぶ↓ 全てまとめたコードはこちら <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf4Snx3cT3a6WkivRZTxi8Kc_LXcu4s1slJABl3cL61Z3OrXw/formResponse" target="hidden_iframe" onsubmit="submitted=true"> <h1>お問い合わせフォーム</h1> <ul> <li> <p>お名前 <span>※必須</span></p> <input name="entry.1930093585" type="text" required="required" class="textbox" placeholder="お名前"> </li> <li> <p>メールアドレス <span>※必須</span></p> <input name="entry.597662790" type="text" required="required" class="textbox" placeholder="メールアドレス"> </li> <li> <p>電話番号 <span>※必須</span></p> <input name="entry.2005620554" type="text" required="required" class="textbox" placeholder="電話番号"> </li> <li> <p>性別 <span>※必須</span></p> <label><input type="radio" name="entry.385876983" value="男性">男性 </label><label><input type="radio" name="entry.385876983" value="女性">女性</label> </li> <li> <p>その他お問い合わせ等</p> <textarea name="entry.55207288" class="textbox" placeholder="コメント"></textarea> </li> </ul> <input type="submit" id="btn" value="送信"> </form> <iframe name="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='●●.html';}"></iframe> サンクスページは検索すると沢山参考のページがあるのでそのままにするよりも 自分で作って埋め込んだ方がオリジナル感が出ます！ 最後に 前回と今回のものを２つあわせるとそこそこオリジナル感あるお問い合わせフォームができる。 メモを載せていますがどなたかの参考になれば嬉しいです
概要 画像の表示位置をコントロールするCSSの実装について、雑に記載します。 （今後の自分の備忘録も兼ねて。） HTML/CSS <div class="contents"> <img class="image" width="128" height="128" src="image.png" /> </div> .contents { width: 100%; height: 100vh; background-color: darkgray; } .image { /* ここに画像の表示位置をコントロールするCSSを書く */ } CSSが何も当たっていない時の表示はこんな感じで、画像が左上に表示されます。 左中央 .image { top: 0; bottom: 0; margin: auto 0; position: absolute; } 左下 .image { bottom: 0; position: absolute; } 下中央 .image { bottom: 0; left: 0; right: 0; margin: 0 auto; position: absolute; } 右下 .image { bottom: 0; right: 0; position: absolute; } 右中央 .image { top: 0; bottom: 0; right: 0; margin: auto 0; position: absolute; } 右上 .image { right: 0; position: absolute; } 上中央 .image { left: 0; right: 0; margin: 0 auto; position: absolute; } 画面中央 .image { top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute; }
はじめに <input type="color" />を使うことでカラーピッカー（ユーザーに色を選択させるUI）を簡単に実装できますが．見た目があまりかわいくない… そう思い，色々試してデザインする方法を編み出したので残しておきます． 結論 inputタグにopacity: 0;を設定することで透明にし，divタグで囲ってデザインする． 実装例 React+TypeScript+TailwindCSSで今回は円形にデザインした実装例です color.tsx const Color: React.VFC = () => { const [color, setColor] = useState<string>("#000000"); return ( <div className="w-8 h-8 rounded-full border border-gray-400" style={{ background: color }} > <input type="color" value={color} onChange={(e) => { setColor(e.target.value); }} className="w-full h-full opacity-0" /> </div> ); };
