高さが変わってもボタンの位置は上下中央揃えになるはずです。デザインに応じて適宜変更してください。思った通りの動作をしなかった時の対処法でした。正式な方法ではありませんが、少なくとも私の環境では問題なく動作しておりますので、お急ぎの時はこの方法を検討してみてはいかがでしょうか。(0)88月,20190著者:asaba【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法divタグにくっつけたimgソースが、下にスクロールした時に一緒に移動してしまったときの対処法です。今回は他のページで使われているアイコンを流用することにしたのですがcssで設定した要素は絶対に一緒のはずなのになぜかスクロールと同時に画像もおりてくる事態に。仕方がないのであわてず騒がず要素を触りながら確かめることにしました。原因はpositionに何も設定していなかったのが原因だったみたいで、ralativeだのabsoluteだのfixedだの何かしらの設定をする必要があったみたいです。},↑このように高さが設定してあるタグに対しては何らかのpositionの値を与える必要があります。この中で一番無難なのがralativeで、同じタグに要素をぶち込まない限りは機能してくれるので何も制約がない場合はこいつをおすすめします。ちなみにabsoluteはブラウザによっては反映されないものもあるので個人的にはあまり推奨しません。以下でのみ発生するテキスト位置のずれに対処したので、その方法についてまとめ。プロパティを指定していたのですが、何故か文字が上にずれるという謎現象が発生していました。調べたところ下記の記事がヒットしました。指定すると綺麗に整うとのことでした。具体例は下記のとおりです。指定しなくてもOKです。2行以上になる事が考えられる場合は必ず指定しておきましょう。以上、テキストが上下左右中央揃えにならない時の対処法でした。指定していたのですが、親要素で指定しないと崩れるとは...分かりませんでした。無事解決できてよかったです。同じことでお困りの方の参考になれば幸いです。今日少しハマったので備忘録としてまとめました。プロパティを使って、要素からはみ出た分を横スクロールで表示しようとしたところ、思った通りに動作せず...。原因が分からなかったので検索したところ、下記の記事がヒットしました。追加する必要があるとのことでした。こちらは要素内で自動的に改行しないようにするためのプロパティです。具体的なコードは下記のとおりです。nowrap;}上記コードでは、縦スクロールは禁止し、横スクロールを強制にしています。追加したところ、問題なく動作しました!確かに要素内で改行が発生してしまっておりましたが、その解決策が分からなかったんですよね。以上、要素の横スクロールが効かない時の対処法でした。追加すれば動くことが多かったので、手こずってしまいました。どなたかの参考になれば幸いです。【Vue】改行とv-htmlとXSS対策Vue.js上で文字列を展開したい時があります。それは誰かが投稿したコメントをコンポーネント上に表示する時です。いった時コメントの改行が反映されていない場合、見栄えが悪くなります。改行を行う必要があります。HTML上の改行と言えばbrタグです。PHPにはnl2brという改行コードを改行タグに変換する組み込み関数があるぐらいです。Manual改行の実現でありがちで危険なアンチパターンはこのnl2br関数を用いたコメントをそのまま表示しようと考えるものです。Vue.jsにはv-htmlというディレクティブがあり、これを用いると普段かかっている安全装置のHTMLエスケープを外し、HTMLとしてパース、実行します。brタグとv-htmlを用いることで改行コードを改行タグに変換して表示できます。v-htmlはXSSをまあまあ容易に招く危険性を持ちます。危険というのは単純な<script>alert('XSS')</script>ぐらいならVueの仕組み上実行されず済むからです。AllowScriptAccess="always"></EMBED>の様な多少の変化球(scriptタグをbase64形式でエンコード、埋め込んだコード中でデコードして実行)であっさり破られるのでやはり危険です。脆弱性を容易に引き起こすので、ウェブサイトで動的に任意のHTMLを描画することは、非常に危険です。展開を利用してください。ユーザーから提供されたコンテンツに対しては決して使用してはいけません。Vue.jsこれの対策は実現したい機能に関しての実装を生のHTMLに頼るのでなく個々の別手法を用いるのが一番でしょう。改行に関してはCSSのwhite-space実現できます。MDN上記リンクから引用した次の表の’改行を残す’スタイルを用いればと生のHTML実行を用いるまでもありません。今回は使わなかったのですが、今後使う機会があるかもしれないので備忘録としてまとめ。文字列を扇状に表示する方法です。画像にしてしまうのが一番簡単そうですが、それができない場合には有効です。そのスクリプトがこちらの「Arctext.js」です。公式サイトは下記からご確認ください。jQueryhttps://tympanus.net/Development/Arctext/使い方は、まず公式の配布ページから、ソースをダウンロードします。要素内で読み込みます。必要なので、一緒に読み込みます。コードは下記のとおりです。src="./jquery.arctext.js"></script>準備はこれでOK。id='arc-text'>扇状に表示したいテキスト</p>そして、任意のタイミングで下記の処理を実行します。読み込み終わったタイミングとかでOKだと思います。扇状にテキストをカーブさせています。急なカーブを描きたい場合は、数値を大きくしてください。ほかにもオプションがあり、文字列をカーブさせたいけれど、文字の向きはまっすぐなままにしたい、ということもできます。いうオプションを追加すると、谷型のカーブを描くようにもできます。-1});これらを組み合わせれば、文字列を円状に表示することもできますね。以上、文字列を扇状に表示するためのスクリプト「Arctext.js」のご紹介でした。機会があればぜひ使ってみたいと思います。【CSS】疑似要素による番号リストの連番を任意に飛ばすol、liを用いた番号リストがあります。これの番号部のみを好きに作る方法に:beforeの疑似要素を用いるものがあります。contentで番号を制御、表示し、background以下で好きなように修飾する方法です。このように好きに番号リストの番号部のデザインを作れますが、面倒な部分もあります。num;でしか値を増やせない点です。本来の番号リストは次の様にli要素の属性valueで番号を制御できます。:beforeの方は制御できていません。制御する方法の一つはCSSです。適宜リセットするstyleを定義します。この方法はCSSが膨れ上がるという問題点がありますが、一応対処が可能です。適宜インクリメント、デクリメントするのみの要素を定義する、ということもできます。これはこれでHTMLの要素数が無駄に増えます。抜け版を表すのには適していますが、任意に操りやすいとは言い難いです。両方を使えばそれぞれの欠点は多少補いあえます。デザインに最初から関われるのであれば、CSSで閉じている疑似要素を使うのでなく、本物の要素を扱った番号リストを作った方がよいでしょう。その方が後の変更が楽になります。Vue.jsなら簡単です。【CSS】背景色と要素のブレンド方法を指定する「mix-blend-mode」プロパティこんなのあるんだ!というプロパティを見つけたので、簡単にまとめ。したら今後使う機会があるかもしれませんしね。それがこちらの「mix-blend-mode」プロパティです。CSSリファレンスhttp://www.htmq.com/css/mix-blend-mode.shtmlこのプロパティは、背景色とその要素の色の重なり方を指定できるものです。要素に背景色ををブレンドしない状態です。他にもたくさん種類がありますが、使いこなせそうにないので、とりあえずこのあたりだけでも覚えておけばいいのではと思います。上記の記事に、ブラウザ上での表示例が載っているので、参考にしてください。こちらの記事に載っているサンプルも分かりやすくておすすめです。CSS:カスケーディングスタイルシート|MDNhttps://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode以上、背景色と要素の色の重なり方を指定できるプロパティ「mix-blend-mode」のご紹介でした。Playerに頻繁にクラッシュする不具合が発生。現在修正済みで公開待ち状態。