YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 Bloggerブログでどうやるか、何よりもデバイスの画面毎のデザインの振り分けが必要だけど、しかしBloggerでのYouTube動画の埋め込みは只単にYouTubeから得られる埋め込みコードを一般的に使うだけではな…
歌手の 松山千春 は主にフォークソングの作詞作曲と演奏を行っていて前世紀後半の1980年頃に 恋 や 長い雨 などのヒット曲を連発して全国区の知名度を誇るに至った。以来、今日まで四十年近くも歌謡界の第一線で活躍し続けて来ているわけで、日本を代表する歌手、またはフォークソングのシンガーソングライターといって良いと思うんだ。 松山千春 / あの日の僕等 via ColumbiaMusicJp 僕はいつもテレビでちょっと耳にする程度でしかなかった松山千春の音楽だったけれども2014年に発表された通算七十四作目のシングルとなる あの日の僕等 を聴いたら純粋な心を表現していると泣けて来るほどに感動して歌手として初めて本当に凄いと認め切った。 切欠はYouTube動画の同曲のPVに出演している 国分佐智子 だった 日本で大好きな芸能人で、 とても素晴らしいセンス を持っている。何より…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。 YouTube や ドライブ など、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSの padding や position を使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可…
鶫真衣 というソプラノ歌手、澄み渡る青空のような魅惑的な声の歌姫を擁する 陸上自衛隊中部方面音楽隊 のアルバムの いのちの音 から同名の表題曲を聴いて正しく死の恐怖に打ち勝つ勇気そのものが表現されていると感じながら人生の励ましに満ちたエールを受け取った。 陸上自衛隊中部方面音楽隊(ソプラノ：鶫 真衣 指揮：柴田昌宜) / いのちの音 via ColumbiaMusicJp 歌うと共に作詞したのも鶫真衣で、全てが自衛隊に如何にもぴったりの仕上がりなんだ。日々、命懸けの隊員としての自己表現の完成度の高さに驚くし、嘘偽りのない誠実な芸術に胸打たれずにいない。 アルバムのタイトルがいのちの音というタイトルなので、やはり命の大切さと、今生きているこの瞬間、ひとつひとつが奇跡のようなものなんだということを伝わるように思いを込めて作りました。 鶫真衣／“美しき守り人”鶫真衣(…
サイトに 開閉ボタン でメニューを出した際のエフェクトとして外側を暗くすると見易い。そして開閉ボタンだけではなくて開いたメニューの範囲外、または新しく表示された領域外のクリックでも同じように閉じられると使い易い。どう作成するべきか、JavaScriptで実行するプログラムを考えてみる。 開いたメニューの外側を暗くする プログラムのアイデアとしてHTMLの領域のdiv要素を新たに作成してCSSで暗い背景色を付けて開いたメニューと元のコンテンツの間に挿入する方法が挙げられる。 サンプルのソースコード （開閉ボタン） アイテム① アイテム② アイテム③ ※押すとメニューが外側の明暗を変えながら開閉する。 HTML <span class="svg-button"> <svg class="hamburger-menu-…
サイトのハンバーガーメニュー（≡）などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要素を取得した上で、イベントハンドラの onclick からさらに表示変更を行うコンテンツにCSSの display のnone（非表示）のようなデザインのclassを classList プロパティのtoggle()（交互）メソッド、またはadd()とremove()（追加と削除）の二つのメソッドで付け替えて開閉ボタンを作成することができる。 Five colorful doors by djoanis [ CC0 ], via Pixabay 目次 開閉ボタンのJavaScriptの基本的なソースコード ハ…