投稿

注目の投稿

一枚だけ高さの違うimageを何とかしてslideshowのレイアウトが崩れないようにする

-
イメージ
一枚だけ高さの違うimageを何とかしてslideshowのレイアウトが崩れないようにする Slideshow Gallery 1 / 6 2 / 6 3 / 6 4 / 6 5 / 6 6 / 6 ❮ ❯ 上のslide show 3/6 花 が1,024px × 640px 他は1,024px × 576px 一枚だけheight が高い。 style="width: 100%" を解除し、object-fit: cover; を指定すると縮小表示され枠内に収まる。しかし、拡大時やスマホ表示で大きさそのままとなってしまうから戻す。 aspect ratio を常に16:9 に保つには、まずwidthを指定 30vw とする。これにheight はcalc()を使う。16:9 なら height: calc(30vw * 0.5625), 4:3なら height: calc(30vw * 0.75) 検索してたくさん出てきた <div> に入れて padding-top: 56.25% とするやり方では正しく要素を配置しないとレイアウトが崩れてしまったため、要素・Elementを追加せずに、CSSで指定する方法にたどり着いた。 slideshow に使っているjavaScript の img tag から 文字を取得する。</div> background-image:url(); では、img tag ではないから attribute alt="花" を取得できずに caption が undefined になってしまう。 slid
コメントを投稿
続きを読む

スタートアップフォルダとAmatsukazeのエンコード設定

-
イメージ
スタートアップフォルダとAmatsukazeのエンコード設定 windows + R を押して shell:startup 打ち込めばスタートアップフォルダが出てくる。 今回はネットで調べず、もしかしたらwindows のヘルプも使えるんじゃないかなと思って使ってみたらバッチリだった。 対話型botのヘルプ ショートカットを作成する場合は、エクスプローラのアドレスバーを右クリックしてアドレスをコピーすればOK。 C:\Users\ user name \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup windws help が意外と使えた。フォルダの名前が前もってわかっているのと、ここにショートカットをコピーすればいいのは知っていたからだが。 AmatsukazeServer のショートカットをここに置きたかった。EDCB で録画後のbatでエンコードする際にウィンドウのフォーカスが奪われてしまうのを防ぐため。 AmatsukazeServer を起動すると通常のAmatsukazeは起動しててもエラーが出るのでAmatsukazeClientを使う。 Amatsukaze のエンコード設定がGUIが独特でビットレート指定を弄っても、aviUtlでエンコードしたときのようにならず苦戦したので、参考に設定を載せておく。 お手軽エンコード設定。1080P TVで離れて見ても違いはわからない程度がNVEnc 2100Kbps くらいだと思う。PCの画面で近くで見るとちょっと劣化してるなぁとは感じる。特にこだわりは無く、h.264 3000Kbps でエンコードしたものと同等くらいの画質だと思う。1800~1500まで落とすとブロックノイズは無くても何か汚いなぁと感じると思う。 30分番組をCMカットして22分程度で380MBくらいのファイルが出来上がる。 TV の画質向上エンジンってすごいなぁと感じる部分でもあります。 -c hevc --profile main10 --vbrhq 2100 --vbr-quality 15 --maxbitrate 15500 --qp-init 15 --gop-len 90 git
1 件のコメント
続きを読む

FontAwesome 5 導入。text-decoration:underline がchromeで表示されていなかったのを解決した。

-
イメージ
FontAwesome 5 導入で気づいたこと。text-decoration がchromeで表示されていなかったのを解決した。 特に機能はないbutton。 test FontAwesome 5の導入についてはCDN を使った方法を載せているところがたくさんあるが、公式にはCDNの提供をやめるみたいだし、FontAwesome 5 だけ使いたいという場合はアカウントを作って自分用のリンクを発行してもらうのが直ぐにできて簡単だと思う。 FontAwesome start mail addreesを入力して,パスワードを作るだけ。 専用リンクが発行される コピーしたリンクを<head> tag のどこでもいいので、貼り付け・ペーストすればすぐに使えるようになる。 free アカウントで使えるicon を選んで icon を選んでコピペ 赤枠がHTML tag内で使う用 ターコイズブルーの枠内はCSSのpseudo element content などで使うunicode Free アカウントで使える iconは <i class="fas " ></i> 大体 fasとなっている 赤枠がHTML tag内で使う用 ターコイズブルーの枠内はCSSのpseudo element content などで使うunicode default size icon の大きさを変える <i class="fab fa-twitter fa-xs "></i> <i class="fab fa-youtube fa-sm "></i> <i class="fab fa-reddit-a
コメントを投稿
続きを読む

<input type="radio">から直接valueを取得する

-
イメージ
jQuery is fun!_2 <input type="radio">から直接valueを取得する $("input:text").val() blur(10px) brightness(200%) contrast(200%) drop-shadow(5px 5px 8px grey) grayscale(70%) hue-rotate(90deg) opacity(30%) invert(70%) saturate(20) sepia(100%) contrast(200%) brightness(150%) none <body> <form id="filterCSS"> <input type="radio" name="filter" value="blur(10px)" onchange="filterI(this)">blur(10px)<br> ~~~~~ <script> $(document).ready(function(){ $('#filterCSS > input[name="filter"]') .change(function(){ var result = $(this).val(); $("#pizza").css("filter", result); $("#P1").text(result); }); }); /*function filterI() { var x = document.getElementById("#filterCSS&quo
コメントを投稿
続きを読む

jQuery is fun!

-
イメージ
jQuery is fun! $(document).ready(function(){}) Top News Sticky ≡ Vanish End :eq(0) Hello World! Hello Sweden! Basic syntax: $(selector).action() $(.class).action() &(#id).action() CSSと同じ $(this).action() JavaScriptの this とほぼ同じ(?) jquery → $(document).ready(function() { var myElement = $("#id01"); $("#demo1").text("The text from the id01 paragraph is: " + myElement[0].innerHTML); }); JavaScript → { let myElement = document.getElementById("id01"); document.getElementById("demo2").innerHTML = "The text from the id01 paragraph is: " + myElement.innerHTML; } CSS selectors hide <pre> show <pre> toggle() style="disply: inline-block;" で横並びに $(document).ready ( function() { $("button#hide1").click ( function() { $("pre").hide("slow"); } ) ; } ) ; $(document).ready ( function() {
コメントを投稿
続きを読む