ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

iframe要素をアスペクト比を保持したままレスポンシブ化する方法

May 21 2017

iframe要素といえばちょいと昔(XHTML1.1とか)では非推奨となってましたが
HTML5になるとWebアプリとしての期待からか復活しよりまして(笑)

そらーもうGoogleマップからYoutubeからなんでもかんでも
埋め込みコードを発行するとiframeだらけの水泳大会ですわ。
(決してヤケクソになっているわけではありません)

さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。
そんなもん幅100%指定してやればいいんじゃねえのか、と思いますが
そーんな簡単にはいかんのですよね。
縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。

まずは

  • iframe要素をdivで囲んでしまう
  • どちらにもpositionプロパティを設定。
    (divにはrelative、iframeにはabsolute)
  • 親要素のpaddingで、画面比率を無理からねじ込む

という事を考えてみる。

4:3と16:9さえあれば大概は対処出来るやろ、と思いやす。
横幅が100%やとすると、高さの比率 ÷ 幅の比率 × 100なので
4:3なら75%で16:9なら56.25%。

HTMLはこんな感じ。

<div class="iframebox">
 <iframe src="http://xxxxxxxxxxxx.xxx" frameborder="0"></iframe>
</div>

CSSはこう。(これは4:3の場合です。paddingの値で調節)

.iframebox {
   position: relative;
 width: 100%;
    padding: 75% 0 0 0; 
}
.iframebox iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

これできっちりと比率を保持したままレスポンシブ化が出来ます。

破損 ― どうやらオベーションのピエゾPUを壊しちゃった模様

May 20 2017

本日はまだ名もないユニットのスタジオ練習でした。
久々の再会以来、なんやかんやとこの3人でのスタジオも3回目。
夏過ぎぐらいにどっかで1ステージが出来れば、という目標を持ちながら
今までにやった事ない編成なので試行錯誤が続いております。

前回からヴォーカリストに「アコギ弾いてみん?」との提案を持ちかけた所、
まずはスタジオでのレンタルから開始。
2人でアコギを楽器屋に物色しにいったりと購入にものすごく前向きではあるものの
様々な事情(好みのカラーの在庫がなかった)などなどで今回もスタジオでのレンタル。

かったりー、めんどくせーという感じの彼ですが、バンドの事になると
とっても真面目なので(笑) 今回はきっちりと弾きながら歌うという事にチャレンジ。
初回はウォッシュボードだけだった打楽器諸々担当の彼も、いつの間にかカホンを購入。
自分の好きなカラーリングにペイントしてくるあたり拘りが見えます。
カホンももちろん初めての挑戦なのですが、リズムパターンを叩ける様にまで仕上げてきており、今回の練習で「お、これはなかなかイケるかも?」という感触を得る事が出来ました。

ただ。

どうも自分のエレアコ(オベーション)の調子がオカシイ。
いや、前にアコギの弦高を下げたい、という記事を書いたんですけども
アコギは成功して、そしてオベーションも削ったろかいねとサドルを取り出すと

こんな感じの特殊なサドルやったんですよね。
で、オベーションは弦高調節の為にサドルの下にシムが入ってるはずなんですが
コイツはすでに抜かれた後だったようで、自分でサドルの下を削ってしもたんです。
これがどうやら失敗の元だった様でして。

基本的に弦がサドルを下に押す圧力でピエゾピックアップが音を拾う構造みたいで
家で鳴らしてる時は気がつかんかったんですけども、スタジオで鳴らしてみると
5弦と4弦だけが異様に出力が低くなっておったんですよね・・・
これはもう「壊してしもた」って事になるんやな、と。

そこで考えたのが「こんな特殊な形しとるから悪いねん。汎用品に替えたろ」と。
それならブリッジサドルも普通のヤツに替えれるし素材も選び放題やないか、と。

そこでAmazonを調べてみるとやね。

送料無料で135円から。

泣く子も黙る(?)FISHMANの15,120円というこの幅広さ。
果たしてこの2つにそんなに明確な差があるんだろうか、という疑問ですわな(笑)

どっちもシールド1本だけ出てる状態だけやし、設置はめっちゃ簡単やと思います。
ブリッジサドルも汎用品を使えるし、それこそ交換も簡単になるでしょうしね。

さあ、果たしてどの価格帯を選ぶか、ですわな。
元々付いてたやつもそないにエエもんでもない気がするんよなあ。

なんにせよ、次のスタジオまではカタつけてまわんとイカン事ではあります(笑)

3 / 74812345...102030...最後 »

« Apr 2017 May 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31