些細な日常
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。するとフレックスボックスに対しては画像の親…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, pe…
JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 transformとaddEventListene…
スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor／色やbackground-color／背景色のように色名や色コードの値を指定してデザインを付けられる…
アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム（YPP）に参加しているクリエイターから税務情報を収集する必要があります。税額控除が適用される場合、YouTube における広告の表示、YouTube Premium、Super Chat、Super Stickers、チャンネル メンバーシップを通じて得た収益のうち、米国の視聴者から得た分につき Google が源泉徴収を行います。 YouTube での収益に関する米国の税務要件｜ YouTube ヘルプ ｜Google アメリカのアドセンスを運営するGoogleが準拠する税法の一部がアメリカの居住者から収益を得ている…
外国人の親日YouTubeチャンネルは日本人として逆に教えられることがあるのが特に面白い。観ると次々と関連したチャンネルが表示されるけれども気付いたのはロシア人がやっているのが目立つ。 昨今はヴイログ／Vlogといってブログのように気軽に撮られた動画が増えていてそんな親しみ易い内容のロシア人の親日YouTubeチャンネルが興味深いと感じる。 ロシアには日本の車や電化製品や漫画／アニメなどを通じて好印象を抱いて親日家になる人が多いとされる。こうしたことは他の国でもあり得なくはないけれどもロシア人の動画から初めて知ったのは日本語がロシア人には美しく聞こえるらしい。他の国の人から知ることはなかった。だからロシア人は人間として日本人に特別な感情を抱いたり、日本語を含めて日本への愛着が国民的に強くなるのかも知れないと想像される。親日YouTubeチャンネルを観ても思いが深くて心が親身に伝わるようだ。 発…
