display:flexで画像が潰れるとか膨らむなんて場合の対処法

イメージ

ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。す…

ボタンなどのposition:fixedのHTML要素をサイトの幅に合わせて表示する方法

イメージ

サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、…

CSSのtransition/animationに連動できるJavaScriptのtransitionend/animationend

イメージ

JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford on Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 tran…

スマホでタップすると光るリンクの色と形のデザイン

イメージ

スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor/色やbackground-color/背景色のように色名や色…

住所の英語での表記の仕方

イメージ

アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方

イメージ

アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム(YPP)に参加しているクリエイターから税務情報を収集する必要があります。税額控除が適用される場合、YouTube における広告の表示、YouTube Premium、Super Chat、Super Stickers、チャンネル メンバーシップを通じて得た収益のうち、米国の視聴者から得た分につき Google が源泉徴収を行います。 YouTube での収益に関する米国の税務要件| YouTube ヘルプ アメリカのアドセンスを運営するGoogleが準拠する税法の一部がアメリカ…

ロシア人の親日YouTubeチャンネルの発見

イメージ

外国人の親日YouTubeチャンネルは日本人として逆に教えられることがあるのが特に面白い。観ると次々と関連したチャンネルが表示されるけれども気付いたのはロシア人がやっているのが目立つ。 昨今はヴイログ/Vlogといってブログのように気軽に撮られた動画が増えていてそんな親しみ易い内容のロシア人の親日YouTubeチャンネルが興味深いと感じる。 ロシアには日本の車や電化製品や漫画/アニメなどを通じて好印象を抱いて親日家になる人が多いとされる。こうしたことは他の国でもあり得なくはないけれどもロシア人の動画から初めて知ったのは日本語がロシア人には美しく聞こえるらしい。他の国の人から知ることはなかった。だからロシア人は人間として日本人に特別な感情を抱いたり、日本語を含めて日本への愛着が国民的に強くなるのかも知れないと想像される。親日YouTubeチャンネルを観て…

nanacoカードの特徴と作り方

イメージ

所用でマイナンバーカードが必要となり、申し込んで手に入れたけど、偶々、マイナポイントが付与されるので、受け取りに特定のポイントカードなどがさらに必要となった。一つも持ってなかったので、色んな店のポイントに対応していて使い易そうな nanacoカード を新しく作ることにした。 nanacoの三種類のタイプ nanacoカード 電子マネーカードで使用 有料登録/審査なし 店頭かWebで申し込んで受け取る nanacoモバイル おサイフケータイで登録使用 無料登録/審査なし 対応するスマホでアプリをダウンロード セブンカード・プラス クレジットカードで登録使用 無料登録/審査あり 郵送かWebで申し込んで受け取る ※シニアナナコ(六十歳以上)、ENEOS nanaco(ENEOS)やANA QUICPay + nanaco(ANA JCBカード)という特別仕様もある。 ※nanacoギフ…

JavaScriptの時間を数えて表示するストップウォッチのプログラム

イメージ

JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 スタート ストップ リセット ストップウォッチのソースコード HTML <figure class="time"> <p class="counter">00:00.00.00</p> <button class="start" type="button">スタート</button> <button cl…

JavaScriptのsetTimeoutやsetIntervalをrequestAnimationFrameで置き換える

イメージ

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnim…

CSSのアニメーションで幾らか間隔を空けながら繰り返すマークアップ

イメージ

CSSのアニメーションで動きを止めるのはanimation-delayで、繰り返して動かすのはanimation-iteration-countだけれどもそれらを組み合わせても幾らか間隔を空けながら繰り返すことはできない。 というのはanimation-delayはアニメーションが始まるまでの時間を取っているだけだからだ。最初の動きが終わって二回目以降の動きが始まる直前には関与しないし、止めることはできないものなんだ。 動きに間隔を空ける@keyframesの使い方 Dangling feet by Greyerbaby / CC0 繰り返しの途中で止まって見える、または繰り返さなくてもそのように一回だけ動く間に表現するにはCSSアニメーションの流れを指定する@keyframesを使うのが相応しい。 CSS の @keyframes @-規則は、アニメーショ…

Bloggerで投稿画像を横並びで表示する方法

イメージ

以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン3の公式テーマ Con…

BloggerのVariableタグのfontの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのfontのtypeについてどのように使われるかの内容と公式テーマのソースコードでfontの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) fontのtypelではvalue以外が省略できない必須項目となっている。 fontのマークアップ例 <Variable name="body.text.font" description="Font" type="font" default="$(robo…